AngularJs usmjeravanje s parametrima

Prije nego što pogledamo kako usmjeravanje funkcionira u AngularJS-u, korisno je razumjeti za koju je vrstu usmjeravanja aplikacije izgrađeno. Odjeljak u nastavku postavlja taj kontekst, a svaka tehnika koja slijedi nadograđuje se na njega.

Što su jednostrane aplikacije?

Aplikacije s jednom stranicom ili SPA-ovi su web aplikacije koje učitavaju jednu HTML stranicu, a zatim je dinamički ažuriraju dok korisnik komunicira s njom. Umjesto da od poslužitelja traži novi dokument za svaki klik, SPA zamjenjuje samo dio stranice koji se promijenio.

Taj dizajn stvara jedan problem. Ako preglednik nikada ne otvori novi dokument, adresna traka se nikada ne mijenja, pa korisnik ne može označiti zaslon, podijeliti ga ili koristiti gumb za povratak. Usmjeravanje rješava upravo taj problem.

Što je rutiranje u AngularJS?

Usmjeravanje u AngularJS je metoda koja vam omogućuje izradu jednostraničnih aplikacija. Omogućuje vam stvaranje različitih URLza različit sadržaj u vašim web aplikacijama. AngularJS usmjeravanje također pomaže u prikazivanju više sadržaja ovisno o odabranoj ruti. To je navedeno u URL nakon znaka #.

Uzmimo primjer web-mjesta koje je hostirano putem URL http://example.com/index.html.

Ova stranica sadrži glavni zaslon vaše aplikacije. Pretpostavimo da aplikacija organizira događaj i da korisnik želi popisati događaje, detaljno pregledati jedan ili izbrisati jedan. U aplikaciji s jednom stranicom s omogućenim usmjeravanjem, sve je to dostupno putem sljedećih poveznica.

Simbol # bi se koristio zajedno s različitim rutama (ShowEvent, DisplayEvent i DeleteEvent).

• Za pregled svih događaja, korisnik se upućuje na http://example.com/index.html#ShowEvent
• Da bi vidjeli jedan određeni događaj, upućeni su na http://example.com/index.html#DisplayEvent
• Za brisanje događaja, upućeni su na http://example.com/index.html#DeleteEvent

Imajte na umu da glavni URL ostaje isti. Mijenja se samo fragment nakon znaka #, a taj fragment AngularJS prati. Nakon što je koncept uspostavljen, sljedeći odjeljak pokriva dijelove koje morate povezati prije nego što išta od toga radi.

Dodavanje AngularJS rute pomoću $routeProvider

Kao što je ranije spomenuto, rute u AngularJS koriste se za usmjeravanje korisnika na drugi prikaz vaše aplikacije. Ovo usmjeravanje se vrši na istoj HTML stranici, tako da korisnik ima dojam da nije napustio stranicu.

Za implementaciju usmjeravanja, sljedeći glavni koraci moraju biti implementirani u vašoj aplikaciji bilo kojim određenim redoslijedom.

1. Referenca angular-route.js. Ovo JavaScript datoteka, razvijena od strane Google, sadrži sve funkcionalnosti usmjeravanja i mora biti uključen kako bi aplikacija mogla referencirati potrebe usmjeravanja modula.
2. Dodajte ovisnost modulu ngRoute unutar vaše aplikacije. Bez ove ovisnosti, usmjeravanje se uopće ne može koristiti u AngularJS aplikaciji.

Ispod je opća sintaksa ove izjave. Ovo je samo normalna deklaracija modula s uključivanjem ključne riječi ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Konfigurirajte svoj $routeProvider. To pruža različite rute u vašoj aplikaciji, a sintaksa jednostavno navodi da kada se odabere relevantna putanja, koristite rutu za prikaz zadanog prikaza.

when(path, route)

4. Veze na vašu rutu unutar vaše HTML stranice. Na svoju HTML stranicu ćete dodati referentne veze na različite dostupne rute u vašoj aplikaciji.

<a href="#!/route1">Route 1</a><br/>

5. Konačno bi bilo uključivanje ng-view direktiva, koji bi inače bio u oznaci div. Ovo bi se koristilo za ubacivanje sadržaja pogleda kada se odabere relevantna ruta.

💡 Savjet: Svih pet koraka je obavezno. Nedostajuća referenca angular-route.js najčešći je razlog zašto ruta tiho ne radi ništa, jer $routeProvider ne postoji bez nje. Sljedeći odjeljak objedinjuje svih pet koraka u radnom primjeru.

Primjer AngularJS usmjeravanja

Sada pogledajmo primjer usmjeravanja pomoću gore navedenih koraka.

U našem primjeru AngularJS usmjeravanja s parametrima,

• Jedna poveznica služi za prikaz tema za AngularJS naravno, a drugi je za Node.js tečaj.
• Kada korisnik klikne bilo koju vezu, prikazat će se teme za taj tečaj.

Korak 1) Uključite datoteku kutne rute kao referencu skripte.

Ova datoteka rute je potrebna kako bi se iskoristile funkcionalnosti više ruta i prikaza. Ovu datoteku možete preuzeti s AngularJS web stranice.

Korak 2) Dodajte href oznake koje će predstavljati poveznice na “Angular JS teme” i “Node JS teme.”

Korak 3) Dodajte oznaku div s direktivom ng-view koja će predstavljati prikaz.

To će omogućiti umetanje odgovarajućeg pogleda kad god korisnik klikne bilo na “Angular JS teme” ili “Node JS teme”.

Korak 4) U svoju oznaku skripte za AngularJS dodajte “ngRoute module” i “$routeProvider” uslugu.

Code Objašnjenje:

1. Uključite modul „ngRoute“. S ovim na mjestu, Angular automatski obrađuje usmjeravanje i razumije sve naredbe usmjeravanja.
2. $routeProvider je usluga koja u pozadini osluškuje pozivane rute. Kada korisnik klikne na poveznicu, usluga to detektira i odlučuje kojom će rutom ići.
3. Napravite jednu rutu za Angular poveznicu: kada se klikne na nju, ubrizgajte Angular.html i koristite 'AngularController' za poslovnu logiku.
4. Napravite jednu rutu za Node link, koja ubrizgava Node.html i koristi 'NodeController' na isti način.

Korak 5) Sljedeće je dodavanje kontrolera za obradu poslovne logike za AngularController i NodeController.

U svakom kontroleru stvaramo niz parova ključ-vrijednost za pohranjivanje naziva tema i opisa za svaki tečaj. Varijabla niza 'tutorial' dodaje se objektu opsega za svaki kontroler.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

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

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Primijenjene su ispravke. The <title> oznaka je bila unutra <body>, chrset="UTF 8" je krivo napisano, druga poveznica je vodila na #Node.html umjesto registrirane rute /Node, a putanje predložaka imale su početnu kosu crtu koja se rješava iz korijena domene.

Korak 6) Napravite stranice pod nazivom Angular.html i Node.html. Za svaku stranicu provodimo korake u nastavku.

Ovi koraci će osigurati da se svi parovi ključ-vrijednost niza prikazuju na svakoj stranici.

1. Korištenje ng-repeat direktiva proći kroz svaki par ključ-vrijednost definiran u varijabli tutoriala.
2. Prikaz naziva i opisa svakog para ključ-vrijednost.

• Angular.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Čvor.html — identično gornjem popisu, s promijenjenim naslovom u „Čvor“. Oba predloška imaju isti sadržaj tutorial varijabla koju svaki kontroler opskrbljuje iz vlastitog opsega.

⚠️ Ispravak: Naslov u originalnoj datoteci Angular.html glasio je „Anguler“. Pravopis je ispravljen gore.

Ako je kod uspješno izvršen, sljedeći izlaz će se prikazati kada pokrenete kod u pregledniku.

Izlaz:

Ako kliknete na poveznicu AngularJS Topics, prikazat će se donji ispis.

Izlaz jasno pokazuje da,

• Kada se klikne poveznica “Angular JS Topics”, routeProvider koji smo deklarirali u našem kodu odlučuje da treba ubaciti Angular.html kod.
• Ovaj će kod biti umetnut u oznaku "div", koja sadrži direktivu ng-view. Također, sadržaj za opis tečaja dolazi iz "varijable tutorijala" koja je bila dio objekta opsega definiranog u AngularControlleru.
• Kada se klikne na Node.js Teme, dogodit će se isti rezultat i prikazat će se prikaz za teme Node.js.
• Također, primijetite da stranica URL ostaje isti. Mijenja se samo ruta nakon oznake #, a to je koncept aplikacija s jednom stranicom. Oznaka #hash u URL je separator između rute (koja je u našem slučaju 'Angular') i glavne HTML stranice (Sample.html).

Primjer radi samo dok korisnik klikne na vezu koja odgovara registriranoj ruti. Sljedeći odjeljak obrađuje što bi se trebalo dogoditi kada se ništa ne podudara.

Stvaranje zadane rute u AngularJS

Usmjeravanje u AngularJS-u također pruža mogućnost zadane rute. Ovo je ruta koja se bira ako nema podudaranja s postojećom rutom.

Zadana ruta stvara se dodavanjem sljedećeg uvjeta prilikom definiranja usluge $routeProvider.

Donja sintaksa jednostavno znači preusmjeravanje na drugu stranicu ako se bilo koja od postojećih ruta ne podudara.

otherwise({
  redirectTo: 'page'
});

Iskoristimo isti gornji primjer i dodajmo zadanu rutu našoj usluzi $routeProvider.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  }).
  otherwise({
    redirectTo: '/Angular'
  });
}]);

Code Objašnjenje:

1. Ovdje koristimo isti kod kao gore, s jedinom razlikom što koristimo naredbu otherwise i opciju "redirectTo" kako bismo odredili koji prikaz treba učitati ako nije navedena ruta. U našem slučaju želimo da se prikaže prikaz '/Angular'.

Ako je kod uspješno izvršen, sljedeći izlaz će se prikazati kada pokrenete kod u pregledniku.

Izlaz:

Iz izlaza,

• Jasno možete vidjeti da je prikazani zadani prikaz AngularJS prikaz.
• To je zato što kada se stranica učita, ide na opciju 'drugačije' u funkciji $routeProvider i učitava prikaz '/Angular'.

Zadana ruta određuje koji se prikaz učitava. Sljedeći odjeljak pokriva kako jedna ruta može poslužiti mnoge zapise noseći vrijednost u URL.

Kako pristupiti parametrima iz AngularJS rute

Angular također pruža funkcionalnost prosljeđivanja parametara tijekom usmjeravanja. Parametri se dodaju na kraj rute u URL, Na primjer, http://guru99/index.html#/Angular/1. U ovom primjeru kutnog usmjeravanja,

1. http://guru99/index.html je naša glavna primjena URL
2. Simbol # je razdjelnik između glavne aplikacije URL i ruta
3. Angular je naša ruta
4. I konačno '1' je parametar koji se dodaje našoj ruti

Opća sintaksa je HTMLStranica#/ruta/parametar, pa ranije teme postaju Sample.html#/Angular/1, #/Angular/2 i #/Angular/3, gdje je znamenka ID teme.

Pogledajmo detaljno kako možemo implementirati Angular rutu s parametrom.

Korak 1) Dodajte sljedeći kod svom prikazu

1. Dodajte tablicu koja će korisniku prikazati sve teme za tečaj Angular JS.
2. Dodajte redak tablice za prikaz teme „Kontroleri“. Za ovaj redak postavite href na „#!/Angular/1“, tako da klik na temu prosljeđuje parametar 1 u URL zajedno s rutom.
3. Dodajte redak za temu „Modeli“ s href postavljenim na „#!/Angular/2“ tako da parametar 2 putuje u URL.
4. Dodajte redak za temu „Smjernice“ s href postavljenim na „#!/Angular/3“ tako da parametar 3 putuje u URL.

Korak 2) Dodajte ID teme u servisnu funkciju routeProvider
U servisnoj funkciji routeProvider dodajte :topicId rezervirano mjesto za označavanje da bilo koji parametar proslijeđen u URL nakon što se ruta dodijeli varijabli topicId.

Korak 3) Dodajte potreban kod u kontroler

1. Obavezno prvo dodajte "$routeParams" kao parametar prilikom definiranja funkcije kontrolera. Ovaj parametar će imati pristup svim parametrima rute proslijeđenim u URL.
2. „$routeParams” sadrži topicId proslijeđen u ruti. Prilaganje $routeParams.topicId do opsega kao $scope.tutorialid čini ga dostupnim pogledu kao tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

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

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Primijenjene su ispravke. U originalu je korišteno slovo l umjesto znamenke 1 in href="#Angular/l", izostavljeno ng-view kontejner tako da predložak nije imao gdje za renderiranje i učitavao se angular-route.js prije angular.min.js, što izbacuje grešku modula.

Korak 4) Dodajte izraz za prikaz varijable
Dodajte izraz za prikaz varijable tutorialid na stranici Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Ako je kod uspješno izvršen, sljedeći izlaz će se prikazati kada pokrenete kod u pregledniku.

Izlaz:

Na izlaznom ekranu,

• Ako kliknete na poveznicu Detalji teme za prvu temu, broj 1 će se dodati URL.
• Taj se broj uzima kao argument "routeParams" i postaje dostupan u kontroleru.

Čitanje parametra je jednostavno. Dohvaćanje zapisa koji parametar identificira, prije nego što se prikaz pojavi, zadatak je svojstva koje je sljedeće obrađeno.

Kako unaprijed učitati podatke pomoću svojstva resolve

Kontroler u prethodnom odjeljku čita ID teme i odmah ga prikazuje. Prave aplikacije prvo moraju dohvatiti zapis s poslužitelja, a ako se prikaz iscrta prije nego što se taj zahtjev vrati, korisnik vidi prazan predložak koji se popunjava trenutak kasnije. resolve svojstvo uklanja taj bljesak praznog sadržaja.

Svaki ključ unutar resolve Objekt je ovisnost koju AngularJS priprema prije aktiviranja rute. Ako je vrijednost obećanje, usmjerivač čeka da se ono ispuni. Tek nakon što se svako obećanje riješi, AngularJS instancira kontroler i renderira predložak, a riješene vrijednosti se ubrizgavaju u kontroler po imenu, baš kao i svaka druga usluga.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Ovdje su važna dva ponašanja. Odbijeno obećanje poništava promjenu rute i ostavlja preglednik na trenutnom prikazu, tako da neuspjeli zahtjev nikada ne stvara oštećenu stranicu. Međutim, budući da usmjerivač blokira dok je obećanje na čekanju, spora krajnja točka čini da aplikacija izgleda zamrznuto. Uparivanje resolve s pokazateljem napretka kojim upravlja $routeChangeStart i $routeChangeSuccess događanja.

⚠️ Upozorenje: Nikada ne postavljajte provjere autentičnosti samo unutra resolveOdbijanje rute skriva pogled, ali ne štiti podatke iza njega, a API krajnja točka i dalje mora nametnuti pristup na poslužitelju.

Osim prethodnog učitavanja podataka, ruta može nositi i statičke konfiguracijske vrijednosti. U nastavku je opisana usluga kako ih kontroler čita.

Kako koristiti uslugu Angular $route

Usluga $route omogućuje vam pristup svojstvima rute. Usluga $route dostupna je kao parametar kada je funkcija definirana u kontroleru. Opća sintaksa načina na koji je parametar $route dostupan iz kontrolera prikazana je u nastavku.

myApp.controller('MyController', function($scope, $route) { ... });

1. myApp je AngularJS modul definiran za vašu aplikaciju.
2. MyController je naziv kontrolera definiranog za vašu aplikaciju.
3. Kao što $scope prenosi informacije iz kontrolera u pogled, $route otkriva svojstva trenutne rute.

Pogledajmo kako možemo koristiti uslugu $route.

U ovom primjeru

• Napravit ćemo jednostavnu prilagođenu varijablu pod nazivom "mytext", koja će sadržavati niz "This is angular."
• Ovu varijablu ćemo priložiti našoj ruti. Later Pristupit ćemo ovom nizu iz našeg kontrolera koristeći uslugu $route, a zatim ćemo koristiti objekt scope za njegov prikaz u našem pogledu.

Dakle, pogledajmo korake koje trebamo poduzeti da bismo to postigli.

Korak 1) Dodajte prilagođeni par ključ-vrijednost ruti. Ovdje dodajemo ključ pod nazivom 'mytext' i dodjeljujemo mu vrijednost "Ovo je kutno."

Korak 2) Dodajte odgovarajući kod kontroleru.

1. Dodajte parametar $route kontrolerskoj funkciji. Parametar $route je ključni parametar definiran u Angularu, koji omogućuje pristup svojstvima rute.
2. Varijabli “mytext” koja je definirana u ruti može se pristupiti putem $route.current reference. To se zatim dodjeljuje varijabli 'tekst' objekta opsega. Tekstualnoj varijabli se tada može pristupiti iz prikaza u skladu s tim.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

Korak 3) Dodajte referencu na tekstualnu varijablu iz objekta opsega kao izraz. To će biti dodano na našu stranicu Angular.html kao što je prikazano u nastavku.

To će dovesti do umetanja teksta "Ovo je kutno" u prikaz. Izraz {{tutorialid}} je isti kao onaj viđen u prethodnoj temi i ovo će prikazati broj '1'.

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Ako je kod uspješno izvršen, sljedeći izlaz će se prikazati kada pokrenete kod u pregledniku.

Izlaz:

Iz izlaza,

• Vidimo da se tekst "Ovo je kutno" također prikazuje kada kliknemo na bilo koju poveznicu u tablici. ID teme također se prikazuje u isto vrijeme kad i tekst.

Svaki URL do sada prikazano još uvijek nosi simbol #. Završni korak konfiguracije ga uklanja.

Omogućivanje HTML5 usmjeravanja

HTML5 usmjeravanje se koristi za stvaranje čistog URLs. To znači uklanjanje hashtaga iz URLDakle, usmjeravanje URLs, kada se koristi HTML5 usmjeravanje, izgledalo bi kao što je prikazano dolje.

Uzorak.html/Angular/1

Uzorak.html/Angular/2

Uzorak.html/Angular/3

Ovaj koncept je obično poznat kao predstavljanje prilično URL korisniku.

Dva su glavna koraka koja je potrebno izvršiti za HTML2 usmjeravanje.

1. Konfiguriranje $locationProvider
2. Postavljanje naše baze za relativne veze

Pogledajmo detaljno kako izvršiti gore navedene korake u našem primjeru.

Korak 1) Dodajte odgovarajući kod u Angular modul.

1. Dodaj <base> oznaku u zaglavlje dokumenta. To je potrebno za HTML5 usmjeravanje kako bi aplikacija znala koja je osnovna lokacija aplikacije.
2. Dodajte uslugu $locationProvider. Ova usluga vam omogućuje definiranje html5Mode-a.
3. Postavite html5Mode usluge $locationProvider na true.

Korak 2) Uklonite sve # oznake za poveznice ('Angular/1', 'Angular/2', 'Angular/3') kako biste stvorili lako čitljivu stranicu URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Ispravak: izvornik je proglasio baseUrl konstanta koja pokazuje na lokalnu IDE putanju, što nema utjecaja na html5Mode. AngularJS čita osnovnu lokaciju iz <base href> oznaka. Izvornik je također ubrizgan $locationProvider bez ikakvog poziva html5Mode(true), tako da hash nikada nije uklonjen.

Ako je kod uspješno izvršen, sljedeći izlaz će se prikazati kada pokrenete kod u pregledniku.

Izlaz:

Iz izlaza,

• Možete vidjeti da oznaka # nije tu kada pristupate aplikaciji.

Sve gore navedeno koristi ngRoute, usmjerivač koji je isporučio AngularJS tim. To nije jedina opcija, a usporedba u nastavku objašnjava kada je alternativa bolja opcija.

ngRoute vs. ui-router: Koji ruter odabrati

ngRoute održava AngularJS tim i podudara se s URL izravno na jedan predložak i kontroler. ui-router je zajednički projekt izgrađen kako bi se uklonilo glavno ograničenje ngRoutea: podudara se s aplikacijom su a ne na URL samo, što omogućuje da jedan zaslon sadrži nekoliko neovisno usmjeranih regija.

Odaberite ngRoute kada svaki URL mapira na jedan prikaz cijele stranice, budući da ne treba dodatnu ovisnost i cijeli API stane na jednu stranicu. Odaberite ui-router kada zaslon ima okna koja se neovisno kreću ili kada podređeni prikazi moraju ponovno koristiti podatke koje je učitao roditelj. Migracija kasnije je moguća, ali nije trivijalna, jer nazivi stanja zamjenjuju URL uzorke u svim predlošcima.

Uobičajene AngularJS greške usmjeravanja i kako ih ispraviti

Većina kvarova usmjeravanja rezultira praznim ng-viewom umjesto konzolne pogreške, što ih čini težima za dijagnosticiranje nego što bi trebalo biti. Svaki simptom u nastavku navodi svoj uzrok i rješenje.

• Nepoznati pružatelj usluga: $routeProvider: angular-route.js nikada nije učitan, ili je učitan prije angular.min.js. Prvo referencirajte glavnu biblioteku.
• Prikaz ostaje prazan bez greške: Nijedan element ne sadrži direktivu ng-view, tako da predložak nema gdje za renderiranje.
• Ništa se ne učitava pri prvom posjetu: Nijedna ruta ne odgovara praznoj putanji. Dodajte blok otherwise s vrijednošću redirectTo.
• $routeParams je prazan: Uzorku nedostaje rezervirano mjesto za dvotočku. Mora glasiti '/Angular/:topicId'.
• Predlošci 404 nakon html5Mode: konfigurirajte poslužitelj da prepiše neusklađene putanje do osnovne stranice i potvrdite prisutnost osnovne oznake href.
• Kontroler se nikada ne ponovno pokreće: promijenio se samo parametar, pa je AngularJS ponovno upotrijebio instancu kontrolera umjesto da je ponovno izgradi. Osluškujte događaj $routeUpdate umjesto da se oslanjate na ponovno aktiviranje funkcije kontrolera.

Pitanja i odgovori