Μενού

Δημιουργία εφαρμογής μίας σελίδας χρησιμοποιώντας το AngularJS (Tutorial with παράδειγμα)

  • Κύριος
  • Αλλα
  • Δημιουργία εφαρμογής μίας σελίδας χρησιμοποιώντας το AngularJS (Tutorial with παράδειγμα)

build single page application using angularjs

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

Δημιουργία μίας σελίδας εφαρμογής SPA χρησιμοποιώντας το AngularJS:

Το μόνο που πρέπει να γνωρίζουμε για το AngularJS εξηγήθηκε στο προηγούμενο σεμινάριό μας. Σε αυτό το σεμινάριο, θα μάθουμε περισσότερα για την ανάπτυξη μιας εφαρμογής σελίδας χρησιμοποιώντας το AngularJS.

Ξέρετε για το Netflix; Έχετε επισκεφθεί ποτέ τον ιστότοπό του;

Εάν η απάντησή σας είναι 'Ναι', τότε γνωρίζετε πώς μοιάζει μια εφαρμογή μιας σελίδας! Εξερευνήστε μας Πλήρης οδηγός για το AngularJS για να αποκτήσετε μια σαφή γνώση του AngularJS.

Εφαρμογή μίας σελίδας χρησιμοποιώντας AngularJS

Επιτρέψτε μου να επεξεργαστώ!

Το Netflix χρησιμοποιεί το AngularJS στο πλαίσιο του πελάτη για να εμπλουτίσει τις λειτουργίες των χρηστών στις εφαρμογές ιστού τους.

Έκαναν το περιβάλλον χρήστη τους πολύ απλό, κάνοντάς το ένα ΙΑΜΑΤΙΚΗ ΠΗΓΗ (Εφαρμογή μίας σελίδας). Αυτό σημαίνει ότι η πλοήγηση στο Netflix πραγματοποιείται χωρίς ανανέωση ολόκληρης της σελίδας.

Τι θα μάθετε:

Πλεονεκτήματα εφαρμογών μίας σελίδας

Παρακάτω δίνονται μερικά πλεονεκτήματα των Εφαρμογών Μίας Σελίδας.

  • Βελτιωμένη εμπειρία χρήστη.
  • Οι ιστοσελίδες ανανεώνονται γρηγορότερα καθώς χρησιμοποιείται μικρότερο εύρος ζώνης.
  • Η ανάπτυξη της εφαρμογής - index.html, CSS bundle και javascript bundle - στην παραγωγή γίνεται ευκολότερη.
  • Ο διαχωρισμός κώδικα μπορεί να γίνει για να χωρίσει τις δέσμες σε πολλά μέρη.

Γιατί να αναπτύξετε ένα SPA χρησιμοποιώντας το AngularJS;

Σήμερα, υπάρχουν πολλές εφαρμογές javascript που είναι διαθέσιμες στην αγορά, όπως ember.js, backbone.js, κ.λπ.

Παρακάτω αναφέρονται μερικοί λόγοι για τους οποίους το AngularJS είναι σαφής νικητής:

# 1) Μην εξαρτάτε

Σε αντίθεση με το AngularJS, το backbone.js έχει εξαρτήσεις από το underscore.js και το jQuery. Ενώ, το ember JS έχει εξαρτήσεις από το τιμόνι και το jQuery.

που δεν είναι παράδειγμα εξόρυξης δεδομένων;

# 2) Δρομολόγηση

Η πλοήγηση μεταξύ ιστοσελίδων που δημιουργήθηκαν χρησιμοποιώντας το AngularJS είναι πολύ απλή σε σύγκριση με αυτές που έχουν δημιουργηθεί με χρήση άλλων πλαισίων javascript. Οι οδηγίες που χρησιμοποιούνται στο AngularJS είναι ελαφριές, επομένως οι μετρήσεις απόδοσης του AngularJS είναι αισθητές.

# 3) Δοκιμές

Μόλις δημιουργηθεί η εφαρμογή χρησιμοποιώντας το AngularJS, θα μπορούσαν να πραγματοποιηθούν αυτοματοποιημένοι έλεγχοι για διασφάλιση ποιότητας χρησιμοποιώντας σελήνιο. Αυτό είναι ένα από τα καταπληκτικά χαρακτηριστικά εφαρμογών που έχουν δημιουργηθεί χρησιμοποιώντας την ανάπτυξη AngularJS.

γωνιακά χαρακτηριστικά JS

(πηγή εικόνας edureka.co)

# 4) Δεσμευτική δεδομένων

Το AngularJS υποστηρίζει αμφίδρομη δέσμευση δεδομένων, δηλαδή, όποτε ενημερώνεται το μοντέλο, η προβολή ενημερώνεται επίσης καθώς το AngularJS ακολουθεί την αρχιτεκτονική MVC.

Ως εκ τούτου, τα δεδομένα μπορούν να προβληθούν από τον χρήστη, με βάση τις προτιμήσεις του.

# 5) Υποστήριξη για το πρόγραμμα περιήγησης

Το AngularJS υποστηρίζεται στα περισσότερα προγράμματα περιήγησης, συμπεριλαμβανομένης της έκδοσης 9 και άνω του IE. Μπορεί επίσης να προσαρμοστεί στην εργασία σε κινητά, tablet και φορητούς υπολογιστές.

# 6) Ευελιξία

Το AngularJS υποστηρίζει ευελιξία, πράγμα που σημαίνει ότι μπορεί να ικανοποιήσει νέα αιτήματα από επιχειρήσεις όταν και όταν έρχονται σε ανταγωνιστικά εργασιακά περιβάλλοντα. Οι ελεγκτές μπορούν να εφαρμοστούν στην αρχιτεκτονική MVC για την εξυπηρέτηση αυτών των αιτημάτων.

Υπάρχουν περίπου 30000 μονάδες στο AngularJS, που είναι άμεσα διαθέσιμα για ταχεία ανάπτυξη εφαρμογών. Όταν ένας προγραμματιστής θέλει να προσαρμόσει μια υπάρχουσα εφαρμογή, μπορεί να χρησιμοποιήσει τις λειτουργικές μονάδες που είναι ήδη διαθέσιμες και να τροποποιήσει τον κώδικα αντί να δημιουργήσει ολόκληρη την εφαρμογή από το μηδέν.

Επιπλέον, οι συντελεστές και οι ειδικοί στο AngularJS είναι πολλοί σε αριθμό, επομένως θα λάβετε γρήγορες απαντήσεις σε τυχόν ερωτήματα που δημοσιεύετε σε φόρουμ συζήτησης.

Πώς να αναπτύξετε μια εφαρμογή μίας σελίδας χρησιμοποιώντας το AngularJS;

Παρακάτω αναφέρονται τα διάφορα βήματα που εμπλέκονται στην ανάπτυξη ενός SPA χρησιμοποιώντας το AngularJS.

Βήμα 1: Δημιουργήστε μια ενότητα

Όλοι γνωρίζουμε ότι το AngularJS ακολουθεί την αρχιτεκτονική του MVC. Ως εκ τούτου, κάθε εφαρμογή AngularJS περιέχει μια ενότητα που αποτελείται από ελεγκτές, υπηρεσίες κ.λπ.

var app = angular.module('myApp', ());

Βήμα 2: Ορίστε έναν απλό ελεγκτή

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

Βήμα 3: Συμπεριλάβετε το σενάριο AngularJS σε κώδικα HTML

Καθορίστε την ενότητα (δημιουργήθηκε στο βήμα 1) στο ng-εφαρμογή χαρακτηριστικό και ο ελεγκτής (ορίζεται στο βήμα 2) στο ο ελεγκτής ng Χαρακτηριστικό.

{{message}}

First Second Third

(Όταν το Angular εντοπίζει τα πρότυπα που ορίζονται από τις οδηγίες ng-template, θα φορτώσει το περιεχόμενό του στην προσωρινή μνήμη προτύπου και δεν θα εκτελέσει αίτημα Ajax για λήψη του περιεχομένου τους.)

Μόλις εκτελεστεί το HTML στο localhost, εμφανίζεται η ακόλουθη σελίδα.

πρώτη ιστοσελίδα

Παρατηρήστε ότι οι υπερσύνδεσμοι Πρώτος δεύτερος τρίτος στη σελίδα είναι δρομολογητές και όταν κάνετε κλικ σε αυτούς, πραγματοποιείται πλοήγηση στις αντίστοιχες ιστοσελίδες, χωρίς ανανέωση.

δεύτερη ιστοσελίδα

Τρίτη ιστοσελίδα

Αυτό είναι! Ελπίζω να δημιουργήσετε ένα απλό SPA όπως αποδεικνύεται σε αυτό το blog. Μόλις λάβετε την έξοδο με επιτυχία, μπορείτε να δοκιμάσετε σύνθετα SPA στις ίδιες γραμμές.

συμπέρασμα

Οι εφαρμογές μιας σελίδας είναι πολύ δημοφιλείς στις μέρες μας, με επωνυμίες όπως το Netflix να τις επιλέγουν.

Εάν αναπτύσσετε SPA, τότε το AngularJS είναι η προφανής επιλογή. Ωστόσο, η νέα έκδοση του AngularJS, δηλαδή το Angular προσφέρει περισσότερες λειτουργίες. Διαφορετικά, υπάρχουν διάφορες τεχνολογίες όπως η ανάπτυξη εφαρμογών Node JS κ.λπ.

Μείνετε συντονισμένοι στο επερχόμενο σεμινάριό μας για να εξερευνήσετε σχετικά με την αναβάθμιση της γωνιακής έκδοσης!

Εκπαιδευτικό πρόγραμμα PREV | ΕΠΟΜΕΝΟ Φροντιστήριο

Συνιστώμενη ανάγνωση

^