AngularJS ng-visning med eksempel

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

Visninger i AngularJS lar én side bytte innhold i stedet for å navigere bort, noe som gjør at en applikasjon med én side føles umiddelbar. ng-view-direktivet markerer regionen som hver rute erstatter med sin egen mal og kontroller.

  • 🪟 Enkel plassholder: Ett element som bærer ng-view-merker der hver rutede mal injiseres, og bare ett slikt element er tillatt per side.
  • 🔗 Ruteparing: Hver rute navngir en templateUrl og en kontroller, som binder markup og logikk sammen for den visningen.
  • 📦 Modulavhengighet: Visninger krever angular-route.js pluss en deklarert avhengighet av ngRoute-modulen.
  • 🎯 Standardvisning: Klausulen *otherson* omdirigerer enhver ikke-samsvarende adresse, som er det som gjengir en visning ved første innlasting.
  • 🌐 Server nødvendig: Maler hentes via HTTP, så siden må serveres i stedet for å åpnes fra filsystemet.
  • ⚠️ Støttestatus: AngularJS nådde slutten av sin levetid 31. desember 2021 og mottar ingen ytterligere sikkerhetsoppdateringer.
Les mer

AngularJS ng-view-direktiv

Kjente nettsteder som f.eks. Gmail bruk konseptet med enkeltsideapplikasjoner. Når en bruker ber om en annen side, navigerer ikke applikasjonen bort; den viser visningen av den nye siden inne i den eksisterende siden, slik at det føles som om brukeren aldri har forlatt den. Det samme oppnås i AngularJS ved å bruke visninger sammen med ruter.

⚠️ Støttemelding: AngularJS nådde levetidens slutt 31. desember 2021 og mottar ingen ytterligere oppdateringer eller sikkerhetsrettelser. Direktivet nedenfor forblir nøyaktig for vedlikehold av eksisterende AngularJS 1.x-applikasjoner; i moderne Vinkel ekvivalenten er <router-outlet>.

Hva er en visning?

En visning er innholdet som vises til brukeren. Uansett hva brukeren ønsker å se, vises den samsvarende visningen av applikasjonen.

Å kombinere visninger og ruter deler en applikasjon inn i logiske visninger og binder hver av dem til en controller, noe som gjør applikasjonen mer håndterbar.

La oss anta et bestillingsprogram der en kunde kan se bestillinger og legge inn nye. Diagrammet nedenfor viser hvordan det blir et enkeltsides program.

Hva er en visning

I stedet for to separate nettsider, én for «Vis bestillinger» og én for «Nye bestillinger», AngularJS bruker to visninger på samme side, nådd via to referanselenker, #show og #new:

  • Navigerer til MyApp/#show viser visningen Vis bestillinger uten å forlate siden. Bare den delen av den eksisterende siden oppdateres.
  • Navigerer til MyApp/#new gjør det samme for visningen Nye ordrer.

Å dele en applikasjon inn i visninger på denne måten gjør den håndterbar og enkel å endre, og hver visning har en tilsvarende kontroller som inneholder forretningslogikken for den funksjonen.

ng-view-direktivet i AngularJS

Ocuco ngView Direktiver utfyller $route tjenesten ved å inkludere den gjengitte malen for gjeldende rute i hovedlayoutfilen, vanligvis index.html.

Hver gang den gjeldende ruten endres, endres den inkluderte visningen med den i henhold til $route konfigurasjon, uten at selve siden lastes inn på nytt. ruter dekkes separat; her er fokuset å legge til flere visninger.

Flytskjemaet nedenfor viser hele prosessen, som eksemplet deretter går gjennom trinn for trinn.

ng-view-direktivet i AngularJS

Hvordan implementere ng-view i AngularJS

Dette eksemplet presenterer to alternativer for brukeren: vise en hendelse og legge til en hendelse. Ved å klikke Legg til en hendelse viser Legg til hendelse-visningen, og det samme gjelder for Vis hendelse.

Trinn 1) Inkluder angular-route-filen som en skriptreferanse. Denne filen er nødvendig for å bruke flere ruter og visninger, og er tilgjengelig fra AngularJS-nettstedet.

Inkluder angular-route-filen

Trinn 2) Legg til href-taggene og div-taggen.

  1. Legg til href-tagger som lenker til «Legg til ny hendelse» og «Vis hendelse».
  2. Legg til en div som bærer ng-view direktiv for å markere visningsområdet. Den samsvarende visningen injiseres der hver gang en av lenkene klikkes.

Legg til href-tagger og div-tagger

Trinn 3) Legg til rutingskonfigurasjonen i AngularJS-skripttaggen.

  1. Når brukeren klikker på Ny hendelse lenke, AngularJS laster add_event.html, injiserer markupen sin i visningen og bruker AddEventController for forretningslogikken.
  2. Når brukeren klikker på Visningshendelse lenke, den laster show_event.html og bruker ShowDisplayController.
  3. Ocuco otherwise klausulen angir standardvisningen som vises til brukeren, som her er DisplayEvent.

Rutingskonfigurasjon

Trinn 4) Legg til kontrollere for å behandle forretningslogikken for begge funksjonene. Hver av dem setter ganske enkelt en melding på sitt omfangsobjekt, som vises når den samsvarende visningen vises.

Legg til kontrollere

<!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 opprinnelige oppføringen. Først leses lenkene #!NewEvent uten skråstrek mens rutene er deklarert som /NewEvent, så ingenting samsvarte. Fra AngularJS 1.6 er standard hash-prefiks !, som gjør den riktige adressen #!/NewEvent — en skråstrek etter utropstegnet. For det andre, ShowDisplayController Sett meldingen til «Dette viser en hendelse», og utgå av ordet til som den omkringliggende teksten siterer. For det tredje, lib/bootstrap.js ble lastet inn fra en relativ sti som ikke løses noe sted og aldri brukes, så den har blitt fjernet.

RELATERTE ARTIKLER

Trinn 5) Lag sidene add_event.html og show_event.htmlHver inneholder en header og et uttrykk som viser meldingen som injiseres av kontrolleren.

  • 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 kjøres uten problemer, vises følgende utdata i nettleseren.

Utgang:

ng-view-utdata

ng-view-utdata

Vanlige ng-view-feil og hvordan du fikser dem

Nesten alle ng-view-feil kommer fra modulens kabling, adresseformatet eller måten siden blir servert på, snarere enn fra selve direktivet.

  • Visningsområdet forblir tomt: de ngRoute modulen ble ikke oppført som en avhengighet, eller angular-route.js ble ikke lastet inn. Begge er obligatoriske, og skriptet må komme etter angular.min.js.
  • Lenker endrer adressen, men ingenting gjengis: href-en samsvarer ikke med ruten. Fra AngularJS 1.6 trenger adressen #!/Route; eldre kode skrevet for 1.5 brukt #/Route.
  • Maler lastes ikke inn med en CORS-feil: siden ble åpnet direkte fra disken. Server den over HTTP, fordi templateUrl hentes av en AJAX-forespørsel filprotokollblokkene.
  • Bare den siste visningen vises: Mer enn ett element bærer ng-view. AngularJS bruker ett enkelt visningsområde per side.
  • Ingenting vises ved første opplading: Nei. otherwise klausulen er konfigurert, slik at en tom adresse ikke samsvarer med noen rute.

Spørsmål og svar

Nei. ngRoute støtter ett enkelt visningsområde per side. For flere navngitte områder samtidig, bruk ui-router-biblioteket, som tilbyr ui-view og støtter nestede og sidestilte visninger.

Aktiver HTML5-modus med $locationProvider.html5Mode(true) og legg til en basiskode. Serveren må deretter omskrive ukjente stier til index.html, ellers returnerer en oppdatering en 404.

I stor grad. AI Verktøy konverterer rutetabeller til Angular Routes-arrayer og bytter ng-view med router-outlet. Kontrollere må fortsatt skrives om som komponenter manuelt.

AI-assistenter sjekker de tre vanlige mistenkte raskt: en manglende ngRoute-avhengighet, et hash-prefiks som ikke samsvarer med ruten, og en malbane som nettleseren ikke kan hente.

Ja. Legg til en resolve blokk til ruten. AngularJS venter på at disse løftene skal innfris før kontrolleren instansieres, noe som unngår at visningen blinker tom mens data ankommer.

Oppsummer dette innlegget med: