Predtým, ako začneme so smerovaním, urobme si rýchly prehľad o jednostránkových aplikáciách.
Čo sú to jednostránkové aplikácie?
Jednostránkové aplikácie alebo (SPA) sú webové aplikácie, ktoré načítajú jednu stránku HTML a dynamicky ju aktualizujú na základe interakcie používateľa s webovou aplikáciou.
Čo je smerovanie v AngularJS?
V AngularJS je smerovanie to, čo vám umožňuje vytvárať jednostránkové aplikácie.
- Trasy AngularJS vám umožňujú vytvárať rôzne adresy URL pre rôzny obsah vo vašej aplikácii.
- Trasy AngularJS umožňujú jednej zobraziť viac obsahu v závislosti od zvolenej trasy.
- Trasa je uvedená v adrese URL za znakom #.
Uveďme si príklad webu, ktorý je hostený prostredníctvom adresy URL http://example.com/index.html .
Na tejto stránke by ste hostili hlavnú stránku svojej aplikácie. Predpokladajme, že ak aplikácia organizovala udalosť a niekto chcel zistiť, aké sú rôzne udalosti na displeji, alebo si chcel pozrieť podrobnosti konkrétnej udalosti alebo udalosť odstrániť. Ak je v aplikácii s jednou stránkou povolené smerovanie, všetky tieto funkcie by boli dostupné prostredníctvom nasledujúcich odkazov
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Symbol # by sa používal spolu s rôznymi trasami (ShowEvent, DisplayEvent a DeleteEvent).
- Ak by teda používateľ chcel vidieť všetky udalosti, bol by presmerovaný na odkaz ( http://example.com/index.html#ShowEvent ), inak
- Ak by chceli vidieť iba konkrétnu udalosť, boli by presmerovaní na odkaz ( http://example.com/index.html#DisplayEvent ) alebo
- Ak by chceli odstrániť udalosť, presmerovali by ich na odkaz http://example.com/index.html#DeleteEvent .
Hlavná adresa URL zostáva rovnaká.
V tomto návode sa naučíte
- Pridanie uhlovej trasy ($ routeProvider)
- Vytvára sa predvolená trasa
- Prístup k parametrom z trasy
- Používanie služby trasy Angular $
- Povolenie smerovania HTML5
Pridanie uhlovej trasy ($ routeProvider)
Ako sme už hovorili skôr, trasy v AngularJS sa používajú na smerovanie používateľa do iného pohľadu na vašu aplikáciu. Toto smerovanie sa vykonáva na tej istej stránke HTML, aby mal používateľ skúsenosť, že stránku neopustil.
Aby bolo možné implementovať smerovanie, musia byť vo vašej aplikácii implementované nasledujúce hlavné kroky v akomkoľvek konkrétnom poradí.
- Odkaz na angular-route.js. Toto je súbor JavaScript vyvinutý spoločnosťou Google, ktorý má všetky funkcie smerovania. Toto je potrebné umiestniť do vašej aplikácie, aby mohla odkazovať na všetky hlavné moduly, ktoré sú potrebné na smerovanie.
-
Ďalším dôležitým krokom je pridanie závislosti do modulu ngRoute z vašej aplikácie. Táto závislosť je vyžadovaná, aby bolo možné v aplikácii použiť funkcie smerovania. Ak táto závislosť nie je pridaná, nebude možné v rámci aplikácie angular.JS použiť smerovanie.
Ďalej uvádzame všeobecnú syntax tohto vyhlásenia. Toto je iba bežné vyhlásenie modulu so zahrnutím kľúčového slova ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Ďalším krokom by bola konfigurácia vášho $ routeProvider. To je potrebné na poskytnutie rôznych trás vo vašej aplikácii.
Ďalej uvádzame všeobecnú syntax tohto tvrdenia, ktorá je veľmi samozrejmá. Uvádza sa v ňom iba to, že keď je vybratá príslušná cesta, pomocou trasy sa používateľovi zobrazí daný pohľad.
when(path, route)
- Odkazy na vašu trasu z vašej stránky HTML. Na svoju stránku HTML pridáte referenčné odkazy na rôzne dostupné trasy vo vašej aplikácii.
Trasa 1
- Nakoniec by to bolo zahrnutie smernice ng-view, ktorá by sa normálne nachádzala v značke div. Toto by sa použilo na vloženie obsahu pohľadu, keď sa zvolí príslušná trasa.
Teraz sa pozrime na príklad smerovania pomocou vyššie uvedených krokov.
V našom príklade
Používateľovi predstavíme 2 odkazy,
- Jedným z nich je zobrazenie tém pre kurz Angular JS a druhým kurz Node.js.
- Keď používateľ klikne na niektorý z odkazov, zobrazia sa témy daného kurzu.
Krok 1) Zahrňte súbor angular-route ako referenciu skriptu.
Tento súbor trasy je potrebný na to, aby sa využili funkcie viacerých ciest a zobrazení. Tento súbor je možné stiahnuť z webovej stránky angular.JS.
Krok 2) Pridajte značky href, ktoré budú predstavovať odkazy na „Angular JS Topics“ a „Node JS Topics“.
Krok 3) Pridajte značku div so smernicou ng-view, ktorá bude predstavovať pohľad.
Toto umožní vloženie zodpovedajúceho zobrazenia vždy, keď používateľ klikne na „Angular JS Topics“ alebo „Node JS Topics“.
Krok 4) Do značky skriptu pre AngularJS pridajte modul „ngRoute“ a službu „$ routeProvider“.
Vysvetlenie kódu:
- Prvým krokom je zabezpečiť zahrnutie „modulu ngRoute“. Keď je toto zavedené, Angular automaticky spracuje smerovanie vo vašej aplikácii. Modul ngRoute, ktorý vyvinula spoločnosť Google, má všetky funkcie, ktoré umožňujú smerovanie. Pridaním tohto modulu aplikácia automaticky pochopí všetky smerovacie príkazy.
- $ Routeprovider je služba, ktorá slúži na hranie na pozadí na počúvanie volaných trás. Keď teda používateľ klikne na odkaz, poskytovateľ trasy to zistí a potom sa rozhodne, ktorou cestou sa má vydať.
- Vytvorte jednu trasu pre Angular link - Tento blok znamená, že keď kliknete na Angular link, vložte súbor Angular.html a tiež použite radič „AngularController“ na spracovanie akejkoľvek obchodnej logiky.
- Vytvorte jednu cestu pre odkaz Uzol - Tento blok znamená, že po kliknutí na odkaz Uzol vložte súbor Node.html a na spracovanie akejkoľvek obchodnej logiky použite aj radič „NodeController“.
Krok 5) Ďalej je potrebné pridať radiče na spracovanie obchodnej logiky pre AngularController aj NodeController.
V každom kontroléri vytvárame pole párov kľúč - hodnota na ukladanie názvov tém a popisov pre každý kurz. Premenná poľa „tutorial“ sa pridá do objektu rozsahu pre každý radič.
Event Registration Guru99 Global Event
Krok 6) Vytvorte stránky s názvom Angular.html a Node.html. Pre každú stránku vykonávame nasledujúce kroky.
Tieto kroky zabezpečia, aby sa na každej stránke zobrazili všetky páry kľúč - hodnota poľa.
- Použitie direktívy ng-repeat na prechod cez každý pár kľúč - hodnota definovaný v premennej tutoriálu.
- Zobrazenie názvu a popisu každého páru kľúč - hodnota.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Ak kliknete na odkaz AngularJS Topics, zobrazí sa výstup uvedený nižšie.
Výstup jasne ukazuje, že
- Keď kliknete na odkaz „Angular JS Topics“, RouteProvider, ktorý sme deklarovali v našom kóde, rozhodne, že by sa mal vložiť kód Angular.html.
- Tento kód bude vložený do značky „div“, ktorá obsahuje smernicu ng-view. Obsah popisu kurzu tiež pochádza z „premennej tutoriálu“, ktorá bola súčasťou objektu rozsahu definovaného v AngularController.
- Keď kliknete na témy Node.js, dôjde k rovnakému výsledku a prejaví sa zobrazenie tém Node.js.
- Upozorňujeme tiež, že adresa URL stránky zostáva rovnaká, mení sa iba trasa za značkou #. A toto je koncept jednostránkových aplikácií. Značka #hash v adrese URL je oddeľovač, ktorý oddeľuje cestu (ktorá je v našom prípade „hranatá“, ako je to znázornené na obrázku vyššie) a hlavnú stránku HTML (Sample.html)
Vytvára sa predvolená trasa
Smerovanie v AngularJS tiež poskytuje zariadenie predvolenú trasu. Toto je trasa, ktorá sa vyberie, ak pre existujúcu trasu neexistuje zhoda.
Predvolená trasa sa vytvorí pridaním nasledujúcej podmienky pri definovaní služby $ routeProvider.
Nižšie uvedená syntax znamená iba presmerovanie na inú stránku, ak sa niektorá z existujúcich trás nezhoduje.
otherwise ({redirectTo: 'page'});
Použime ten istý príklad vyššie a pridajme predvolenú trasu do našej služby $ routeProvider.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Vysvetlenie kódu:
- Tu používame rovnaký kód ako vyššie, s jediným rozdielom, že používame príkaz else a možnosť „redirectTo“ na určenie toho, ktoré zobrazenie sa má načítať, ak nie je zadaná žiadna trasa. V našom prípade chceme, aby sa zobrazil pohľad „/ Angular“.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Môžete jasne vidieť, že predvoleným zobrazeným zobrazením je uhlové zobrazenie JS.
- Je to preto, že keď sa stránka načíta, prejde na voľbu „inak“ vo funkcii $ routeProvider a načíta sa zobrazenie „/ Angular“.
Prístup k parametrom z trasy
Angular tiež poskytuje funkcie na poskytovanie parametrov počas smerovania. Parametre sa pridávajú na koniec trasy v adrese URL, napríklad http: //guru99/index.html#/Angular/1 . V tomto príklade
- , http: //guru99/index.html je naša hlavná adresa URL aplikácie
- Symbol # je oddeľovač medzi hlavnou adresou URL aplikácie a trasou.
- Uhlová je naša trasa
- A nakoniec „1“ je parameter, ktorý sa pridáva na našu trasu
Syntax toho, ako vyzerajú parametre v adrese URL, je uvedená nižšie:
HTMLPage # / route / parameter
Tu si všimnete, že parameter je odovzdaný po trase v URL.
Takže v našom príklade vyššie pre témy Angular JS môžeme odovzdať parameter, ako je uvedené nižšie
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Tu môžu parametre 1, 2 a 3 skutočne predstavovať topicid.
Pozrime sa podrobne, ako to môžeme implementovať.
Krok 1) Pridajte nasledujúci kód do svojho zobrazenia
-
Pridajte tabuľku, ktorá používateľovi zobrazí všetky témy kurzu Angular JS
-
Pridajte riadok tabuľky, ktorá zobrazuje tému „Ovládače“. V tomto riadku zmeňte značku href na „Angular / 1“, čo znamená, že keď používateľ klikne na túto tému, parameter 1 sa odošle do adresy URL spolu s trasou.
-
Pridajte riadok tabuľky, ktorá zobrazuje tému „Modely“. V tomto riadku zmeňte značku href na „Angular / 2“, čo znamená, že keď používateľ klikne na túto tému, parameter 2 sa odošle do adresy URL spolu s trasou.
-
Pridajte riadok tabuľky, ktorá zobrazuje tému „Smernice“. V tomto riadku zmeňte značku href na „Angular / 3“, čo znamená, že keď používateľ klikne na túto tému, parameter 3 sa odošle do adresy URL spolu s trasou.
Krok 2) Do funkcie služby routeprovider pridajte: topicId, čím naznačujete, že akýkoľvek parameter odovzdaný v URL po trase by mal byť priradený k premennej topicId.
Krok 3) Pridajte potrebný kód do ovládača
- Pri definovaní funkcie regulátora nezabudnite najskôr pridať parameter „$ routeParams“. Tento parameter bude mať prístup ku všetkým parametrom trasy odovzdaným v adrese URL.
- Parameter „routeParams“ má odkaz na objekt topicId, ktorý sa odovzdáva ako parameter trasy. Tu pripájame k nášmu objektu rozsahu premennú „$ routeParams.topicId“ ako premennú „$ scope.tutotialid“. Robíme to tak, aby sa na ňu dalo v našom zobrazení odkazovať prostredníctvom premennej 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 |
Krok 4) Pridajte výraz na zobrazenie premennej tutorialid na stránke Angular.html.
Anguler
{{tutorialid}}
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Na výstupnej obrazovke
- Ak kliknete na odkaz Podrobnosti témy pri prvej téme, k adrese URL sa pripojí číslo 1.
- Toto číslo bude potom službou Angular.JS routeprovider brané ako argument „routeparam“ a bude k nemu potom prístupné našim kontrolórom.
Používanie služby trasy Angular $
Služba $ route umožňuje prístup k vlastnostiam trasy. Služba $ route je k dispozícii ako parameter, keď je funkcia definovaná v ovládači. Všeobecná syntax toho, ako je parameter $ route k dispozícii z ovládača, je zobrazený nižšie;
myApp.controller('MyController',function($scope,$route)
- myApp je modul angular.JS definovaný pre vaše aplikácie
- MyController je názov ovládača definovaného pre vašu aplikáciu
- Rovnako ako je pre vašu aplikáciu sprístupnená premenná $ scope, ktorá sa používa na prenos informácií z radiča do pohľadu. Parameter $ route sa používa na prístup k vlastnostiam trasy.
Poďme sa pozrieť na to, ako môžeme využiť službu $ route.
V tomto príklade
- Chystáme sa vytvoriť jednoduchú vlastnú premennú s názvom „mytext“, ktorá bude obsahovať reťazec „This is angular“.
- Túto premennú pripojíme k našej trase. A neskôr budeme k tomuto reťazcu pristupovať z nášho kontrolóra pomocou služby $ route a následne ho pomocou objektu scope zobrazíme z nášho pohľadu.
Pozrime sa teda na kroky, ktoré musíme podniknúť, aby sme to dosiahli.
Krok 1) Pridajte na trasu vlastný pár kľúč - hodnota. Tu pridávame kľúč s názvom „mytext“ a priraďujeme mu hodnotu „Toto je uhlové.“
Krok 2) Pridajte príslušný kód do kontroléra
- Pridajte parameter $ route do funkcie radiča. Parameter $ route je kľúčový parameter definovaný v uhle, ktorý umožňuje prístup k vlastnostiam trasy.
- K premennej „mytext“, ktorá bola definovaná v trase, sa dá dostať cez referenciu $ route.current. Toto sa potom priradí k premennej „text“ v objekte rozsahu. K textovej premennej potom možno podľa zobrazenia získať prístup.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Krok 3) Pridajte odkaz na textovú premennú z objektu rozsahu ako výraz. Toto bude pridané na našu stránku Angular.html, ako je uvedené nižšie.
To spôsobí, že sa do zobrazenia vloží text „Toto je uhlové“. Výraz {{tutorialid}} je rovnaký ako výraz uvedený v predchádzajúcej téme, čím sa zobrazí číslo „1“.
Anguler
{{text}}
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Vidíme, že text „Toto je uhlové“ sa tiež zobrazí, keď klikneme na ktorýkoľvek z odkazov v tabuľke. Identifikátor témy sa tiež zobrazí súčasne s textom.
Povolenie smerovania HTML5
Smerovanie HTML5 sa v zásade používa na vytvorenie čistej adresy URL. Znamená to odstránenie hashtagu z adresy URL. Takže ak sa použije smerovanie HTML5, smerovacie adresy URL sa zobrazia tak, ako je to uvedené nižšie
Sample.html / Angular / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Tento koncept je bežne známy ako prezentácia peknej adresy URL používateľovi.
Pri smerovaní HTML5 je potrebné vykonať dva hlavné kroky.
- Konfigurácia $ locationProvider
- Nastavujeme našu základňu pre relatívne odkazy
Pozrime sa na podrobnosti, ako vykonať vyššie uvedené kroky v našom príklade vyššie
Krok 1) Pridajte príslušný kód do uhlového modulu
- Pridajte do aplikácie konštantu baseURL - je to potrebné pri smerovaní HTML5, aby aplikácia vedela, aké je základné umiestnenie aplikácie.
- Pridajte služby $ locationProvider. Táto služba umožňuje definovať html5Mode.
- Nastavte html5Mode služby $ locationProvider na hodnotu true.
Krok 2) Odstráňte všetky # značky pre odkazy („Angular / 1“, „Angular / 2“, „Angular / 3“), aby ste vytvorili ľahko čitateľnú adresu URL.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Pri prístupe k aplikácii vidíte, že značka # tam nie je.
Zhrnutie
- Smerovanie sa používa na predstavenie rôznych pohľadov používateľovi na tej istej webovej stránke. Toto je v podstate koncept používaný v jednostránkových aplikáciách, ktoré sú implementované pre takmer všetky moderné webové aplikácie
- Pre smerovanie angular.JS je možné nastaviť predvolenú trasu. Používa sa na určenie, aké bude predvolené zobrazenie, ktoré sa zobrazí používateľovi
- Parametre je možné odovzdať na trasu prostredníctvom adresy URL ako parametre trasy. Tieto parametre sú následne prístupné pomocou parametra $ routeParams v radiči
- Službu $ route je možné použiť na definovanie vlastných párov kľúč - hodnota na trase, ku ktorým je možné následne pristupovať z pohľadu
- Smerovanie HTML5 sa používa na odstránenie # tagu zo smerovacej adresy URL v uhle, aby vytvoril peknú adresu URL