Rutare AngularJs cu parametri

Înainte de a analiza cum funcționează rutarea în AngularJS, este util să înțelegem tipul de aplicație pentru care a fost construită rutarea. Secțiunea de mai jos stabilește acest context, iar fiecare tehnică care urmează se bazează pe acesta.

Ce sunt aplicațiile cu o singură pagină?

Aplicațiile cu o singură pagină, sau SPA-uri, sunt aplicații web care încarcă o singură pagină HTML și apoi actualizează dinamic pagina respectivă pe măsură ce utilizatorul interacționează cu ea. În loc să solicite un document nou de la server pentru fiecare clic, un SPA schimbă doar porțiunea paginii care s-a modificat.

Acest design creează o problemă. Dacă browserul nu navighează niciodată către un document nou, bara de adrese nu se schimbă niciodată, deci utilizatorul nu poate adăuga un ecran la favorite, nu îl poate partaja sau nu poate folosi butonul Înapoi. Rutarea rezolvă exact această problemă.

Ce este rutarea în AngularJS?

Rutare în AngularJS este o metodă care vă permite să creați aplicații cu o singură pagină. Vă permite să creați diferite URLs pentru conținut diferit în aplicațiile web. Rutarea AngularJS ajută, de asemenea, la afișarea mai multor conținuturi în funcție de ruta aleasă. Este specificată în URL după semnul #.

Să luăm exemplul unui site găzduit prin intermediul URL http://example.com/index.html.

Această pagină găzduiește ecranul principal al aplicației tale. Să presupunem că aplicația organizează un eveniment și utilizatorul dorește să listeze evenimentele, să vizualizeze unul în detaliu sau să șteargă unul. Într-o aplicație cu o singură pagină cu rutarea activată, toate acestea sunt disponibile prin intermediul următoarelor linkuri.

Simbolul # va fi folosit împreună cu diferitele rute (ShowEvent, DisplayEvent și DeleteEvent).

• Pentru a vedea toate evenimentele, utilizatorul este direcționat către http://example.com/index.html#ShowEvent
• Pentru a vedea un anumit eveniment, li se îndrumă către http://example.com/index.html#DisplayEvent
• Pentru a șterge un eveniment, aceștia sunt direcționați către http://example.com/index.html#DeleteEvent

Rețineți că principalul URL rămâne la fel. Se schimbă doar fragmentul de după #, iar acel fragment este ceea ce AngularJS urmărește. Odată ce conceptul este stabilit, următoarea secțiune prezintă componentele pe care trebuie să le conectați înainte ca oricare dintre ele să funcționeze.

Adăugarea rutei AngularJS folosind $routeProvider

Așa cum s-a discutat anterior, rutele în AngularJS sunt folosite pentru a direcționa utilizatorul către o altă vizualizare a aplicației. Această direcționare se face pe aceeași pagină HTML, astfel încât utilizatorul are experiența că nu a părăsit pagina.

Pentru a implementa rutarea, următorii pași principali trebuie implementați în aplicația dvs. într-o anumită ordine.

1. Referință angular-route.js. Aceasta JavaScenariu fișier, dezvoltat de Google, conține toate funcționalitățile de rutare și trebuie inclus pentru ca aplicația să poată face referire la nevoile de rutare ale modulelor.
2. Adăugați o dependență la modulul ngRoute din cadrul aplicației. Fără această dependență, rutarea nu poate fi utilizată deloc în aplicația AngularJS.

Mai jos este sintaxa generală a acestei declarații. Aceasta este doar o declarație normală a unui modul cu includerea cuvântului cheie ngRoute.

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

3. Configurați $routeProvider. Acesta oferă diversele rute din aplicația dvs., iar sintaxa precizează pur și simplu că, atunci când este aleasă calea relevantă, se folosește ruta pentru a afișa vizualizarea dată.

when(path, route)

4. Linkuri către traseul dvs. din pagina dvs. HTML. În pagina dvs. HTML, veți adăuga legături de referință la diferitele rute disponibile în aplicația dvs.

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

5. În cele din urmă ar fi includerea directiva ng-view, care ar fi în mod normal într-o etichetă div. Aceasta ar fi folosită pentru a injecta conținutul vizualizării atunci când este aleasă ruta relevantă.

👍 Sfat: Toți cei cinci pași sunt obligatorii. O referință angular-route.js lipsă este cel mai frecvent motiv pentru care o rută nu face nimic în mod silențios, deoarece $routeProvider nu există fără ea. Următoarea secțiune prezintă toți cei cinci într-un exemplu funcțional.

Exemplu de rutare AngularJS

Acum, să ne uităm la un exemplu de rutare folosind pașii menționați mai sus.

În exemplul nostru de rutare AngularJS cu parametri,

• Un link este pentru a afișa subiectele pentru un AngularJS desigur, iar celălalt este pentru Node.js curs.
• Când utilizatorul face clic pe oricare dintre linkuri, vor fi afișate subiectele pentru cursul respectiv.

Pas 1) Includeți fișierul cu rută unghiulară ca referință de script.

Acest fișier de rută este necesar pentru a utiliza funcționalitățile oferite de existența mai multor rute și vizualizări. Acest fișier poate fi descărcat de pe site-ul web AngularJS.

Pas 2) Adăugați etichete href care vor reprezenta link-uri către „Subiecte Angular JS” și „Subiecte Node JS”.

Pas 3) Adăugați o etichetă div cu directiva ng-view care va reprezenta vizualizarea.

Acest lucru va permite vizualizarea corespunzătoare să fie injectată ori de câte ori utilizatorul face clic pe „Subiecte JS Angular” sau „Subiecte JS Node”.

Pas 4) În eticheta de script pentru AngularJS, adăugați „modulul ngRoute” și serviciul „$routeProvider”.

Code Explicaţie:

1. Includeți „modulul ngRoute”. Cu acesta implementat, Angular gestionează automat rutarea și înțelege toate comenzile de rutare.
2. `$routeProvider` este un serviciu care ascultă în fundal rutele apelate. Când utilizatorul dă clic pe un link, acesta detectează acest lucru și decide ce rută să urmeze.
3. Creați o rută pentru linkul Angular: când se face clic pe acesta, injectați Angular.html și utilizați „AngularController” pentru logica de business.
4. Creați o rută pentru linkul Node, care injectează Node.html și utilizează „NodeController” în același mod.

Pas 5) Următorul este să adăugați controlere pentru a procesa logica de afaceri atât pentru AngularController, cât și pentru NodeController.

În fiecare controller, creăm o matrice de perechi cheie-valoare pentru a stoca numele și descrierile subiectelor pentru fiecare curs. Variabila matrice „tutorial” este adăugată la obiectul scope pentru fiecare controller.

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

⚠️ Corecțiile au fost aplicate. <title> eticheta stătea înăuntru <body>, chrset="UTF 8" a fost scris greșit, al doilea link indica #Node.html în loc de ruta înregistrată /Nodeși căile șablonului aveau o bară oblică inițială care pornește de la rădăcina domeniului.

Pas 6) Creați pagini numite Angular.html și Node.html. Pentru fiecare pagină parcurgem pașii de mai jos.

Acești pași se vor asigura că toate perechile cheie-valoare ale matricei sunt afișate pe fiecare pagină.

1. Utilizarea directiva ng-repeat pentru a parcurge fiecare pereche cheie-valoare definită în variabila tutorialului.
2. Se afișează numele și descrierea fiecărei perechi cheie-valoare.

• Angular.html

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

• Node.html — identic cu lista de mai sus, cu titlul schimbat în „Nod”. Ambele șabloane au același text tutorial variabilă, pe care fiecare controler o furnizează din propriul său domeniu de aplicare.

⚠️ Corecţie: Titlul din fișierul Angular.html original suna „Angler”. Ortografia este corectată mai sus.

Dacă codul este executat cu succes, următorul rezultat va fi afișat atunci când rulați codul în browser.

ieșire:

Dacă dați clic pe linkul AngularJS Topics, va fi afișat rezultatul de mai jos.

Rezultatul arată clar că,

• Când se face clic pe linkul „Subiecte Angular JS”, ​​routeProvider pe care l-am declarat în codul nostru decide ca codul Angular.html să fie injectat.
• Acest cod va fi injectat în eticheta „div”, care conține directiva ng-view. De asemenea, conținutul pentru descrierea cursului provine din „variabila tutorial” care a făcut parte din obiectul de aplicare definit în AngularController.
• Când se face clic pe Node.js Subiecte, va avea loc același rezultat, iar vizualizarea pentru subiectele Node.js se va manifesta.
• De asemenea, observați că pagina URL rămâne la fel. Se schimbă doar ruta de după eticheta #, iar acesta este conceptul aplicațiilor cu o singură pagină. Eticheta #hash din URL este un separator între rută (care în cazul nostru este „Angular”) și pagina HTML principală (Sample.html).

Exemplul funcționează doar atunci când utilizatorul dă clic pe un link care corespunde unei rute înregistrate. Următoarea secțiune tratează ce ar trebui să se întâmple atunci când nu se potrivește nimic.

Crearea unei rute implicite în AngularJS

Rutarea în AngularJS oferă, de asemenea, posibilitatea de a avea o rută implicită. Aceasta este ruta care este aleasă dacă nu există nicio potrivire pentru ruta existentă.

Ruta implicită este creată prin adăugarea următoarei condiții la definirea serviciului $routeProvider.

Sintaxa de mai jos înseamnă pur și simplu redirecționarea către o altă pagină dacă oricare dintre rutele existente nu se potrivește.

otherwise({
  redirectTo: 'page'
});

Să folosim același exemplu de mai sus și să adăugăm o rută implicită la serviciul nostru $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 Explicaţie:

1. Aici folosim același cod ca mai sus, singura diferență fiind că folosim instrucțiunea otherwise și opțiunea „redirectTo” pentru a specifica ce vizualizare ar trebui încărcată dacă nu este specificată nicio rută. În cazul nostru, dorim să fie afișată vizualizarea „/Angular”.

Dacă codul este executat cu succes, următorul rezultat va fi afișat atunci când rulați codul în browser.

ieșire:

Din ieșire,

• Puteți vedea clar că vizualizarea implicită afișată este vizualizarea AngularJS.
• Acest lucru se datorează faptului că atunci când pagina se încarcă, trece la opțiunea „altfel” din funcția $routeProvider și încarcă vizualizarea „/Angular”.

O rută implicită decide ce vizualizare se încarcă. Următoarea secțiune prezintă modul în care o singură rută poate servi mai multe înregistrări prin transportul unei valori în URL.

Cum să accesați parametrii de pe ruta AngularJS

Angular oferă și funcționalitatea de a transmite parametri în timpul rutării. Parametrii sunt adăugați la sfârșitul rutei în URL, De exemplu, http://guru99/index.html#/Angular/1. În acest exemplu de rutare unghiulară,

1. http://guru99/index.html este principala noastră aplicație URL
2. Simbolul # este separatorul dintre aplicația principală URL și traseul
3. Angular este traseul nostru
4. Și în cele din urmă „1” este parametrul care se adaugă la traseul nostru

Sintaxa generală este HTMLPage#/route/parameter, deci subiectele anterioare devin Sample.html#/Angular/1, #/Angular/2 și #/Angular/3, unde cifra este ID-ul subiectului.

Să analizăm în detaliu cum putem implementa o rută Angular cu un parametru.

Pasul 1) Adăugați următorul cod la vizualizarea dvs

1. Adăugați un tabel pentru a afișa utilizatorului toate subiectele cursului Angular JS.
2. Adăugați un rând în tabel pentru afișarea subiectului „Controllers”. Pentru acest rând, setați href la „#!/Angular/1”, astfel încât, dacă faceți clic pe subiect, să fie transmis parametrul 1 din tabel. URL odată cu traseul.
3. Adăugați un rând pentru subiectul „Modele”, cu href setat la „#!/Angular/2”, astfel încât parametrul 2 să circule în URL.
4. Adăugați un rând pentru subiectul „Directive”, cu href setat la „#!/Angular/3”, astfel încât parametrul 3 să circule în URL.

Pasul 2) Adăugați ID-ul subiectului în funcția de serviciu routeProvider
În funcția de serviciu routeProvider, adăugați :topicId substituent pentru a indica faptul că orice parametru transmis în URL după ce ruta ar trebui atribuită variabilei topicId.

Pasul 3) Adăugați codul necesar controlerului

1. Asigurați-vă că adăugați mai întâi „$routeParams” ca parametru atunci când definiți funcția controlerului. Acest parametru va avea acces la toți parametrii de rută transmiși în URL.
2. „$routeParams” conține topicId-ul transmis în rută. Atașarea $routeParams.topicId la domeniul de aplicare ca $scope.tutorialid îl face disponibil vizualizării ca 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>

⚠️ Corecțiile au fost aplicate. Originalul a folosit litera l în loc de cifră 1 in href="#Angular/l", a omis ng-view container, astfel încât șablonul nu avea unde să fie redat și s-a încărcat angular-route.js înainte angular.min.js, care generează o eroare de modul.

Pasul 4) Adăugați expresia pentru a afișa variabila
Adăugați expresia pentru a afișa variabila tutorialid în pagina Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Dacă codul este executat cu succes, următorul rezultat va fi afișat atunci când rulați codul în browser.

ieșire:

În ecranul de ieșire,

• Dacă faceți clic pe linkul Detalii subiect pentru primul subiect, numărul 1 este adăugat la URL.
• Numărul respectiv este luat ca argument „routeParams” și devine accesibil în controler.

Citirea unui parametru este simplă. Preluarea înregistrării identificate de parametru, înainte de apariția vizualizării, este sarcina proprietății abordate în continuare.

Cum se preîncarcă datele cu proprietatea resolve

Controlerul din secțiunea anterioară citește un ID de subiect și îl afișează imediat. Aplicațiile reale trebuie mai întâi să preia înregistrarea de pe un server, iar dacă vizualizarea este redată înainte ca solicitarea să se întoarcă, utilizatorul vede un șablon gol care se completează un moment mai târziu. resolve elimină acea licărire de conținut gol.

Fiecare cheie din interiorul unui resolve Un obiect este o dependență pe care AngularJS o pregătește înainte de activarea rutei. Dacă valoarea este o promisiune, routerul așteaptă ca aceasta să se stabilească. Numai după ce fiecare promisiune a fost rezolvată, AngularJS instanțiază controlerul și randează șablonul, iar valorile rezolvate sunt injectate în controler pe nume, exact ca orice alt serviciu.

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;
}]);

Două comportamente contează aici. O promisiune respinsă anulează schimbarea rutei și lasă browserul în vizualizarea curentă, astfel încât o solicitare eșuată nu produce niciodată o pagină nefuncțională. Cu toate acestea, deoarece routerul se blochează în timp ce promisiunea este în așteptare, un punct final lent face ca aplicația să pară blocată. Pereche resolve cu un indicator de progres condus de $routeChangeStart și $routeChangeSuccess evenimente.

⚠️ Avertisment: Nu plasați niciodată verificări de autentificare doar în interior resolveRespingerea unei rute ascunde o vizualizare, dar nu protejează datele din spatele acesteia, iar endpoint-ul API trebuie să impună în continuare accesul pe server.

Pe lângă preîncărcarea datelor, o rută poate transporta și valori de configurare statice. Serviciul descris în continuare prezintă modul în care un controler le citește.

Cum să utilizați serviciul Angular $route

Serviciul $route vă permite să accesați proprietățile rutei. Serviciul $route este disponibil ca parametru atunci când funcția este definită în controler. Sintaxa generală a modului în care parametrul $route este pus la dispoziție de către controler este prezentată mai jos.

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

1. myApp este modulul AngularJS definit pentru aplicația ta.
2. MyController este numele controlerului definit pentru aplicația dumneavoastră.
3. Așa cum $scope transmite informații de la controler către vizualizare, $route expune proprietățile rutei curente.

Să vedem cum putem folosi serviciul $route.

În acest exemplu,

• Vom crea o variabilă personalizată simplă numită „textul meu”, care va conține șirul „Acesta este unghiular”.
• Vom atașa această variabilă rutei noastre. Later Vom accesa acest șir de caractere din controlerul nostru folosind serviciul $route și apoi vom folosi obiectul scope pentru a-l afișa în vizualizarea noastră.

Deci, haideți să vedem pașii pe care trebuie să-i facem pentru a realiza acest lucru.

Pas 1) Adăugați o pereche cheie-valoare personalizată la traseu. Aici, adăugăm o cheie numită „textul meu” și îi atribuim o valoare „Acesta este unghiular”.

Pas 2) Adăugați codul relevant la controler.

1. Adăugați parametrul $route la funcția controller. Parametrul $route este un parametru cheie definit în Angular, care permite accesarea proprietăților rutei.
2. Variabila „mytext” care a fost definită în rută poate fi accesată prin referința $route.current. Aceasta este apoi atribuită variabilei „text” a obiectului scope. Variabila text poate fi apoi accesată din vizualizare în mod corespunzător.

// 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;
}]);

Pas 3) Adăugați o referință la variabila text din obiectul scop ca expresie. Acesta va fi adăugat la pagina noastră Angular.html, așa cum se arată mai jos.

Acest lucru va face ca textul „Acesta este unghiular” să fie injectat în vizualizare. Expresia {{tutorialid}} este aceeași cu cea văzută în subiectul anterior și aceasta va afișa numărul „1”.

<h2>Angular</h2>

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

Dacă codul este executat cu succes, următorul rezultat va fi afișat atunci când rulați codul în browser.

ieșire:

Din ieșire,

• Putem vedea că textul „Acesta este unghiular” este afișat și atunci când facem clic pe oricare dintre linkurile din tabel. ID-ul subiectului este, de asemenea, afișat în același timp cu textul.

Fiecare URL afișat până acum are încă simbolul #. Pasul final de configurare îl elimină.

Se activează rutarea HTML5

Rutarea HTML5 este utilizată pentru a crea informații curate URLs. Înseamnă eliminarea hashtag-ului din URLDeci rutarea URLs, atunci când se utilizează rutarea HTML5, ar apărea așa cum se arată mai jos.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Acest concept este cunoscut în mod normal ca prezentarea unei imagini frumoase URL către utilizator.

Există 2 pași principali care trebuie efectuati pentru rutarea HTML5.

1. Se configurează $locationProvider
2. Stabilirea bazei noastre pentru link-uri relative

Să analizăm în detaliu cum se efectuează pașii menționați mai sus în exemplul nostru.

Pas 1) Adăugați codul relevant în modulul Angular.

1. Adauga o <base> etichetă la antetul documentului. Acest lucru este necesar pentru rutarea HTML5, astfel încât aplicația să știe care este locația de bază a aplicației.
2. Adăugați serviciul $locationProvider. Acest serviciu vă permite să definiți modul html5Mode.
3. Setați html5Mode al serviciului $locationProvider la true.

Pas 2) Eliminați toate etichetele # pentru linkuri („Angular/1”, „Angular/2”, „Angular/3”) pentru a crea elemente ușor de citit. 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>

⚠️ Corecţie: originalul a declarat un baseUrl constantă care indică o cale IDE locală, ceea ce nu are niciun efect asupra html5Mode. AngularJS citește locația de bază din <base href> etichetă. Originalul a fost injectat și $locationProvider fără să sun vreodată html5Mode(true), deci hash-ul nu a fost niciodată eliminat.

Dacă codul este executat cu succes, următorul rezultat va fi afișat atunci când rulați codul în browser.

ieșire:

Din ieșire,

• Puteți vedea că eticheta # nu este acolo când accesați aplicația.

Tot ce este menționat mai sus folosește ngRoute, ruterul livrat de echipa AngularJS. Nu este singura opțiune, iar comparația de mai jos explică când alternativa este cea mai potrivită.

ngRoute vs ui-router: Ce router să alegeți

ngRoute este întreținut de echipa AngularJS și se potrivește cu un URL direct către un singur șablon și controler. ui-router este un proiect comunitar construit pentru a elimina principala limitare a ngRoute: se potrivește la nivel de aplicație de stat mai degrabă decât pe URL singur, ceea ce permite ca un ecran să conțină mai multe regiuni rutate independent.

Alegeți ngRoute când fiecare URL se mapează la o singură vizualizare pe pagină întreagă, deoarece nu necesită dependențe suplimentare și întregul API se potrivește pe o singură pagină. Alegeți ui-router atunci când un ecran are panouri care navighează independent sau când vizualizările copil trebuie să reutilizeze datele încărcate de un părinte. Migrarea ulterioară este posibilă, dar nu trivială, deoarece numele stărilor înlocuiesc URL modele în toate șabloanele.

Erori comune de rutare AngularJS și cum să le remediați

Majoritatea erorilor de rutare produc o eroare ng-view goală în loc de o eroare de consolă, ceea ce le face mai greu de diagnosticat decât ar trebui. Fiecare simptom de mai jos își numește cauza și remedierea.

• Furnizor necunoscut: $routeProvider: angular-route.js nu a fost niciodată încărcat sau a fost încărcat înainte de angular.min.js. Referința către biblioteca principală este mai întâi necesară.
• Vizualizarea rămâne goală fără erori: niciun element nu poartă directiva ng-view, deci șablonul nu are unde să fie randat.
• Nimic nu se încarcă la prima vizită: Nicio rută nu se potrivește cu calea goală. Adăugați un bloc otherwise cu o valoare redirectTo.
• `$routeParams` este gol: Șablonului îi lipsește caracterul substituent pentru două puncte. Trebuie să fie „/Angular/:topicId”.
• Șabloane 404 după html5Mode: configurați serverul să rescrie căile nepotrivite către pagina de bază și confirmați că eticheta href de bază este prezentă.
• Controlerul nu pornește niciodată din nou: doar parametrul s-a modificat, așa că AngularJS a reutilizat instanța controlerului în loc să o reconstruiască. Ascultați evenimentul $routeUpdate în loc să vă bazați pe declanșarea din nou a funcției controlerului.

Întrebări frecvente