SPA Χρησιμοποιώντας AngularJS

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

Σήμερα, το AngularJS έχει γίνει ένα από τα πιο δημοφιλή πλαίσια ανάπτυξης κυρίως λόγω της ικανότητάς του να βοηθά τους προγραμματιστές να δημιουργούν Ενιαίες Εφαρμογές Σελίδας (SPA) με ευκολία. Στις παραδοσιακές εφαρμογές ιστού, ο πελάτης (πρόγραμμα περιήγησης) ξεκινά ένα κανάλι επικοινωνίας με το διακομιστή ζητώντας μια σελίδα. Ο διακομιστής αποκρίνεται με την επεξεργασία του αιτήματος και την αποστολή του HTML της σελίδας πίσω στον πελάτη. Εάν ο χρήστης ζητήσει μια νέα σελίδα, ο διακομιστής στέλνει μια άλλη σελίδα HTML. Ακόμα κι αν ο πελάτης ζητήσει μια μικρή αλλαγή, πείτε μια φόρμα με βασικές λεπτομέρειες, ολόκληρη η σελίδα πρέπει να φορτωθεί ξανά από τον διακομιστή και να επιστραφεί στον πελάτη.



Αιτήματα HTML & Ajax

Σε Εφαρμογές μίας σελίδας, ολόκληρη η σελίδα φορτώνεται σε μία λήψη και η επακόλουθη επικοινωνία πραγματοποιείται από τον διακομιστή χρησιμοποιώντας αιτήματα Ajax. Το πρόγραμμα περιήγησης πρέπει να ενημερώνει μόνο το τμήμα της σελίδας που έχει αλλάξει και δεν χρειάζεται να φορτώνετε ξανά ολόκληρη τη σελίδα κάθε φορά που ένας χρήστης υποβάλλει ένα νέο αίτημα.
Δεδομένου ότι η προσέγγιση SPA μειώνει το χρόνο που χρειάζεται ο διακομιστής για να ανταποκριθεί σε αιτήματα χρηστών, οι εφαρμογές ιστού εκτελούνται γρηγορότερα, χρησιμοποιούν λιγότερη ισχύ υπολογισμού και επιτρέπουν στους προγραμματιστές διεπαφής χρήστη (UI) να δημιουργήσουν πιο ελκυστικές, ευέλικτες ιστοσελίδες.



Δημιουργία σελίδων Shell

Η «μεμονωμένη σελίδα» στο SPA αναφέρεται σε μια σελίδα κελύφους που ανταποκρίνεται σε ερωτήματα με τη μορφή HTML, CSS ή JavaScript. Η σελίδα κελύφους αποδίδεται ασύγχρονα με το HTML, εξαλείφοντας την ανάγκη μετακίνησης στον διακομιστή. Η σελίδα κελύφους χρειάζεται μόνο μια αναφορά στη βιβλιοθήκη JavaScript AngularJS και μια οδηγία ng-view (ένα εικονικό κοντέινερ που επιτρέπει στους προγραμματιστές διεπαφής χρήστη να αλλάζουν μεταξύ προβολών) για να πει στο AngularJS πού πρέπει να αποδίδονται οι σελίδες περιεχομένου στη σελίδα κελύφους.
Μέσα στην ίδια «ενιαία» σελίδα, το AngularJS επιτρέπει στους προγραμματιστές να παρέχουν πολλές προβολές που περιέχονται στην ίδια διεύθυνση URL. Μπορούν να εμφανιστούν διαφορετικά σύνολα προβολών - το ένα μετά το άλλο - στην ίδια σελίδα κελύφους και κάθε προβολή φορτώνεται δυναμικά καθώς και όταν ο χρήστης κάνει κύλιση στη σελίδα.

SPA-using-AngularJS-multiple-views



Η ενσωματωμένη οδηγία AngularJS - ng-app - επιτρέπει στους προγραμματιστές να αρχικοποιήσουν την εφαρμογή, με την επιλογή προσθήκης οδηγιών τρίτων. Η οδηγία ng-model, από την άλλη πλευρά, σας επιτρέπει να προσθέσετε εκφράσεις δέσμευσης δεδομένων στη μνήμη. Ρίξτε μια ματιά εδώ:

μεταπτυχιακό δίπλωμα έναντι μεταπτυχιακών

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



Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων και θα επικοινωνήσουμε μαζί σας.

Σχετικές αναρτήσεις: Επιτυχημένη σταδιοδρομία ανάπτυξης Ιστού με AngularJS