AngularJS ng-vy med exempel
James Hartman
⚡ Smart sammanfattning
Vyer i AngularJS låter en sida byta innehåll istället för att navigera bort, vilket är det som gör att en applikation med en enda sida känns omedelbar. Direktivet ng-view markerar den region som varje rutt ersätter med sin egen mall och kontroller.
Välkända sajter som t.ex. Gmail Använd konceptet med Single Page Applications. När en användare begär en annan sida navigerar inte applikationen bort; den visar vyn av den nya sidan inuti den befintliga sidan, så det känns som om användaren aldrig lämnat den. Detsamma uppnås i AngularJS med hjälp av vyer tillsammans med rutter.
⚠️ Supportmeddelande: AngularJS nådde slut på livscykeln den 31 december 2021 och får inga ytterligare patchar eller säkerhetsfixar. Direktivet nedan förblir korrekt för underhåll av befintliga AngularJS 1.x-applikationer; i moderna Vinkel motsvarigheten är <router-outlet>.
Vad är en vy?
En vy är det innehåll som visas för användaren. Vad användaren än vill se, visas matchande vy för applikationen.
Att kombinera vyer och rutter delar upp en applikation i logiska vyer och binder var och en till en styrenhet, vilket gör applikationen mer hanterbar.
Anta en beställningsapplikation där en kund kan se beställningar och lägga nya. Diagrammet nedan visar hur det blir en applikation med en enda sida.
Istället för två separata webbsidor, en för "Visa beställningar" och en för "Nya beställningar", AngularJS använder två vyer på samma sida, nås via två referenslänkar, #show och #new:
- Navigera till
MyApp/#showvisar vyn Visa ordrar utan att lämna sidan. Endast den delen av den befintliga sidan uppdateras. - Navigera till
MyApp/#newgör samma sak för vyn Nya order.
Att separera en applikation i vyer på det här sättet gör den hanterbar och enkel att ändra, och varje vy har en motsvarande kontroller som innehåller affärslogiken för den funktionen.
ng-view-direktivet i AngularJS
Ocuco-landskapet ngView Direktiven kompletterar $route tjänsten genom att inkludera den renderade mallen för den aktuella rutten i huvudlayoutfilen, normalt index.html.
Varje gång den aktuella rutten ändras, ändras den inkluderade vyn med den enligt $route konfiguration, utan att själva sidan laddas om. rutter behandlas separat; här ligger fokus på att lägga till flera vyer.
Flödesschemat nedan visar hela processen, som exemplet sedan går igenom steg för steg.
Hur man implementerar ng-view i AngularJS
Det här exemplet presenterar två alternativ för användaren: visa en händelse och lägga till en händelse. Genom att klicka Lägg till en händelse visar vyn Lägg till händelse, och detsamma gäller för Visa händelse.
Steg 1) Inkludera angular-route-filen som en skriptreferens. Den här filen krävs för att använda flera rutter och vyer och är tillgänglig från AngularJS-webbplatsen.
Steg 2) Lägg till href-taggarna och div-taggen.
- Lägg till href-taggar som länkar till ”Lägg till ny händelse” och ”Visa händelse”.
- Lägg till en div som bär
ng-viewdirektiv för att markera vyområdet. Matchande vy infogas där varje gång någon av länkarna klickas.
Steg 3) I AngularJS-skripttaggen lägger du till routingkonfigurationen.
- När användaren klickar på Nyhändelse länk, AngularJS laddas
add_event.html, injicerar dess markup i vyn och använderAddEventControllerför affärslogiken. - När användaren klickar på Visa händelse länk, den laddas
show_event.htmloch användningarShowDisplayController. - Ocuco-landskapet
otherwiseklausulen anger standardvyn som visas för användaren, vilket här är DisplayEvent.
Steg 4) Lägg till styrenheter för att bearbeta affärslogiken för båda funktionerna. Var och en anger helt enkelt ett meddelande på sitt scope-objekt, som visas när matchande vy visas.
<!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>
⚠️ Tre korrigeringar av den ursprungliga listan. Först läses länkarna #!NewEvent utan snedstreck medan rutterna deklareras som /NewEvent, så inget matchade. Från AngularJS 1.6 är standardhashprefixet !, vilket gör att adressen är korrekt #!/NewEvent — ett snedstreck efter utropstecknet. För det andra, ShowDisplayController Ställ in meddelandet till "Detta visar en händelse", och ta bort ordet till som den omgivande texten citerar. För det tredje, lib/bootstrap.js laddades från en relativ sökväg som inte matchas någonstans och aldrig används, så den har tagits bort.
Steg 5) Skapa sidorna add_event.html och show_event.htmlVarje element innehåller en rubrik och ett uttryck som visar meddelandet som injiceras av dess kontrollant.
- add_event.html
<h2>Add New Event</h2> {{message}}
- show_event.html
<h2>Show Event</h2> {{message}}
Om koden körs korrekt visas följande utdata i webbläsaren.
Produktion:
Vanliga ng-view-fel och hur man åtgärdar dem
Nästan alla ng-view-fel kommer från modulens kopplingar, adressformatet eller hur sidan serveras snarare än från själva direktivet.
- Vyområdet förblir tomt: d
ngRoutemodulen listades inte som ett beroende, ellerangular-route.jsladdades inte. Båda är obligatoriska, och skriptet måste komma efterangular.min.js. - Länkar ändrar adressen men ingenting renderas: href-filen matchar inte rutten. Från AngularJS 1.6 behöver adressen
#!/Route; äldre kod skriven för 1.5 används#/Route. - Mallar kan inte läsas in med ett CORS-fel: sidan öppnades direkt från disken. Servera den via HTTP, eftersom
templateUrlhämtas av en AJAX-begäran filprotokollblocken. - Endast den sista vyn visas någonsin: Mer än ett element använder ng-view. AngularJS använder en enda vyregion per sida.
- Ingenting visas vid första laddningen: Nej
otherwiseklausulen är konfigurerad, så en tom adress matchar ingen rutt.
