AngularJS ng-view s primjerom

By: James Hartman James Hartman
Hours Aลพurirano

โšก Pametni saลพetak

Prikazi u AngularJS-u omoguฤ‡uju jednoj stranici da zamijeni svoj sadrลพaj umjesto da se odmiฤe, ลกto ฤini da se aplikacija s jednom stranicom osjeฤ‡a trenutno. Direktiva ng-view oznaฤava regiju koju svaka ruta zamjenjuje vlastitim predloลกkom i kontrolerom.

  • ๐ŸชŸ Jedno rezervirano mjesto: Jedan element koji nosi ng-view oznaฤava gdje je ubrizgan svaki usmjereni predloลพak, a po stranici je dopuลกten samo jedan takav element.
  • ๐Ÿ”— Uparivanje ruta: Svaka ruta imenuje templateUrl i kontroler, povezujuฤ‡i oznaku i logiku zajedno za taj prikaz.
  • ???? Ovisnost modula: Prikazi zahtijevaju angular-route.js plus deklariranu ovisnost o modulu ngRoute.
  • ๐ŸŽฏ Zadani prikaz: Klauzula otherwise preusmjerava svaku neusklaฤ‘enu adresu, ลกto je ono ลกto renderira prikaz pri prvom uฤitavanju.
  • ๐ŸŒ Potreban posluลพitelj: Predloลกci se dohvaฤ‡aju putem HTTP-a, tako da se stranica mora posluลพiti, a ne otvoriti iz datoteฤnog sustava.
  • โš ๏ธ Status podrลกke: AngularJS je dosegao kraj podrลกke 31. prosinca 2021. i ne prima daljnje sigurnosne zakrpe.
Proฤitaj viลกe

AngularJS ng-view direktiva

Poznate stranice kao ลกto su Gmail Koristite koncept aplikacija s jednom stranicom. Kada korisnik zatraลพi drugu stranicu, aplikacija ne napuลกta stranicu; prikazuje pogled nove stranice unutar postojeฤ‡e stranice, tako da se ฤini kao da korisnik nikada nije ni otiลกao. Isto se postiลพe u AngularJS-u koriลกtenjem pogleda zajedno s rutama.

โš ๏ธ Obavijest za podrลกku: AngularJS dosegnut kraj ลพivotnog vijeka 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke. Donja direktiva ostaje toฤna za odrลพavanje postojeฤ‡ih AngularJS 1.x aplikacija; u modernom Kutni ekvivalent je <router-outlet>.

ล to je pogled?

Prikaz je sadrลพaj koji se prikazuje korisniku. ล to god korisnik ลพeli vidjeti, prikazuje se odgovarajuฤ‡i prikaz aplikacije.

Kombiniranjem pogleda i ruta aplikacija se dijeli na logiฤke poglede i svaki se veลพe na kontrolor, ลกto aplikaciju ฤini lakลกom za upravljanje.

Pretpostavimo aplikaciju za naruฤivanje u kojoj kupac moลพe pregledavati narudลพbe i slati nove. Dijagram u nastavku prikazuje kako ona postaje aplikacija s jednom stranicom.

ล to je View

Umjesto dvije odvojene web stranice, jedne za "Pregled narudลพbi" i jedne za "Nove narudลพbe", AngularJS koristi dva prikaza na istoj stranici, do kojih se dolazi putem dvije referentne poveznice, #show i #new:

  • Navigacija do MyApp/#show prikazuje prikaz Narudลพbe bez napuลกtanja stranice. Osvjeลพava se samo taj dio postojeฤ‡e stranice.
  • Navigacija do MyApp/#new ฤini isto za prikaz Nove narudลพbe.

Razdvajanje aplikacije na prikaze na ovaj naฤin omoguฤ‡uje joj upravljanje i jednostavnu promjenu, a svaki prikaz ima odgovarajuฤ‡i kontroler koji sadrลพi poslovnu logiku za tu funkciju.

Direktiva ng-view u AngularJS

The ngView Direktiva dopunjuje $route usluga ukljuฤivanjem iscrtanog predloลกka trenutne rute u glavnu datoteku izgleda, obiฤno index.html.

Svaki put kada se trenutna ruta promijeni, ukljuฤeni prikaz se mijenja s njom u skladu s $route konfiguraciju, bez ponovnog uฤitavanja same stranice. Rute obraฤ‘uju se zasebno; ovdje je fokus na dodavanju viลกe prikaza.

Dijagram toka u nastavku prikazuje cijeli proces, koji primjer zatim korak po korak opisuje.

Direktiva ng-view u AngularJS

Kako implementirati ng-view u AngularJS

Ovaj primjer korisniku nudi dvije moguฤ‡nosti: prikaz dogaฤ‘aja i dodavanje dogaฤ‘aja. Klikom na Dodaj dogaฤ‘aj prikazuje prikaz Dodaj dogaฤ‘aj, a isto vrijedi i za Prikaz dogaฤ‘aja.

Korak 1) Ukljuฤite datoteku angular-route kao referencu skripte. Ova datoteka je potrebna za koriลกtenje viลกe ruta i prikaza i dostupna je na AngularJS stranici.

Ukljuฤite datoteku angular-route

Korak 2) Dodajte oznake href i oznaku div.

  1. Dodajte href oznake koje povezuju na "Dodaj novi dogaฤ‘aj" i "Prikaลพi dogaฤ‘aj".
  2. Dodajte div koji nosi ng-view direktiva za oznaฤavanje podruฤja prikaza. Odgovarajuฤ‡i prikaz ubrizgava se tamo svaki put kada se klikne na bilo koju vezu.

Dodajte href oznake i div oznaku

Korak 3) U oznaci AngularJS skripte dodajte konfiguraciju usmjeravanja.

  1. Kada korisnik klikne na Novi dogaฤ‘aj link, AngularJS se uฤitava add_event.html, ubrizgava svoje oznake u prikaz i koristi AddEventController za poslovnu logiku.
  2. Kada korisnik klikne na Dogaฤ‘aj prikaza link, uฤitava se show_event.html i koristi ShowDisplayController.
  3. The otherwise Klauzula postavlja zadani prikaz koji se prikazuje korisniku, ลกto je ovdje DisplayEvent.

Konfiguracija usmjeravanja

Korak 4) Dodajte kontrolere za obradu poslovne logike za obje funkcije. Svaki jednostavno postavlja poruku na svoj objekt opsega, koja se prikazuje kada se prikaลพe odgovarajuฤ‡i prikaz.

Dodaj kontrolere

<!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>

โš ๏ธ Tri ispravka originalnog popisa. Prvo, linkovi glase #!NewEvent bez kose crte dok su rute deklarirane kao /NewEvent, tako da se niลกta nije podudaralo. Od AngularJS-a 1.6 zadani prefiks hash-a je !, ลกto ฤini ispravnu adresu #!/NewEvent โ€” kosa crta iza uskliฤnika. Drugo, ShowDisplayController postavite poruku na "Ovo je prikaz dogaฤ‘aja", pri ฤemu nedostaje rijeฤ do koje okolni tekst citira. Treฤ‡e, lib/bootstrap.js uฤitan je s relativne putanje koja se nigdje ne rjeลกava i nikada se ne koristi, pa je uklonjen.

POVEZANI ฤŒLANCI

Korak 5) Izradite stranice add_event.html i show_event.htmlSvaki sadrลพi zaglavlje i izraz koji prikazuje poruku koju je ubrizgao njegov kontroler.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Ako je kod uspjeลกno izvrลกen, u pregledniku se prikazuje sljedeฤ‡i izlaz.

Izlaz:

izlaz ng-viewa

izlaz ng-viewa

Uobiฤajene greลกke u ng-viewu i kako ih ispraviti

Gotovo svaki kvar ng-viewa dolazi od oลพiฤenja modula, formata adrese ili naฤina na koji se stranica posluลพuje, a ne od same direktive.

  • Podruฤje prikaza ostaje prazno: o ngRoute modul nije bio naveden kao ovisnost ili angular-route.js nije uฤitan. Oba su obavezna, a skripta mora doฤ‡i nakon angular.min.js.
  • Linkovi mijenjaju adresu, ali niลกta se ne prikazuje: href ne odgovara ruti. Iz AngularJS-a 1.6 adresa treba #!/Route; koriลกten je stariji kod napisan za verziju 1.5 #/Route.
  • Predloลกci se ne mogu uฤitati zbog CORS greลกke: Stranica je otvorena izravno s diska. Posluลพite je putem HTTP-a, jer templateUrl dohvaฤ‡a se AJAX zahtjevom, blokovi protokola datoteke.
  • Pojavljuje se samo posljednji prikaz: Viลกe od jednog elementa nosi ng-view. AngularJS poลกtuje jedno podruฤje prikaza po stranici.
  • Niลกta se ne prikazuje pri prvom uฤitavanju: Ne otherwise klauzula je konfigurirana tako da prazna adresa ne odgovara nijednoj ruti.

Pitanja i odgovori

Ne. ngRoute podrลพava jedno podruฤje prikaza po stranici. Za nekoliko imenovanih podruฤja odjednom koristite biblioteku ui-router koja pruลพa ui-view i podrลพava ugnijeลพฤ‘ene i srodne prikaze.

Omoguฤ‡i HTML5 naฤin rada s $locationProvider.html5Mode(true) i dodajte osnovnu oznaku. Posluลพitelj tada mora prepisati nepoznate putanje u index.html, inaฤe osvjeลพavanje vraฤ‡a 404.

Uglavnom. AI Alati pretvaraju tablice usmjeravanja u nizove Angular Routes i zamjenjuju ng-view s router-outlet. Kontroleri se i dalje moraju ruฤno prepisati kao komponente.

AI asistenti brzo provjeravaju tri uobiฤajena osumnjiฤenika: nedostajuฤ‡u ovisnost ngRoute, prefiks hash-a koji ne odgovara ruti i putanju predloลกka koju preglednik ne moลพe dohvatiti.

Da. Dodaj resolve blok do rute. AngularJS ฤeka da se ta obeฤ‡anja ispune prije instanciranja kontrolera, ลกto sprjeฤava da prikaz bljeska prazno dok podaci stiลพu.

Saลพmite ovu objavu uz: