AngularJS ng-view cu Exemplu
James Hartman
⚡ Rezumat inteligent
Vizualizările din AngularJS permit unei pagini să își schimbe conținutul în loc să se navigheze în altă parte, ceea ce face ca o aplicație cu o singură pagină să pară instantanee. Directiva ng-view marchează regiunea pe care fiecare rută o înlocuiește cu propriul șablon și controler.
Site-uri cunoscute, cum ar fi Gmail utilizați conceptul de aplicații cu o singură pagină. Când un utilizator solicită o pagină diferită, aplicația nu o părăsește; aceasta afișează vizualizarea noii pagini în interiorul paginii existente, astfel încât să pară că utilizatorul nu a părăsit-o niciodată. Același lucru se realizează în AngularJS folosind vizualizări împreună cu rute.
⚠️ Notificare de asistență: AngularJS a atins sfârșitul duratei de viață la 31 decembrie 2021 și nu primește alte corecții sau corecții de securitate. Directiva de mai jos rămâne corectă pentru menținerea aplicațiilor AngularJS 1.x existente; în versiunile moderne Unghiular echivalentul este <router-outlet>.
Ce este o vedere?
O vizualizare este conținutul afișat utilizatorului. Indiferent ce dorește utilizatorul să vadă, este afișată vizualizarea corespunzătoare a aplicației.
Combinarea vizualizărilor și rutelor împarte o aplicație în vizualizări logice și le leagă pe fiecare la un controlor, ceea ce face aplicația mai ușor de gestionat.
Să presupunem o aplicație de plasare comenzi în care un client poate vizualiza comenzi și plasa altele noi. Diagrama de mai jos arată cum devine o aplicație cu o singură pagină.
În loc de două pagini web separate, una pentru „Vizualizare comenzi” și una pentru „Comenzi noi”, AngularJS folosește două vizualizări pe aceeași pagină, accesibile prin două linkuri de referință, #show și #new:
- Navigând la
MyApp/#showafișează vizualizarea Vizualizare comenzi fără a părăsi pagina. Se actualizează doar acea secțiune a paginii existente. - Navigând la
MyApp/#newface același lucru și pentru vizualizarea Comenzi noi.
Separarea unei aplicații în vizualizări în acest fel o face ușor de gestionat și de modificat, iar fiecare vizualizare are un controller corespunzător care deține logica de business pentru funcția respectivă.
Directiva ng-view în AngularJS
ngView directivă completează $route serviciu prin includerea șablonului randat al rutei curente în fișierul principal de aspect, în mod normal index.html.
De fiecare dată când ruta curentă se schimbă, vizualizarea inclusă se schimbă odată cu aceasta, în funcție de $route configurare, fără ca pagina în sine să se reîncarce. rute sunt acoperite separat; aici accentul se pune pe adăugarea mai multor vizualizări.
Schema de flux de mai jos prezintă întregul proces, pe care exemplul îl parcurge apoi pas cu pas.
Cum se implementează ng-view în AngularJS
Acest exemplu prezintă utilizatorului două opțiuni: afișarea unui eveniment și adăugarea unui eveniment. Dacă faceți clic pe Adăugați un eveniment afișează vizualizarea Adăugare eveniment și același lucru este valabil și pentru Afișare eveniment.
Pas 1) Includeți fișierul angular-route ca referință de script. Acest fișier este necesar pentru a utiliza mai multe rute și vizualizări și este disponibil pe site-ul AngularJS.
Pas 2) Adăugați etichetele href și eticheta div.
- Adăugați etichete href care să facă trimitere la „Adăugați eveniment nou” și „Afișați evenimentul”.
- Adăugați un div care conține
ng-viewdirectivă pentru a marca regiunea de vizualizare. Vizualizarea corespunzătoare este injectată acolo de fiecare dată când se face clic pe oricare dintre linkuri.
Pas 3) În eticheta scriptului AngularJS, adăugați configurația de rutare.
- Când utilizatorul face clic pe Eveniment nou legătură, încărcări AngularJS
add_event.html, injectează markup-ul său în vizualizare și foloseșteAddEventControllerpentru logica afacerii. - Când utilizatorul face clic pe Eveniment de afișare legătură, se încarcă
show_event.htmlși utilizăriShowDisplayController. -
otherwiseClauza setează vizualizarea implicită afișată utilizatorului, care aici este DisplayEvent.
Pas 4) Adăugați controlere pentru a procesa logica de business pentru ambele funcții. Fiecare setează pur și simplu un mesaj pe obiectul său de domeniu, afișat atunci când este afișată vizualizarea corespunzătoare.
<!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>
⚠️ Trei corecții la listarea originală. În primul rând, linkurile citesc #!NewEvent fără o bară oblică în timp ce rutele sunt declarate ca /NewEvent, deci nimic nu se potrivește. Din AngularJS 1.6, prefixul hash implicit este !, ceea ce reprezintă adresa corectă #!/NewEvent — o bară oblică după semnul exclamării. În al doilea rând, ShowDisplayController setați mesajul la „Acesta este afișarea unui eveniment”, omițând cuvântul la pe care textul înconjurător îl citează. În al treilea rând, lib/bootstrap.js a fost încărcat dintr-o cale relativă care nu se rezolvă nicăieri și nu este niciodată utilizat, așa că a fost eliminat.
Pas 5) Creați paginile add_event.html și show_event.htmlFiecare conține un antet și o expresie care afișează mesajul injectat de controlerul său.
- add_event.html
<h2>Add New Event</h2> {{message}}
- show_event.html
<h2>Show Event</h2> {{message}}
Dacă codul este executat cu succes, următorul rezultat este afișat în browser.
ieșire:
Erori frecvente în ng-view și cum să le remediați
Aproape fiecare eroare ng-view provine din cablarea modulului, formatul adresei sau modul în care este servită pagina, mai degrabă decât din directiva în sine.
- Regiunea de vizualizare rămâne goală: il
ngRoutemodulul nu a fost listat ca dependență sauangular-route.jsnu a fost încărcat. Ambele sunt obligatorii, iar scriptul trebuie să apară dupăangular.min.js. - Linkurile schimbă adresa, dar nu se afișează nimic: href nu se potrivește cu ruta. Din AngularJS 1.6 adresa trebuie
#!/Route; cod mai vechi scris pentru versiunea 1.5 folosit#/Route. - Șabloanele nu se încarcă cu o eroare CORS: pagina a fost deschisă direct de pe disc. Serviți-o prin HTTP, deoarece
templateUrleste preluat de o cerere AJAX, blocurile de protocol ale fișierului. - Apare doar ultima vizualizare: mai mult de un element poartă ng-view. AngularJS onorează o singură regiune de vizualizare per pagină.
- Nu se afișează nimic la prima încărcare: Nu.
otherwiseclauza este configurată, astfel încât o adresă goală nu se potrivește cu nicio rută.
