AngularJS ng-view med Eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

Views i AngularJS lader én side udskifte sit indhold i stedet for at navigere væk, hvilket er det, der får en applikation med én side til at føles øjeblikkelig. ng-view-direktivet markerer den region, som hver rute erstatter, med sin egen skabelon og controller.

  • 🪟 Enkelt pladsholder: Et element med ng-view-mærker, hvor alle rutede skabeloner injiceres, og kun ét sådant element er tilladt pr. side.
  • 🔗 Ruteparring: Hver rute navngiver en templateUrl og en controller, der binder markup og logik sammen for den pågældende visning.
  • 📦 Modulafhængighed: Visninger kræver angular-route.js plus en deklareret afhængighed af ngRoute-modulet.
  • 🎯 Standardvisning: "Otherwise"-klausulen omdirigerer enhver uoverensstemmende adresse, hvilket er det, der gengiver en visning ved første indlæsning.
  • 🌐 Server nødvendig: Skabeloner hentes via HTTP, så siden skal serveres i stedet for at åbnes fra filsystemet.
  • ⚠️ Supportstatus: AngularJS nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser.
Læs mere

AngularJS ng-view-direktiv

Kendte steder som f.eks. Gmail Brug konceptet med Single Page Applications. Når en bruger anmoder om en anden side, navigerer applikationen ikke væk; den viser visningen af ​​den nye side inde i den eksisterende side, så det føles som om brugeren aldrig har forladt den. Det samme opnås i AngularJS ved hjælp af views sammen med routes.

⚠️ Supportmeddelelse: AngularJS nået levetidens afslutning den 31. december 2021 og modtager ingen yderligere programrettelser eller sikkerhedsrettelser. Direktivet nedenfor forbliver korrekt til vedligeholdelse af eksisterende AngularJS 1.x-applikationer; i moderne Vinkelforskydning det tilsvarende er <router-outlet>.

Hvad er en visning?

En visning er det indhold, der vises til brugeren. Uanset hvad brugeren ønsker at se, vises den matchende visning af applikationen.

Kombination af visninger og ruter opdeler en applikation i logiske visninger og binder hver af dem til en controller, hvilket gør applikationen mere overskuelig.

Forestil dig en bestillingsapplikation, hvor en kunde kan se ordrer og afgive nye. Diagrammet nedenfor viser, hvordan det bliver en enkeltsidet applikation.

Hvad er en udsigt

I stedet for to separate websider, én til "Se ordrer" og én til "Nye ordrer", AngularJS bruger to visninger på samme side, der nås via to referencelinks, #show og #new:

  • Navigerer til MyApp/#show viser visningen Vis ordrer uden at forlade siden. Kun den del af den eksisterende side opdateres.
  • Navigerer til MyApp/#new gør det samme for visningen Nye ordrer.

Ved at opdele en applikation i visninger på denne måde bliver den overskuelig og nem at ændre, og hver visning har en tilsvarende controller, der indeholder forretningslogikken for den pågældende funktion.

ng-view direktiv i AngularJS

ngView Direktiv supplerer $route tjenesten ved at inkludere den gengivne skabelon for den aktuelle rute i hovedlayoutfilen, normalt index.html.

Hver gang den aktuelle rute ændres, ændres den inkluderede visning med den i henhold til $route konfiguration, uden at selve siden genindlæses. Ruter dækkes separat; her er fokus på at tilføje flere visninger.

Flowchartet nedenfor viser hele processen, som eksemplet derefter gennemgår trin for trin.

ng-view direktiv i AngularJS

Sådan implementeres ng-view i AngularJS

Dette eksempel præsenterer brugeren for to muligheder: visning af en begivenhed og tilføj en begivenhed. Ved at klikke på Tilføj en begivenhed viser visningen Tilføj begivenhed, og det samme gælder for Vis begivenhed.

Trin 1) Inkluder angular-route-filen som en scriptreference. Denne fil er nødvendig for at bruge flere ruter og visninger, og er tilgængelig fra AngularJS-webstedet.

Inkluder angular-route-filen

Trin 2) Tilføj href-taggene og div-tagget.

  1. Tilføj href-tags, der linker til "Tilføj ny begivenhed" og "Vis begivenhed".
  2. Tilføj en div, der bærer ng-view direktiv til at markere visningsområdet. Den matchende visning indsættes der, hver gang der klikkes på et af linkene.

Tilføj href-tags og div-tag

Trin 3) Tilføj routingkonfigurationen i AngularJS-scripttagget.

  1. Når brugeren klikker på Ny begivenhed link, AngularJS indlæses add_event.html, indsætter sin markup i visningen og bruger AddEventController for forretningslogikken.
  2. Når brugeren klikker på Visningshændelse link, det indlæses show_event.html og anvendelser ShowDisplayController.
  3. otherwise Klausulen angiver standardvisningen, der vises for brugeren, hvilket her er DisplayEvent.

Routingkonfiguration

Trin 4) Tilføj controllere til at behandle forretningslogikken for begge funktioner. Hver funktion angiver blot en besked på sit scope-objekt, der vises, når den matchende visning vises.

Tilføj controllere

<!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 rettelser til den oprindelige annonce. Først læses linkene #!NewEvent uden skråstreg, mens ruterne er angivet som /NewEvent, så intet matchede. Fra AngularJS 1.6 er standard hash-præfikset !, hvilket gør den korrekte adresse #!/NewEvent — en skråstreg efter udråbstegnet. For det andet, ShowDisplayController Sæt beskeden til "Dette viser en begivenhed", og udelad ordet til som den omgivende tekst citerer. For det tredje, lib/bootstrap.js blev indlæst fra en relativ sti, der ikke findes nogen steder og aldrig bruges, så den er blevet fjernet.

RELATEREDE ARTIKLER

Trin 5) Opret siderne add_event.html og show_event.htmlHver indeholder en header og et udtryk, der viser den besked, der injiceres af dens controller.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Hvis koden udføres korrekt, vises følgende output i browseren.

Output:

ng-view-output

ng-view-output

Almindelige ng-view-fejl og hvordan man retter dem

Næsten alle ng-view-fejl stammer fra modulets ledningsføring, adresseformatet eller den måde, siden vises på, snarere end fra selve direktivet.

  • Visningsområdet forbliver tomt: og ngRoute modulet blev ikke angivet som en afhængighed, eller angular-route.js blev ikke indlæst. Begge er påkrævede, og scriptet skal komme efter angular.min.js.
  • Links ændrer adressen, men intet gengives: href'en matcher ikke ruten. Fra AngularJS 1.6 skal adressen #!/Route; ældre kode skrevet til 1.5 brugt #/Route.
  • Skabeloner kan ikke indlæses med en CORS-fejl: Siden blev åbnet direkte fra disken. Vis den via HTTP, fordi templateUrl hentes af en AJAX-anmodning filprotokolblokkene.
  • Kun den sidste visning vises nogensinde: mere end ét element bærer ng-view. AngularJS bruger et enkelt visningsområde pr. side.
  • Intet vises ved første indlæsning: ingen otherwise klausulen er konfigureret, så en tom adresse matcher ingen rute.

Ofte Stillede Spørgsmål

Nej. ngRoute understøtter et enkelt visningsområde pr. side. For flere navngivne områder på én gang skal du bruge ui-router-biblioteket, som leverer ui-view og understøtter indbyggede og sidestillede visninger.

Aktivér HTML5-tilstand med $locationProvider.html5Mode(true) og tilføj et basistag. Serveren skal derefter omskrive ukendte stier til index.html, ellers returnerer en opdatering en 404.

Stort set. AI Værktøjer konverterer rutetabeller til Angular Routes-arrays og bytter ng-view ud med router-outlet. Controllere skal stadig omskrives som komponenter i hånden.

AI-assistenter tjekker hurtigt de tre sædvanlige mistænkte: en manglende ngRoute-afhængighed, et hash-præfiks, der ikke matcher ruten, og en skabelonsti, som browseren ikke kan hente.

Ja. Tilføj en resolve blok til ruten. AngularJS venter på, at disse løfter afvikles, før controlleren instantieres, hvilket undgår, at en visning blinker tom, mens data ankommer.

Opsummer dette indlæg med: