Înainte de a începe cu rutare, să avem doar o prezentare rapidă a aplicațiilor cu o singură pagină.
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 actualizează dinamic pagina pe baza interacțiunii utilizatorului cu aplicația web.
Ce este rutarea în AngularJS?
În AngularJS, rutare este ceea ce vă permite să creați aplicații cu o singură pagină.
- Traseele AngularJS vă permit să creați adrese URL diferite pentru conținut diferit din aplicația dvs.
- Rutele AngularJS permit afișarea mai multor conținuturi în funcție de ruta aleasă.
- O rută este specificată în adresa URL după semnul #.
Să luăm un exemplu de site care este găzduit prin adresa URL http://example.com/index.html .
Pe această pagină, veți găzdui pagina principală a aplicației dvs. Să presupunem că aplicația organizează un eveniment și cineva dorește să vadă care sunt diferitele evenimente afișate sau dacă doresc să vadă detaliile unui anumit eveniment sau să șteargă un eveniment. Într-o aplicație cu o singură pagină, atunci când rutare este activată, toate aceste funcționalități ar fi disponibile prin următoarele linkuri
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Simbolul # va fi utilizat împreună cu diferitele rute (ShowEvent, DisplayEvent și DeleteEvent).
- Deci, dacă utilizatorul ar dori să vadă toate evenimentele, ar fi direcționat către link-ul ( http://example.com/index.html#ShowEvent ), altfel
- Dacă doreau să vadă doar un anumit eveniment, vor fi redirecționați către link ( http://example.com/index.html#DisplayEvent ) sau
- Dacă doreau să șteargă un eveniment, vor fi direcționați către linkul http://example.com/index.html#DeleteEvent .
Rețineți că adresa URL principală rămâne aceeași.
În acest tutorial, veți învăța-
- Adăugarea unui traseu unghiular ($ routeProvider)
- Crearea unui traseu implicit
- Accesarea parametrilor de pe traseu
- Utilizarea serviciului de rută Angular $
- Activarea rutării HTML5
Adăugarea unui traseu unghiular ($ routeProvider)
Așa cum am discutat mai devreme, rutele din AngularJS sunt utilizate pentru a direcționa utilizatorul către o vizualizare diferită a aplicației dvs. Și această rutare se face pe aceeași pagină HTML, astfel încât utilizatorul să aibă experiența că nu a părăsit pagina.
Pentru a implementa rutare, următorii pași principali trebuie să fie implementați în aplicația dvs. în orice ordine specifică.
- Trimitere la angular-route.js. Acesta este un fișier JavaScript dezvoltat de Google care are toate funcționalitățile de rutare. Acest lucru trebuie plasat în aplicația dvs., astfel încât să poată face referire la toate modulele principale necesare pentru rutare.
-
Următorul pas important este să adăugați o dependență la modulul ngRoute din aplicația dvs. Această dependență este necesară, astfel încât funcționalitatea de rutare să poată fi utilizată în cadrul aplicației. Dacă această dependență nu este adăugată, atunci nu se va putea folosi rutare în cadrul aplicației angular.JS.
Mai jos este sintaxa generală a acestei afirmații. Aceasta este doar o declarație normală a unui modul cu includerea cuvântului cheie ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Următorul pas ar fi să vă configurați $ routeProvider. Acest lucru este necesar pentru furnizarea diverselor rute din aplicația dvs.
Mai jos este sintaxa generală a acestei afirmații, care se explică de la sine. Se afirmă doar că, atunci când este aleasă calea relevantă, utilizați ruta pentru a afișa vizualizarea dată utilizatorului.
when(path, route)
- Linkuri către ruta dvs. din pagina HTML. În pagina dvs. HTML, veți adăuga linkuri de referință la diferitele rute disponibile în aplicația dvs.
Traseul 1
- În cele din urmă ar fi includerea directivei ng-view, care ar fi în mod normal într-o etichetă div. Aceasta ar fi utilizată pentru a injecta conținutul vizualizării atunci când se alege ruta relevantă.
Acum, să vedem un exemplu de rutare folosind pașii menționați mai sus.
În exemplul nostru,
Vom prezenta 2 linkuri către utilizator,
- Una este afișarea subiectelor pentru un curs Angular JS , iar cealaltă este pentru cursul Node.js.
- Când utilizatorul face clic pe oricare dintre linkuri, vor fi afișate subiectele pentru cursul respectiv.
Pasul 1) Includeți fișierul cu traseu unghiular ca referință de script.
Acest fișier de rută este necesar pentru a utiliza funcționalitățile de a avea mai multe rute și vizualizări. Acest fișier poate fi descărcat de pe site-ul angular.JS.
Pasul 2) Adăugați etichete href care vor reprezenta linkuri către „Subiecte JS unghiulare” și „Subiecte JS noduri”.
Pasul 3) Adăugați o etichetă div cu directiva ng-view care va reprezenta vizualizarea.
Aceasta va permite injectarea vizualizării corespunzătoare ori de câte ori utilizatorul face clic pe „Subiecte JS unghiulare” sau „Subiecte JS noduri”.
Pasul 4) În eticheta de script pentru AngularJS, adăugați „modulul ngRoute” și serviciul „$ routeProvider”.
Explicatie cod:
- Primul pas este să vă asigurați că includeți „modulul ngRoute”. Cu acest lucru, Angular se va ocupa automat de rutare în aplicația dvs. Modulul ngRoute dezvoltat de Google are toate funcționalitățile care permit rutare să fie posibilă. Prin adăugarea acestui modul, aplicația va înțelege automat toate comenzile de rutare.
- $ Routeprovider este un serviciu pe care unghiular îl folosește pentru a asculta în fundal rutele care sunt numite. Deci, atunci când utilizatorul face clic pe un link, furnizorul de rute va detecta acest lucru și apoi va decide ce rută să urmeze.
- Creați o rută pentru linkul unghiular - Acest bloc înseamnă că, atunci când se face clic pe linkul unghiular, injectați fișierul Angular.html și, de asemenea, utilizați controlerul „AngularController” pentru a procesa orice logică de afaceri.
- Creați o rută pentru linkul Node - Acest bloc înseamnă că, atunci când se face clic pe linkul Node, injectați fișierul Node.html și utilizați și controlerul „NodeController” pentru a procesa orice logică de afaceri.
Pasul 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 controler, creăm o serie de perechi cheie-valoare pentru a stoca numele și descrierile subiectului pentru fiecare curs. Variabila matricei „tutorial” este adăugată la obiectul scop pentru fiecare controler.
Event Registration Guru99 Global Event
Pasul 6) Creați pagini numite Angular.html și Node.html. Pentru fiecare pagină efectuăm pașii de mai jos.
Acești pași vor asigura că toate perechile cheie-valoare ale matricei sunt afișate pe fiecare pagină.
- Utilizarea directivei ng-repeat pentru a parcurge fiecare pereche cheie-valoare definită în variabila tutorial.
- Afișarea numelui și descrierii fiecărei perechi cheie-valoare.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Nod.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Dacă faceți clic pe linkul Subiecte AngularJS, va fi afișată ieșirea de mai jos.
Rezultatul arată clar că,
- Când se face clic pe linkul „Angular JS Topics”, rutaProvider pe care am declarat-o în codul nostru decide că codul Angular.html trebuie injectat.
- Acest cod va fi injectat în eticheta „div”, care conține directiva ng-view. De asemenea, conținutul descrierii cursului provine din „variabila tutorial” care făcea parte din obiectul scop definit în AngularController.
- Când faceți clic pe Subiectele Node.js, va avea loc același rezultat și va fi afișată vizualizarea pentru subiectele Node.js.
- De asemenea, rețineți că adresa URL a paginii rămâne aceeași, doar ruta de după eticheta # se modifică. Și acesta este conceptul de aplicații cu o singură pagină. Eticheta #hash din URL este un separator care separă ruta (care în cazul nostru este „unghiular” așa cum se arată în imaginea de mai sus) și pagina principală HTML (Sample.html)
Crearea unui traseu implicit
Rutare în AngularJS oferă, de asemenea, facilitatea de a avea o rută implicită. Aceasta este ruta aleasă dacă nu există o 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 să redirecționați 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.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Explicatie cod:
- Aici folosim același cod ca mai sus, singura diferență fiind că folosim declarația altfel ș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 „/ unghiulară”.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Puteți vedea clar că vizualizarea implicită afișată este vizualizarea JS unghiulară.
- Acest lucru se datorează faptului că atunci când pagina se încarcă, aceasta merge la opțiunea „altfel” din funcția $ routeProvider și încarcă vizualizarea „/ Angular”.
Accesarea parametrilor de pe traseu
Unghiular oferă, de asemenea, funcționalitatea de a furniza parametri în timpul rutare. Parametrii sunt adăugați la sfârșitul traseului în adresa URL, de exemplu, http: //guru99/index.html#/Angular/1 . În acest exemplu
- , http: //guru99/index.html este adresa URL principală a aplicației noastre
- Simbolul # este separatorul dintre adresa URL principală a aplicației și ruta.
- Unghiular este traseul nostru
- Și în cele din urmă „1” este parametrul care este adăugat la ruta noastră
Sintaxa aspectului parametrilor în adresa URL este prezentată mai jos:
HTMLPage # / ruta / parametru
Aici veți observa că parametrul este trecut după rută în adresa URL.
Deci, în exemplul nostru, mai sus pentru subiectele Angular JS, putem trece un parametru așa cum se arată mai jos
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Aici parametrii 1, 2 și 3 pot reprezenta de fapt subiectul.
Să analizăm în detaliu modul în care putem implementa acest lucru.
Pasul 1) Adăugați următorul cod în vizualizarea dvs.
-
Adăugați un tabel pentru a afișa utilizatorului toate subiectele pentru cursul Angular JS
-
Adăugați un rând de tabel pentru afișarea subiectului „Controlere”. Pentru acest rând, schimbați eticheta href la „Angular / 1”, ceea ce înseamnă că atunci când utilizatorul face clic pe acest subiect, parametrul 1 va fi transmis în adresa URL împreună cu ruta.
-
Adăugați un rând de tabel pentru afișarea subiectului „Modele”. Pentru acest rând, schimbați eticheta href la „Angular / 2”, ceea ce înseamnă că atunci când utilizatorul face clic pe acest subiect, parametrul 2 va fi transmis în adresa URL împreună cu ruta.
-
Adăugați un rând de tabel pentru afișarea subiectului „Directivele”. Pentru acest rând, schimbați eticheta href la „Angular / 3”, ceea ce înseamnă că atunci când utilizatorul face clic pe acest subiect, parametrul 3 va fi transmis în adresa URL împreună cu ruta.
Pasul 2) În funcția de serviciu furnizor de rute adăugați: topicId pentru a indica faptul că orice parametru trecut în URL după rută ar trebui să fie atribuit variabilei topicId.
Pasul 3) Adăugați codul necesar la controler
- 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 rutei trecuți în adresa URL.
- Parametrul „routeParams” are o referință la obiectul topicId, care este transmis ca parametru de rută. Aici atașăm variabila „$ routeParams.topicId” la obiectul nostru scop ca variabilă „$ scope.tutotialid”. Acest lucru se face astfel încât să poată fi referit în vizualizarea noastră prin variabila tutorialid.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Pasul 4) Adăugați expresia pentru a afișa variabila tutorialid în pagina Angular.html.
Anguler
{{tutorialid}}
Dacă codul este executat cu succes, următoarea ieșire va fi afișată 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 va fi adăugat la adresa URL.
- Acest număr va fi apoi luat ca un argument „routeparam” de către serviciul de furnizare a rutei Angular.JS și poate fi apoi accesat de către controlerul nostru.
Utilizarea serviciului de rută Angular $
Serviciul $ route vă permite să accesați proprietățile traseului. Serviciul $ route este disponibil ca parametru atunci când funcția este definită în controler. Sintaxa generală a modului în care parametrul $ route este disponibil de la controler este prezentată mai jos;
myApp.controller('MyController',function($scope,$route)
- myApp este modulul angular.JS definit pentru aplicațiile dvs.
- MyController este numele controlerului definit pentru aplicația dvs.
- La fel ca variabila $ scope este pusă la dispoziția aplicației dvs., care este utilizată pentru a transmite informații de la controler la vizualizare. Parametrul $ route este utilizat pentru a accesa proprietățile traseului.
Să aruncăm o privire asupra modului în care 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ă la ruta noastră. Și mai târziu vom accesa acest șir de la controlerul nostru folosind serviciul $ route și apoi vom folosi ulterior obiectul scop pentru a afișa acest lucru în vizualizarea noastră.
Deci, să vedem pașii pe care trebuie să-i parcurgem pentru a realiza acest lucru.
Pasul 1) Adăugați o pereche personalizată cheie-valoare la traseu. Aici, adăugăm o cheie numită „textul meu” și îi atribuim o valoare „Aceasta este unghiulară”.
Pasul 2) Adăugați codul relevant la controler
- Adăugați parametrul $ route la funcția controlerului. Parametrul $ route este un parametru cheie definit în unghiular, care permite accesul la proprietățile traseului.
- Variabila „textul meu” care a fost definită în traseu poate fi accesată prin referința $ route.current. Aceasta este apoi atribuită variabilei „text” a obiectului scop. Variabila text poate fi apoi accesată din vizualizare în mod corespunzător.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Pasul 3) Adăugați o referință la variabila text din obiectul scop ca expresie. Aceasta 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”.
Anguler
{{text}}
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Putem vedea că textul „Acesta este unghiular” se afișează și atunci când facem clic pe oricare dintre linkurile din tabel. ID-ul subiectului este afișat, de asemenea, în același timp cu textul.
Activarea rutării HTML5
Rutarea HTML5 este utilizată practic pentru a crea un URL curat. Înseamnă eliminarea hashtagului de la adresa URL. Deci, adresele URL de rutare, atunci când se utilizează rutare 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, în mod normal, cunoscut sub numele de a prezenta o adresă URL destulă utilizatorului.
Există 2 pași principali care trebuie efectuați pentru rutare HTML5.
- Configurarea $ locationProvider
- Stabilirea bazei noastre pentru legături relative
Să analizăm detaliile modului de realizare a pașilor menționați mai sus în exemplul nostru de mai sus
Pasul 1) Adăugați codul relevant la modulul unghiular
- Adăugați o constantă baseURL la aplicație - Aceasta este necesară pentru rutare HTML5, astfel încât aplicația să știe care este locația de bază a aplicației.
- Adăugați serviciile $ locationProvider. Acest serviciu vă permite să definiți html5Mode.
- Setați html5Mode al serviciului $ locationProvider la adevărat.
Pasul 2) Eliminați toate #tagurile pentru linkuri („Angular / 1”, „Angular / 2”, „Angular / 3”) pentru a crea un URL ușor de citit.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Dacă codul este executat cu succes, următoarea ieșire va fi afișată 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.
rezumat
- Rutarea este utilizată pentru a prezenta vizualizări diferite utilizatorului pe aceeași pagină web. Acesta este practic conceptul utilizat în aplicațiile cu o singură pagină, care sunt implementate pentru aproape toate aplicațiile web moderne
- O rută implicită poate fi configurată pentru rutare unghiulară. JS. Este folosit pentru a determina care va fi vizualizarea implicită care va fi afișată utilizatorului
- Parametrii pot fi trecuți către rută prin intermediul URL-ului ca parametri ai rutei. Acești parametri sunt apoi accesați utilizând parametrul $ routeParams din controler
- Serviciul $ route poate fi utilizat pentru a defini perechi cheie-valoare personalizate în traseu, care pot fi apoi accesate ulterior din vizualizare
- Rutarea HTML5 este utilizată pentru a elimina #tag de la URL-ul de rutare în unghiular pentru a forma o adresă URL frumoasă