AngularJS ng-view με Παράδειγμα
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Τα views στο AngularJS επιτρέπουν σε μία σελίδα να αλλάζει το περιεχόμενό της αντί να απομακρύνεται, κάτι που κάνει μια εφαρμογή μίας σελίδας να φαίνεται άμεση. Η οδηγία ng-view σηματοδοτεί την περιοχή που κάθε διαδρομή αντικαθιστά με το δικό της πρότυπο και ελεγκτή.
Γνωστές ιστοσελίδες όπως π.χ. Gmail χρησιμοποιήστε την έννοια των εφαρμογών μίας σελίδας. Όταν ένας χρήστης ζητά μια διαφορετική σελίδα, η εφαρμογή δεν απομακρύνεται. Εμφανίζει την προβολή της νέας σελίδας μέσα στην υπάρχουσα σελίδα, έτσι ώστε να δίνεται η αίσθηση ότι ο χρήστης δεν έφυγε ποτέ. Το ίδιο επιτυγχάνεται και στο AngularJS χρησιμοποιώντας προβολές μαζί με διαδρομές.
⚠️ Ειδοποίηση υποστήριξης: Το AngularJS έφτασε τέλος ζωής στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις κώδικα ή διορθώσεις ασφαλείας. Η παρακάτω οδηγία παραμένει ακριβής για τη διατήρηση υπαρχουσών εφαρμογών AngularJS 1.x. στις σύγχρονες Γωνιώδης το ισοδύναμο είναι <router-outlet>.
Τι είναι η Προβολή;
Μια προβολή είναι το περιεχόμενο που εμφανίζεται στον χρήστη. Ό,τι θέλει να δει ο χρήστης, εμφανίζεται η αντίστοιχη προβολή της εφαρμογής.
Ο συνδυασμός προβολών και διαδρομών διαιρεί μια εφαρμογή σε λογικές προβολές και συνδέει την καθεμία με ένα ελεγκτής, γεγονός που καθιστά την εφαρμογή πιο διαχειρίσιμη.
Ας υποθέσουμε μια εφαρμογή παραγγελιών στην οποία ένας πελάτης μπορεί να δει παραγγελίες και να υποβάλει νέες. Το παρακάτω διάγραμμα δείχνει πώς γίνεται μια εφαρμογή μίας σελίδας.
Αντί για δύο ξεχωριστές ιστοσελίδες, μία για την «Προβολή Παραγγελιών» και μία για τις «Νέες Παραγγελίες», AngularJS χρησιμοποιεί δύο προβολές στην ίδια σελίδα, στις οποίες έχει πρόσβαση μέσω δύο συνδέσμων αναφοράς, #show και #new:
- Πλοήγηση σε
MyApp/#showεμφανίζει την προβολή "Προβολή παραγγελιών" χωρίς να φύγει από τη σελίδα. Ανανεώνεται μόνο αυτό το τμήμα της υπάρχουσας σελίδας. - Πλοήγηση σε
MyApp/#newκάνει το ίδιο για την προβολή Νέες Παραγγελίες.
Ο διαχωρισμός μιας εφαρμογής σε προβολές με αυτόν τον τρόπο την καθιστά διαχειρίσιμη και εύκολη στην αλλαγή, και κάθε προβολή έχει έναν αντίστοιχο ελεγκτή που διατηρεί την επιχειρηματική λογική για αυτήν τη λειτουργία.
Οδηγία ng-view στο AngularJS
The ngView Οδηγιών συμπληρώνει το $route υπηρεσία συμπεριλαμβάνοντας το αποδιδόμενο πρότυπο της τρέχουσας διαδρομής στο κύριο αρχείο διάταξης, κανονικά index.html.
Κάθε φορά που αλλάζει η τρέχουσα διαδρομή, η συμπεριλαμβανόμενη προβολή αλλάζει μαζί της ανάλογα με $route διαμόρφωση, χωρίς να φορτώσει ξανά η ίδια η σελίδα. διαδρομές καλύπτονται ξεχωριστά. Εδώ η έμφαση δίνεται στην προσθήκη πολλαπλών προβολών.
Το παρακάτω διάγραμμα ροής δείχνει ολόκληρη τη διαδικασία, την οποία στη συνέχεια το παράδειγμα παρουσιάζει βήμα προς βήμα.
Πώς να εφαρμόσετε το ng-view στο AngularJS
Αυτό το παράδειγμα παρουσιάζει δύο επιλογές στον χρήστη: εμφάνιση ενός συμβάντος και προσθήκη ενός συμβάντος. Κάνοντας κλικ στο Προσθέστε ένα συμβάν εμφανίζει την προβολή Προσθήκη συμβάντος και το ίδιο ισχύει και για την Εμφάνιση συμβάντος.
Βήμα 1) Συμπεριλάβετε το αρχείο angular-route ως αναφορά σεναρίου. Αυτό το αρχείο απαιτείται για τη χρήση πολλαπλών διαδρομών και προβολών και είναι διαθέσιμο από τον ιστότοπο AngularJS.
Βήμα 2) Προσθέστε τις ετικέτες href και την ετικέτα div.
- Προσθέστε ετικέτες href που συνδέονται με τις επιλογές "Προσθήκη νέου συμβάντος" και "Εμφάνιση συμβάντος".
- Προσθέστε ένα div που φέρει το
ng-viewοδηγία για να επισημάνετε την περιοχή προβολής. Η αντίστοιχη προβολή εισάγεται εκεί κάθε φορά που κάνετε κλικ σε οποιονδήποτε σύνδεσμο.
Βήμα 3) Στην ετικέτα script AngularJS, προσθέστε τη διαμόρφωση δρομολόγησης.
- Όταν ο χρήστης κάνει κλικ στο Νέο συμβάν σύνδεσμος, φορτώσεις AngularJS
add_event.html, εισάγει την μορφοποίησή του στην προβολή και χρησιμοποιείAddEventControllerγια την επιχειρηματική λογική. - Όταν ο χρήστης κάνει κλικ στο Εμφάνιση συμβάντος σύνδεσμος, φορτώνει
show_event.htmlκαι χρήσειςShowDisplayController. - The
otherwiseΗ ρήτρα ορίζει την προεπιλεγμένη προβολή που εμφανίζεται στον χρήστη, η οποία εδώ είναι η DisplayEvent.
Βήμα 4) Προσθέστε ελεγκτές για να επεξεργαστείτε την επιχειρηματική λογική και για τις δύο συναρτήσεις. Κάθε ένας απλώς ορίζει ένα μήνυμα στο αντικείμενο εμβέλειάς του, το οποίο εμφανίζεται όταν εμφανίζεται η αντίστοιχη προβολή.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script> </head> <body ng-app="sampleApp"> <h1>Guru99 Global Event</h1> <div class="container"> <ul> <li><a href="#!/NewEvent">Add New Event</a></li> <li><a href="#!/DisplayEvent">Display Event</a></li> </ul> <div ng-view></div> </div> <script> var app = angular.module('sampleApp', ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/NewEvent", { templateUrl: "add_event.html", controller: "AddEventController" }) .when("/DisplayEvent", { templateUrl: "show_event.html", controller: "ShowDisplayController" }) .otherwise({ redirectTo: '/DisplayEvent' }); }); app.controller("AddEventController", function($scope) { $scope.message = "This is to Add a new Event"; }); app.controller("ShowDisplayController", function($scope) { $scope.message = "This is to display an Event"; }); </script> </body> </html>
⚠️ Τρεις διορθώσεις στην αρχική καταχώριση. Αρχικά, οι σύνδεσμοι διαβάζονται #!NewEvent χωρίς κάθετο ενώ οι διαδρομές δηλώνονται ως /NewEvent, επομένως δεν βρέθηκε τίποτα που να ταιριάζει. Από το AngularJS 1.6 το προεπιλεγμένο πρόθεμα κατακερματισμού είναι !, που αποτελεί τη σωστή διεύθυνση #!/NewEvent — μια κάθετος μετά το θαυμαστικό. Δεύτερον, ShowDisplayController ορίστε το μήνυμα σε "Αυτό είναι η εμφάνιση ενός συμβάντος", λείπει η λέξη προς την που παραθέτει το περιβάλλον κείμενο. Τρίτον, lib/bootstrap.js φορτώθηκε από μια σχετική διαδρομή που δεν καταλήγει πουθενά και δεν χρησιμοποιείται ποτέ, επομένως έχει αφαιρεθεί.
Βήμα 5) Δημιουργήστε τις σελίδες add_event.html και show_event.htmlΚάθε ένα περιέχει μια κεφαλίδα και μια έκφραση που εμφανίζει το μήνυμα που εισάγεται από τον ελεγκτή του.
- add_event.html
<h2>Add New Event</h2> {{message}}
- show_event.html
<h2>Show Event</h2> {{message}}
Εάν ο κώδικας εκτελεστεί με επιτυχία, το ακόλουθο αποτέλεσμα εμφανίζεται στο πρόγραμμα περιήγησης.
Παραγωγή:
Συνηθισμένα σφάλματα ng-view και πώς να τα διορθώσετε
Σχεδόν κάθε σφάλμα ng-view προέρχεται από την καλωδίωση της μονάδας, τη μορφή διεύθυνσης ή τον τρόπο που εμφανίζεται η σελίδα και όχι από την ίδια την οδηγία.
- Η περιοχή προβολής παραμένει κενή: ο
ngRouteη ενότητα δεν αναφέρθηκε ως εξάρτηση ήangular-route.jsδεν φορτώθηκε. Και τα δύο είναι απαραίτητα και το σενάριο πρέπει να ακολουθήσειangular.min.js. - Οι σύνδεσμοι αλλάζουν τη διεύθυνση αλλά δεν εμφανίζεται τίποτα: Το href δεν ταιριάζει με τη διαδρομή. Από το AngularJS 1.6 η διεύθυνση χρειάζεται
#!/Route; χρησιμοποιήθηκε παλαιότερος κώδικας γραμμένος για την έκδοση 1.5#/Route. - Τα πρότυπα αποτυγχάνουν να φορτώσουν με σφάλμα CORS: η σελίδα ανοίχτηκε απευθείας από τον δίσκο. Προωθήστε την μέσω HTTP, επειδή
templateUrlανακτάται από ένα αίτημα AJAX το πρωτόκολλο αρχείου μπλοκάρει. - Εμφανίζεται μόνο η τελευταία προβολή: Περισσότερα από ένα στοιχεία φέρουν το ng-view. Το AngularJS τιμά μία μόνο περιοχή προβολής ανά σελίδα.
- Δεν εμφανίζεται τίποτα στην πρώτη φόρτωση: Όχι.
otherwiseΟ όρος έχει διαμορφωθεί, επομένως μια κενή διεύθυνση δεν ταιριάζει με καμία διαδρομή.
