Σήμερα, όλοι θα είχαν ακούσει για τις "Εφαρμογές μίας σελίδας". Πολλοί από τους γνωστούς ιστότοπους όπως το Gmail χρησιμοποιούν την έννοια της Ενιαίας Σελίδας Εφαρμογών (SPA's).
Τα SPA είναι η έννοια όπου όταν ένας χρήστης ζητά διαφορετική σελίδα, η εφαρμογή δεν θα μεταβεί σε αυτήν τη σελίδα αλλά θα εμφανίσει την προβολή της νέας σελίδας μέσα στην ίδια την υπάρχουσα σελίδα.
Δίνει την αίσθηση στον χρήστη ότι δεν άφησε ποτέ τη σελίδα στην πρώτη θέση. Το ίδιο μπορεί να επιτευχθεί και στο Angular με τη βοήθεια του Views σε συνδυασμό με τις Διαδρομές.
Σε αυτό το σεμινάριο, θα μάθετε-
- Τι είναι η προβολή;
- Οδηγία ng-view στο AngularJS
- Παράδειγμα ng-view
Τι είναι η προβολή;
Μια προβολή είναι το περιεχόμενο που εμφανίζεται στον χρήστη. Βασικά αυτό που ο χρήστης θέλει να δει, κατά συνέπεια αυτή η προβολή της εφαρμογής θα εμφανίζεται στον χρήστη.
Ο συνδυασμός προβολών και διαδρομών βοηθάει κάποιον να διαιρέσει μια εφαρμογή σε λογικές προβολές και να συνδέσει διαφορετικές προβολές με τους ελεγκτές.
Ο διαχωρισμός της εφαρμογής σε διαφορετικές προβολές και η χρήση της δρομολόγησης για τη φόρτωση διαφορετικού μέρους της εφαρμογής βοηθούν στη λογική διαίρεση της εφαρμογής και καθιστώντας την πιο διαχειρίσιμη.
Ας υποθέσουμε ότι έχουμε μια εφαρμογή παραγγελίας, όπου ένας πελάτης μπορεί να δει παραγγελίες και να κάνει νέες.
Το παρακάτω διάγραμμα και η επόμενη εξήγηση δείχνουν πώς να κάνετε αυτήν την εφαρμογή ως εφαρμογή μίας σελίδας.
Τώρα, αντί να έχετε δύο διαφορετικές ιστοσελίδες, μία για "Προβολή παραγγελιών" και μια άλλη για "Νέες παραγγελίες", στο AngularJS, αντί να δημιουργήσετε δύο διαφορετικές προβολές με την ονομασία "Προβολή παραγγελιών" και "Νέες παραγγελίες" στην ίδια σελίδα.
Θα έχουμε επίσης 2 συνδέσμους αναφοράς στην εφαρμογή μας που ονομάζονται #show και #new.
- Έτσι, όταν η εφαρμογή πηγαίνει στο MyApp / # show, θα εμφανίζει την προβολή των παραγγελιών προβολής, ταυτόχρονα δεν θα αφήσει τη σελίδα. Θα ανανεώσει απλώς την ενότητα της υπάρχουσας σελίδας με τις πληροφορίες της "Προβολή παραγγελιών". Το ίδιο ισχύει και για την προβολή "Νέες παραγγελίες".
Με αυτόν τον τρόπο, γίνεται απλούστερο να διαχωρίζετε την εφαρμογή σε διαφορετικές προβολές, ώστε να είναι πιο διαχειρίσιμη και εύκολη η πραγματοποίηση αλλαγών όποτε απαιτείται.
Και κάθε προβολή θα έχει έναν αντίστοιχο ελεγκτή για τον έλεγχο της επιχειρησιακής λογικής για αυτήν τη λειτουργικότητα.
Οδηγία ng-view στο AngularJS
Το "ngView" είναι μια οδηγία που συμπληρώνει την υπηρεσία δρομολόγησης $ συμπεριλαμβάνοντας το πρότυπο απόδοσης της τρέχουσας διαδρομής στο κύριο αρχείο διάταξης (index.html).
Κάθε φορά που αλλάζει η τρέχουσα διαδρομή, η προβολή περιλαμβάνει αλλαγές σε αυτήν σύμφωνα με τη διαμόρφωση της υπηρεσίας δρομολόγησης $ χωρίς να αλλάζει η ίδια η σελίδα.
Θα καλύψουμε διαδρομές σε ένα επόμενο κεφάλαιο, προς το παρόν, θα επικεντρωθούμε στην προσθήκη πολλαπλών προβολών στην εφαρμογή μας.
Παρακάτω είναι ολόκληρο το διάγραμμα ροής του τρόπου λειτουργίας ολόκληρης της διαδικασίας. Θα εξετάσουμε λεπτομερώς για κάθε διαδικασία στο παράδειγμά μας που φαίνεται παρακάτω.
Παράδειγμα ng-view
Ας ρίξουμε μια ματιά σε ένα παράδειγμα του πώς μπορούμε να εφαρμόσουμε τις προβολές.
Στο παράδειγμά μας, θα παρουσιάσουμε δύο επιλογές στον χρήστη,
- Το ένα είναι να εμφανίσει ένα "Συμβάν" και το άλλο να προσθέσει ένα "Συμβάν".
- Όταν ο χρήστης κάνει κλικ στο σύνδεσμο Προσθήκη συμβάντος, θα εμφανιστεί η προβολή για "Προσθήκη συμβάντος" και το ίδιο ισχύει για το "Εμφάνιση συμβάντος".
Ακολουθήστε τα παρακάτω βήματα για να εφαρμόσετε αυτό το παράδειγμα.
Βήμα 1) Συμπεριλάβετε το αρχείο γωνιακής διαδρομής ως αναφορά σεναρίου.
Αυτό το αρχείο διαδρομής είναι απαραίτητο προκειμένου να χρησιμοποιηθούν οι λειτουργίες της ύπαρξης πολλαπλών διαδρομών και προβολών. Μπορείτε να κατεβάσετε αυτό το αρχείο από τον ιστότοπο angularJS.
Βήμα 2) Σε αυτό το βήμα,
- Προσθέστε ετικέτες href που θα αντιπροσωπεύουν συνδέσμους για "Προσθήκη νέου συμβάντος" και "Εμφάνιση συμβάντος".
- Επίσης, προσθέστε μια ετικέτα div με την οδηγία ng-view που θα αντιπροσωπεύει την προβολή.
Αυτό θα επιτρέψει την ένεση της αντίστοιχης προβολής κάθε φορά που ο χρήστης κάνει κλικ στον σύνδεσμο "Προσθήκη νέου συμβάντος" ή στον σύνδεσμο "Εμφάνιση συμβάντος".
Βήμα 3) Στην ετικέτα σεναρίου σας για Angular JS, προσθέστε τον ακόλουθο κώδικα.
Ας μην ανησυχούμε για τη δρομολόγηση, για τώρα, θα το δούμε σε επόμενο κεφάλαιο. Ας δούμε τώρα τον κώδικα για τις προβολές.
- Αυτή η ενότητα του κώδικα σημαίνει ότι όταν ο χρήστης κάνει κλικ στην ετικέτα href "NewEvent" που είχε οριστεί στην ετικέτα div νωρίτερα. Θα μεταβεί στην ιστοσελίδα add_event.html και θα πάρει τον κώδικα από εκεί και θα τον εισάγει στην προβολή. Δεύτερον, για την επεξεργασία της επιχειρηματικής λογικής για αυτήν την προβολή, μεταβείτε στο "AddEventController".
- Αυτή η ενότητα του κώδικα σημαίνει ότι όταν ο χρήστης κάνει κλικ στην ετικέτα href "DisplayEvent" που είχε οριστεί στην ετικέτα div νωρίτερα. Θα μεταβεί στην ιστοσελίδα show_event.html, θα πάρει τον κωδικό από εκεί και θα τον εισάγει στην προβολή. Δεύτερον, για την επεξεργασία της επιχειρηματικής λογικής για αυτήν την προβολή, μεταβείτε στο "ShowDisplayController".
- Αυτή η ενότητα κώδικα σημαίνει ότι η προεπιλεγμένη προβολή που εμφανίζεται στον χρήστη είναι η προβολή DisplayEvent
Βήμα 4) Επόμενο είναι να προσθέσετε ελεγκτές για να επεξεργαστείτε την επιχειρησιακή λογική τόσο για τη λειτουργία "DisplayEvent" όσο και για την "Προσθήκη νέου συμβάντος".
Απλά προσθέτουμε απλώς μια μεταβλητή μηνύματος σε κάθε αντικείμενο πεδίου για κάθε ελεγκτή. Αυτό το μήνυμα θα εμφανιστεί όταν εμφανίζεται η κατάλληλη προβολή στον χρήστη.
Event Registration Guru99 Global Event
Βήμα 5) Δημιουργήστε σελίδες που ονομάζονται add_event.html και show_event.html. Διατηρήστε τις σελίδες απλές όπως φαίνεται παρακάτω.
Στην περίπτωσή μας, η σελίδα add_event.html θα έχει μια ετικέτα κεφαλίδας μαζί με το κείμενο "Προσθήκη νέου συμβάντος" και θα έχει μια έκφραση για την εμφάνιση του μηνύματος "Αυτό είναι να προσθέσετε ένα νέο συμβάν".
Ομοίως, η σελίδα show_event.html θα έχει επίσης μια ετικέτα κεφαλίδας για τη διατήρηση του κειμένου "Εμφάνιση συμβάντος" και θα έχει επίσης μια έκφραση μηνύματος για την εμφάνιση του μηνύματος "Αυτό είναι για εμφάνιση ενός συμβάντος."
Η τιμή της μεταβλητής μηνύματος θα εγχυθεί με βάση τον ελεγκτή που είναι προσαρτημένος στην προβολή.
Για κάθε σελίδα, θα προσθέσουμε τη μεταβλητή μηνύματος, η οποία θα εισαχθεί από κάθε αντίστοιχο χειριστήριο.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο, μπορούμε να παρατηρήσουμε 2 πράγματα
- Η γραμμή διευθύνσεων θα αντικατοπτρίζει ποια είναι η τρέχουσα προβολή που εμφανίζεται. Έτσι, δεδομένου ότι η προεπιλεγμένη προβολή είναι η εμφάνιση της οθόνης Εμφάνιση συμβάντων, η γραμμή διευθύνσεων εμφανίζει τη διεύθυνση για το "DisplayEvent"
- Αυτή η ενότητα είναι η Προβολή, η οποία δημιουργείται εν κινήσει. Δεδομένου ότι η προεπιλεγμένη προβολή είναι το Show Event one, αυτό εμφανίζεται στο χρήστη.
Τώρα κάντε κλικ στο σύνδεσμο Προσθήκη νέου συμβάντος στη σελίδα που εμφανίζεται. Τώρα θα λάβετε την παρακάτω έξοδο.
Παραγωγή:
- Η γραμμή διευθύνσεων θα αντικατοπτρίζει τώρα ότι η τρέχουσα προβολή είναι πλέον η προβολή "Προσθήκη νέου συμβάντος". Σημειώστε ότι θα εξακολουθείτε να βρίσκεστε στην ίδια σελίδα εφαρμογής. Δεν θα οδηγηθείτε σε μια νέα σελίδα εφαρμογής.
- Αυτή η ενότητα είναι η Προβολή και τώρα θα αλλάξει για να εμφανίσει το HTML για τη λειτουργία "Προσθήκη νέου συμβάντος". Τώρα λοιπόν σε αυτήν την ενότητα εμφανίζεται η ετικέτα κεφαλίδας "Προσθήκη νέου συμβάντος" και το κείμενο "Πρόκειται για προσθήκη νέου συμβάντος" στον χρήστη.