Prije nego što započnemo s usmjeravanjem, imajmo samo kratki pregled aplikacija s jednom stranicom.
Što su aplikacije na jednoj stranici?
Aplikacije s jednom stranicom ili (SPA) su web aplikacije koje učitavaju jednu HTML stranicu i dinamički ažuriraju stranicu na temelju interakcije korisnika s web aplikacijom.
Što je usmjeravanje u AngularJS?
U AngularJS, usmjeravanje je ono što vam omogućuje stvaranje aplikacija s jednom stranicom.
- Rute AngularJS omogućuju vam stvaranje različitih URL-ova za različite sadržaje u vašoj aplikaciji.
- Rute AngularJS omogućuju prikaz više sadržaja, ovisno o odabranoj ruti.
- Ruta je navedena u URL-u nakon znaka #.
Uzmimo primjer web stranice koja se hostira putem URL-a http://example.com/index.html .
Na ovoj biste stranici ugostili glavnu stranicu svoje prijave. Pretpostavimo ako je aplikacija organizirala događaj i netko je želio vidjeti koji su to izloženi događaji ili je želio vidjeti detalje određenog događaja ili izbrisati događaj. U aplikaciji s jednom stranicom, kada je usmjeravanje omogućeno, sve ove funkcije bile bi dostupne putem sljedećih poveznica
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Simbol # koristio bi se zajedno s različitim rutama (ShowEvent, DisplayEvent i DeleteEvent).
- Dakle, ako je korisnik želio vidjeti sve Događaje, bio bi usmjeren na vezu ( http://example.com/index.html#ShowEvent ), inače
- Ako bi željeli samo vidjeti određeni događaj, bili bi preusmjereni na vezu ( http://example.com/index.html#DisplayEvent ) ili
- Ako žele izbrisati događaj, bit će usmjereni na vezu http://example.com/index.html#DeleteEvent .
Imajte na umu da glavni URL ostaje isti.
U ovom vodiču naučit ćete-
- Dodavanje kutne rute ($ routeProvider)
- Izrada zadane rute
- Pristup parametrima s rute
- Korištenje usluge Angular $ route
- Omogućavanje HTML5 usmjeravanja
Dodavanje kutne rute ($ routeProvider)
Dakle, kao što smo ranije razgovarali, rute u AngularJS koriste se za usmjeravanje korisnika na drugačiji prikaz vaše aplikacije. I to se usmjeravanje vrši na istoj HTML stranici tako da korisnik ima iskustvo da nije napustio stranicu.
Da biste implementirali usmjeravanje, sljedeći glavni koraci moraju biti implementirani u vašu aplikaciju bilo kojim određenim redoslijedom.
- Upućivanje na angular-route.js. Ovo je JavaScript datoteka koju je razvio Google i koja ima sve funkcije usmjeravanja. To treba smjestiti u vašu aplikaciju kako bi se mogla pozivati na sve glavne module koji su potrebni za usmjeravanje.
-
Sljedeći važan korak je dodavanje ovisnosti modulu ngRoute iz vaše aplikacije. Ova je ovisnost potrebna kako bi se funkcionalnost usmjeravanja mogla koristiti u aplikaciji. Ako se ova ovisnost ne doda, tada se neće moći koristiti usmjeravanje unutar aplikacije angular.JS.
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']);
- Sljedeći korak bio bi konfiguriranje vašeg $ routeProvider. To je potrebno za pružanje različitih ruta u vašoj aplikaciji.
Ispod je opća sintaksa ove izjave koja je vrlo razumljiva. Samo se navodi da kada je odabran odgovarajući put, koristite rutu za prikaz datog pogleda korisniku.
when(path, route)
- Veze do vaše rute unutar vaše HTML stranice. Na svojoj HTML stranici dodati ćete referentne poveznice na različite dostupne rute u vašoj aplikaciji.
Ruta 1
- Konačno bi bilo uključivanje ng-view direktive, koja bi obično bila u div oznaci. To bi se koristilo za ubrizgavanje sadržaja prikaza kada se odabere odgovarajuća ruta.
Sada, pogledajmo primjer usmjeravanja pomoću gore spomenutih koraka.
U našem primjeru,
Korisniku ćemo predstaviti 2 veze,
- Jedan je prikaz tema za tečaj Angular JS , a drugi za tečaj Node.js.
- 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 potrebna je kako bi se iskoristile funkcije više ruta i pogleda. Ovu datoteku možete preuzeti s web stranice angular.JS.
Korak 2) Dodajte href oznake koje će predstavljati poveznice na "Kutne JS teme" i "Node JS teme".
Korak 3) Dodajte div oznaku s ng-view direktivom koja će predstavljati prikaz.
To će omogućiti ubrizgavanje odgovarajućeg pogleda kad god korisnik klikne na "Kutne JS teme" ili "Node JS teme".
Korak 4) U oznaku skripte za AngularJS dodajte "ngRoute modul" i uslugu "$ routeProvider".
Objašnjenje koda:
- Prvi korak je osigurati uključivanje "ngRoute modula". S tim na mjestu, Angular će automatski upravljati usmjeravanjem u vašoj aplikaciji. Modul ngRoute koji je razvio Google ima sve funkcije koje omogućuju usmjeravanje. Dodavanjem ovog modula, aplikacija će automatski razumjeti sve naredbe usmjeravanja.
- $ Routeprovider je usluga koju angular koristi za slušanje u pozadini pozvanih ruta. Dakle, kada korisnik klikne na vezu, pružatelj rute će to otkriti, a zatim odlučiti kojom rutom ići.
- Stvorite jednu rutu za kutnu vezu - ovaj blok znači da kada se klikne kutna veza, ubrizgajte datoteku Angular.html i također upotrijebite kontroler 'AngularController' za obradu bilo koje poslovne logike.
- Stvorite jednu rutu za vezu čvora - ovaj blok znači da kada se klikne veza čvora, ubrizgajte datoteku Node.html i također upotrijebite upravljač 'NodeController' za obradu bilo koje poslovne logike.
Korak 5) Slijedi dodavanje kontrolera za obradu poslovne logike i za AngularController i za NodeController.
U svakom kontroloru stvaramo niz parova ključ / vrijednost za pohranu imena i opisa tema za svaki tečaj. Varijabla polja 'tutorial' dodaje se objektu opsega za svaki kontroler.
Event Registration Guru99 Global Event
Korak 6) Stvorite stranice zvane Angular.html i Node.html. Za svaku stranicu provodimo korake u nastavku.
Ovi će koraci osigurati da se svi parovi ključ / vrijednost niza prikažu na svakoj stranici.
- Korištenje direktive ng-repeat za prolazak kroz svaki par ključ / vrijednost definiran u varijabli vodiča.
- Prikazivanje imena i opisa svakog para ključ / vrijednost.
- Kutni.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Ako kliknete na vezu AngularJS Topics, prikazat će se donji izlaz.
Izlaz jasno pokazuje da,
- Kada se klikne na vezu "Angular JS Topics", routeProvider koji smo deklarirali u našem kodu odlučuje da se ubrizga Angular.html kôd.
- Ovaj će se kôd ubrizgati u oznaku "div" koja sadrži direktivu ng-view. Također, sadržaj opisa tečaja dolazi iz "tutorial varijable" koja je bila dio opsega objekta definiranog u AngularController.
- Kada se klikne na teme Node.js, dogodit će se isti rezultat i prikazat će se prikaz tema Node.js.
- Također, primijetite da URL stranice ostaje isti, mijenja se samo ruta nakon oznake #. I ovo je koncept aplikacija na jednoj stranici. Oznaka #hash u URL-u separator je koji razdvaja rutu (koja je u našem slučaju 'Kutna' kao što je prikazano na gornjoj slici) i glavnu HTML stranicu (Sample.html)
Izrada zadane rute
Usmjeravanje u AngularJS također pruža mogućnost da ima zadanu rutu. Ovo je ruta koja se odabire ako se ne podudara sa postojećom rutom.
Zadana ruta kreira se dodavanjem sljedećeg uvjeta prilikom definiranja usluge $ routeProvider.
Sintaksa u nastavku jednostavno znači preusmjeriti na drugu stranicu ako se bilo koja od postojećih ruta ne podudara.
otherwise ({redirectTo: 'page'});
Upotrijebimo isti gornji primjer i dodajte zadanu rutu našoj usluzi $ routeProvider.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Objašnjenje koda:
- Ovdje koristimo isti kod kao i gore, s jedinom razlikom u tome što koristimo naredbu inače i opciju "redirectTo" da odredimo koji prikaz treba učitati ako nije navedena ruta. U našem slučaju želimo da se prikaže prikaz '/ Angular'.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Jasno možete vidjeti da je zadani prikaz kutni JS prikaz.
- To je zato što kada se stranica učita, ona prelazi na opciju 'inače' u funkciji $ routeProvider i učitava prikaz '/ Angular'.
Pristup parametrima s rute
Angular također pruža funkcionalnost za pružanje parametara tijekom usmjeravanja. Parametri se dodaju na kraj rute u URL-u, na primjer, http: //guru99/index.html#/Angular/1 . U ovom primjeru
- , http: //guru99/index.html naš je glavni URL prijave
- Simbol # razdvaja između URL-a glavne aplikacije i rute.
- Kutna je naša ruta
- I na kraju, '1' je parametar koji je dodan našoj ruti
Sintaksa izgleda parametara u URL-u prikazana je u nastavku:
HTMLPage # / route / parameter
Ovdje ćete primijetiti da se parametar prenosi nakon rute u URL-u.
Dakle, u našem primjeru, gore za teme Angular JS, možemo proslijediti parametre kao što je prikazano u nastavku
Sample.html # / Kutni / 1
Uzorak.html # / Kutni / 2
Uzorak.html # / Kutni / 3
Ovdje parametri 1, 2 i 3 zapravo mogu predstavljati topicid.
Pogledajmo detaljno kako to možemo provesti.
Korak 1) Dodajte sljedeći kôd u svoj prikaz
-
Dodajte tablicu da biste korisniku prikazali sve teme za tečaj Angular JS
-
Dodajte redak tablice za prikaz teme "Kontroleri". Za ovaj redak promijenite href oznaku u "Angular / 1", što znači da će, kada korisnik klikne ovu temu, parametar 1 biti proslijeđen u URL zajedno s rutom.
-
Dodajte redak tablice za prikaz teme "Modeli". Za ovaj redak promijenite href oznaku u "Angular / 2", što znači da će, kada korisnik klikne ovu temu, parametar 2 biti proslijeđen u URL zajedno s rutom.
-
Dodajte redak tablice za prikaz teme "Direktive". Za ovaj redak promijenite href oznaku u "Angular / 3", što znači da će, kada korisnik klikne ovu temu, parametar 3 biti proslijeđen u URL zajedno s rutom.
Korak 2) U uslužnu funkciju routeprovider dodajte: topicId da označite da bilo koji parametar prosljeđen u URL-u nakon rute treba biti dodijeljen varijabli topicId.
Korak 3) Dodajte potreban kôd na kontroler
- Svakako dodajte "$ routeParams" kao parametar prilikom definiranja funkcije kontrolera. Ovaj će parametar imati pristup svim parametrima rute proslijeđenim u URL-u.
- Parametar "routeParams" ima referencu na objekt topicId, koji se prosljeđuje kao parametar rute. Ovdje prilažemo varijablu '$ routeParams.topicId' našem objektu opsega kao varijablu '$ scope.tutotialid'. To se radi kako bi se u našem pogledu na nas mogli uputiti putem varijable 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 |
Korak 4) Dodajte izraz za prikaz tutorialid varijable na stranici Angular.html.
Anguler
{{tutorialid}}
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Na izlaznom zaslonu,
- Ako za prvu temu kliknete vezu Pojedinosti o temi, URL 1 dodaje se broj 1.
- Tada će taj broj usluga Angular.JS routeprovider uzeti kao argument "routeparam", a zatim će nam moći pristupiti naš kontrolor.
Korištenje usluge Angular $ route
Usluga $ route omogućuje vam pristup svojstvima rute. Usluga $ route dostupna je kao parametar kada je funkcija definirana u kontroleru. Općenita sintaksa načina na koji je parametar $ route dostupan iz kontrolera prikazana je u nastavku;
myApp.controller('MyController',function($scope,$route)
- myApp je angular.JS modul definiran za vaše aplikacije
- MyController je naziv upravljačkog sklopa definiranog za vašu aplikaciju
- Baš kao što je i varijabla $ scope dostupna za vašu aplikaciju, koja se koristi za prosljeđivanje podataka iz kontrolera u prikaz. Parametar $ route koristi se za pristup svojstvima rute.
Pogledajmo kako možemo koristiti uslugu $ route.
U ovom primjeru,
- Stvorit ćemo jednostavnu prilagođenu varijablu nazvanu "mytext", koja će sadržavati niz "Ovo je kutno".
- Ovu ćemo varijablu priložiti našoj ruti. A kasnije ćemo pristupiti ovom nizu iz našeg kontrolera pomoću usluge $ route, a zatim ćemo koristiti objektni opseg da to prikažemo u našem pogledu.
Pa, pogledajmo korake koje moramo poduzeti da bismo to postigli.
Korak 1) Dodajte prilagođeni par ključ / vrijednost ruti. Ovdje dodajemo ključ koji se naziva 'mytext' i dodjeljujemo mu vrijednost "This is angular".
Korak 2) Dodajte odgovarajući kôd na kontroler
- Dodajte parametar $ route funkciji kontrolera. Parametar $ route ključni je parametar definiran u kutu, koji omogućuje pristup svojstvima rute.
- Varijabli "mytext" koja je definirana u ruti može se pristupiti putem reference $ route.current. Zatim se dodjeljuje varijabli 'text' objekta opsega. Tada se iz prikaza može pristupiti tekstualnoj varijabli u skladu s tim.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Korak 3) Dodajte referencu na tekstualnu varijablu iz objekta scope kao izraz. Ovo će biti dodano na našu stranicu Angular.html kako je prikazano u nastavku.
To će dovesti do ubrizgavanja teksta "Ovo je kutno" u pogled. Izraz {{tutorialid}} jednak je onome iz prethodne teme i na njemu će se prikazati broj '1'.
Anguler
{{text}}
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Vidimo da se tekst "Ovo je kutno" također prikazuje kada kliknemo bilo koju od poveznica u tablici. ID teme također se prikazuje istovremeno s tekstom.
Omogućavanje HTML5 usmjeravanja
HTML5 usmjeravanje u osnovi se koristi za stvaranje čistog URL-a. To znači uklanjanje hashtaga s URL-a. Tako će se URL-ovi usmjeravanja, kada se koristi HTML5 usmjeravanje, pojaviti kao što je prikazano u nastavku
Uzorak.html / kutni / 1
Uzorak.html / kutni / 2
Uzorak.html / kutni / 3
Ovaj je koncept obično poznat kao predstavljanje lijepa URL-a korisniku.
Postoje 2 glavna koraka koja je potrebno poduzeti za HTML5 usmjeravanje.
- Konfiguriranje $ locationProvider
- Postavljanje naše baze za relativne veze
Pogledajmo detalje kako izvršiti gore spomenute korake u našem gornjem primjeru
Korak 1) Dodajte odgovarajući kôd u kutni modul
- Dodavanje konstante baseURL u aplikaciju - To je potrebno za HTML5 usmjeravanje kako bi aplikacija znala koje je osnovno mjesto aplikacije.
- Dodajte usluge $ locationProvider. Ova vam usluga omogućuje definiranje html5Mode.
- Postavite html5Mode usluge $ locationProvider na true.
Korak 2) Uklonite sve #tagove za veze ('Kutni / 1', 'Kutni / 2', 'Kutni / 3') da biste stvorili URL koji se lako čita.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Možete vidjeti da oznaka # nije tamo prilikom pristupa aplikaciji.
Sažetak
- Usmjeravanje se koristi za predstavljanje različitih pogleda korisniku na istoj web stranici. To je u osnovi koncept koji se koristi u jednostranim aplikacijama koje su implementirane za gotovo sve moderne web aplikacije
- Za angular.JS usmjeravanje može se postaviti zadana ruta. Koristi se za određivanje koji će zadani prikaz biti prikazan korisniku
- Parametri se mogu poslati na rutu putem URL-a kao parametri rute. Potom se tim parametrima pristupa pomoću parametra $ routeParams u kontroleru
- Usluga $ route može se koristiti za definiranje prilagođenih parova ključ / vrijednost na ruti kojima se potom može pristupiti iz pogleda
- HTML5 usmjeravanje koristi se za uklanjanje #tag iz URL-a usmjeravanja u kutnom obliku kako bi se oblikovao lijep URL