AngularJS ng-vy med exempel

⚡ 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.

🪟 Enskild platshållare: Ett element som bär ng-view-markeringar där varje routad mall injiceras, och endast ett sådant element är tillåtet per sida.
🔗 Ruttparning: Varje rutt namnger en templateUrl och en kontroller, som binder samman markup och logik för den vyn.
📦 Modulberoende: Vyer kräver angular-route.js plus ett deklarerat beroende av ngRoute-modulen.
🎯 Standardläget: Klausulen "othersonly" omdirigerar alla omatchade adresser, vilket är det som genererar en vy vid första inläsningen.
🌐 Server behövs: Mallar hämtas via HTTP, så sidan måste serveras snarare än öppnas från filsystemet.
⚠️ Supportstatus: AngularJS nådde slutet av sin livscykel den 31 december 2021 och får inga ytterligare säkerhetsuppdateringar.

Läs mer

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/#show visar vyn Visa ordrar utan att lämna sidan. Endast den delen av den befintliga sidan uppdateras.
Navigera till MyApp/#new gö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-view direktiv 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änder AddEventController för affärslogiken.
När användaren klickar på Visa händelse länk, den laddas show_event.html och användningar ShowDisplayController.
Ocuco-landskapet otherwise klausulen 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 ngRoute modulen listades inte som ett beroende, eller angular-route.js laddades inte. Båda är obligatoriska, och skriptet måste komma efter angular.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 templateUrl hä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 otherwise klausulen är konfigurerad, så en tom adress matchar ingen rutt.

Vanliga frågor

Nej. ngRoute stöder en enda vyregion per sida. För flera namngivna regioner samtidigt, använd ui-router-biblioteket, som tillhandahåller ui-view och stöder kapslade och syskonvyer.

Aktivera HTML5-läge med $locationProvider.html5Mode(true) och lägg till en bastagg. Servern måste sedan skriva om okända sökvägar till index.html, annars returnerar en uppdatering ett 404-fel.

Till stor del. AI Verktygen konverterar routtabeller till Angular Routes-arrayer och byter ng-view mot router-outlet. Kontroller måste fortfarande skrivas om som komponenter för hand.

AI-assistenter kontrollerar snabbt de tre vanliga misstänkta: ett saknat ngRoute-beroende, ett hash-prefix som inte matchar rutten och en mallsökväg som webbläsaren inte kan hämta.

Ja. Lägg till en resolve block till rutten. AngularJS väntar på att dessa löften ska regleras innan kontrollenheten instansieras, vilket undviker att en vy blinkar tom medan data anländer.