AngularJS ng-view s primjerom

⚡ 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

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.

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.

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.

Korak 2) Dodajte oznake href i oznaku div.

Dodajte href oznake koje povezuju na "Dodaj novi događaj" i "Prikaži događaj".
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.

Korak 3) U oznaci AngularJS skripte dodajte konfiguraciju usmjeravanja.

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.
Kada korisnik klikne na Događaj prikaza link, učitava se show_event.html i koristi ShowDisplayController.
The otherwise Klauzula postavlja zadani prikaz koji se prikazuje korisniku, što je ovdje DisplayEvent.

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.

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

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

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>

{{message}}

Ako je kod uspješno izvršen, u pregledniku se prikazuje sljedeći izlaz.

Izlaz:

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.