Než začneme s směrováním, pojďme mít rychlý přehled o jednostránkových aplikacích.
Co jsou jednostránkové aplikace?
Single page applications or (SPAs) are web applications that load a single HTML page and dynamically update the page based on the user interaction with the web application.
Co je směrování v AngularJS?
V AngularJS vám směrování umožňuje vytvářet jednostránkové aplikace.
- Trasy AngularJS umožňují vytvářet různé adresy URL pro různý obsah ve vaší aplikaci.
- Trasy AngularJS umožňují jednomu zobrazit více obsahu v závislosti na zvolené trase.
- Trasa je uvedena v adrese URL za znaménkem #.
Vezměme si příklad webu, který je hostován prostřednictvím adresy URL http://example.com/index.html .
Na této stránce byste hostili hlavní stránku vaší aplikace. Předpokládejme, že pokud aplikace organizovala událost a někdo chtěl vidět, jaké jsou různé zobrazené události, nebo chtěl zobrazit podrobnosti o konkrétní události nebo odstranit událost. V jedné stránce aplikace, pokud je povoleno směrování, všechny tyto funkce by byly k dispozici prostřednictvím následujících odkazů
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Symbol # by byl použit spolu s různými trasami (ShowEvent, DisplayEvent a DeleteEvent).
- Pokud by tedy uživatel chtěl zobrazit všechny Události, byl by přesměrován na odkaz ( http://example.com/index.html#ShowEvent ), jinak
- Pokud by chtěli vidět jen určitou událost, byli by přesměrováni na odkaz ( http://example.com/index.html#DisplayEvent ) nebo
- Pokud by chtěli událost smazat, byli by přesměrováni na odkaz http://example.com/index.html#DeleteEvent .
Hlavní adresa URL zůstává stejná.
V tomto výukovém programu se naučíte
- Přidání úhlové trasy ($ routeProvider)
- Vytváření výchozí trasy
- Přístup k parametrům z trasy
- Používání služby trasy Angular $
- Povolení směrování HTML5
Přidání úhlové trasy ($ routeProvider)
Jak jsme již diskutovali dříve, trasy v AngularJS se používají k nasměrování uživatele na jiné zobrazení vaší aplikace. A toto směrování se provádí na stejné stránce HTML, aby měl uživatel zkušenost, že stránku neopustil.
Aby bylo možné implementovat směrování, musí být ve vaší aplikaci implementovány následující hlavní kroky v jakémkoli konkrétním pořadí.
- Odkaz na angular-route.js. Toto je soubor JavaScript vyvinutý společností Google, který má všechny funkce směrování. To je třeba umístit do vaší aplikace, aby mohla odkazovat na všechny hlavní moduly, které jsou vyžadovány pro směrování.
-
Dalším důležitým krokem je přidání závislosti do modulu ngRoute z vaší aplikace. Tato závislost je vyžadována, aby bylo možné v aplikaci použít funkce směrování. Pokud tato závislost není přidána, nebude možné v rámci aplikace angular.JS použít směrování.
Níže je uvedena obecná syntaxe tohoto příkazu. Toto je jen normální deklarace modulu se zahrnutím klíčového slova ngRoute.
var module = angular.module("sampleApp", ['ngRoute']);
- Dalším krokem by byla konfigurace vašeho $ routeProvider. To je vyžadováno pro poskytnutí různých tras ve vaší aplikaci.
Níže je uvedena obecná syntaxe tohoto prohlášení, která je velmi vysvětlující. Pouze uvádí, že když je vybrána příslušná cesta, použijte trasu k zobrazení daného pohledu uživateli.
when(path, route)
- Odkazy na vaši trasu z vaší stránky HTML. Na stránku HTML přidáte referenční odkazy na různé dostupné trasy ve vaší aplikaci.
Trasa 1
- Nakonec by bylo zahrnutí směrnice ng-view, která by normálně byla ve značce div. To by se použilo k vložení obsahu pohledu, když je zvolena příslušná trasa.
Nyní se podívejme na příklad směrování pomocí výše uvedených kroků.
V našem příkladu
Uživateli představíme 2 odkazy,
- Jedním z nich je zobrazení témat pro kurz Angular JS a druhým je kurz Node.js.
- Když uživatel klikne na některý z odkazů, zobrazí se témata daného kurzu.
Krok 1) Zahrňte soubor úhlové trasy jako odkaz na skript.
Tento soubor trasy je nezbytný, aby bylo možné využívat funkce více tras a zobrazení. Tento soubor lze stáhnout z webu angular.JS.
Krok 2) Přidejte značky href, které budou představovat odkazy na „Angular JS Topics“ a „Node JS Topics“.
Krok 3) Přidejte značku div se směrnicí ng-view, která bude představovat pohled.
To umožní, aby byl odpovídající pohled vložen, kdykoli uživatel klikne na „Angular JS Topics“ nebo „Node JS Topics“.
Krok 4) Ve značce skriptu pro AngularJS přidejte modul „ngRoute“ a službu „$ routeProvider“.
Vysvětlení kódu:
- Prvním krokem je zajistit zahrnutí "modulu ngRoute." Když je toto na místě, Angular automaticky zpracuje směrování ve vaší aplikaci. Modul ngRoute vyvinutý společností Google má všechny funkce, které umožňují směrování. Přidáním tohoto modulu aplikace automaticky pochopí všechny směrovací příkazy.
- $ Routeprovider je služba, kterou úhlové používá k poslechu na pozadí volaných cest. Když tedy uživatel klikne na odkaz, poskytovatel trasy to zjistí a poté se rozhodne, kterou cestou se vydá.
- Vytvořit jednu trasu pro úhlový odkaz - Tento blok znamená, že když kliknete na úhlový odkaz, vložte soubor Angular.html a také použijte Controller 'AngularController' ke zpracování jakékoli obchodní logiky.
- Vytvořit jednu cestu pro odkaz Node - Tento blok znamená, že když kliknete na odkaz Node, vložte soubor Node.html a také použijte Controller 'NodeController' ke zpracování jakékoli obchodní logiky.
Krok 5) Dalším krokem je přidání řadičů pro zpracování obchodní logiky pro AngularController a NodeController.
V každém kontroleru vytváříme řadu párů klíč – hodnota pro ukládání názvů témat a popisů pro každý kurz. Proměnná pole 'tutorial' je přidána do objektu oboru pro každý řadič.
Event Registration Guru99 Global Event
Krok 6) Vytvořte stránky s názvem Angular.html a Node.html. U každé stránky provádíme níže uvedené kroky.
Tyto kroky zajistí, že se na každé stránce zobrazí všechny páry klíč – hodnota pole.
- Pomocí direktivy ng-repeat projít každý pár klíč – hodnota definovaný v proměnné tutoriálu.
- Zobrazení názvu a popisu každého páru klíč – hodnota.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Pokud kliknete na odkaz AngularJS Topics, zobrazí se níže uvedený výstup.
Výstup jasně ukazuje, že
- Když kliknete na odkaz „Angular JS Topics“, routeProvider, který jsme deklarovali v našem kódu, rozhodne, že by měl být vložen kód Angular.html.
- Tento kód bude vložen do značky „div“, která obsahuje směrnici ng-view. Obsah popisu kurzu také pochází z „proměnné tutoriálu“, která byla součástí objektu oboru definovaného v AngularController.
- Když kliknete na témata Node.js, dojde ke stejnému výsledku a projeví se zobrazení témat Node.js.
- Všimněte si také, že adresa URL stránky zůstává stejná, mění se pouze trasa za značkou #. A toto je koncept jednostránkových aplikací. Značka #hash v adrese URL je oddělovač, který odděluje trasu (která je v našem případě „úhlová“, jak je znázorněno na obrázku výše) a hlavní stránku HTML (Sample.html)
Vytváření výchozí trasy
Směrování v AngularJS také poskytuje možnost mít výchozí trasu. Toto je trasa, která se vybere, pokud neexistuje shoda pro stávající trasu.
Výchozí trasa je vytvořena přidáním následující podmínky při definování služby $ routeProvider.
Níže uvedená syntaxe jednoduše znamená přesměrování na jinou stránku, pokud se některá ze stávajících cest neshoduje.
otherwise ({redirectTo: 'page'});
Použijme stejný příklad výše a přidejme výchozí trasu do naší služby $ routeProvider.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Vysvětlení kódu:
- Zde používáme stejný kód jako výše, s jediným rozdílem je, že používáme příkaz else a možnost „redirectTo“ k určení, které zobrazení se má načíst, pokud není zadána žádná trasa. V našem případě chceme, aby se zobrazil '/ Úhlový' pohled.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu
- Můžete jasně vidět, že výchozí zobrazený pohled je úhlový pohled JS.
- Důvodem je to, že když se stránka načte, přejde na možnost „jinak“ ve funkci $ routeProvider a načte pohled „/ Úhlové“.
Přístup k parametrům z trasy
Angular také poskytuje funkce pro poskytování parametrů během směrování. Parametry se přidají na konec trasy v adrese URL, například http: //guru99/index.html#/Angular/1 . V tomto příkladu
- , http: //guru99/index.html je naše hlavní adresa URL aplikace
- Symbol # je oddělovač mezi hlavní adresou URL aplikace a trasou.
- Úhlová je naše trasa
- A konečně „1“ je parametr, který je přidán na naši trasu
Syntaxe toho, jak parametry vypadají v adrese URL, je uvedena níže:
HTML stránka # / trasa / parametr
Zde si všimnete, že parametr je předán po trase v URL.
Takže v našem příkladu výše pro témata Angular JS můžeme předat parametr, jak je znázorněno níže
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Zde parametry 1, 2 a 3 mohou skutečně představovat topicid.
Podívejme se podrobně na to, jak to můžeme implementovat.
Krok 1) Přidejte do svého zobrazení následující kód
-
Přidejte tabulku, která uživateli zobrazí všechna témata kurzu Angular JS
-
Přidejte řádek tabulky pro zobrazení tématu „Řadiče“. V tomto řádku změňte značku href na „Úhlová / 1“, což znamená, že když uživatel klikne na toto téma, parametr 1 bude předán v adrese URL spolu s trasou.
-
Přidejte řádek tabulky pro zobrazení tématu „Modely“. V tomto řádku změňte značku href na „Angular / 2“, což znamená, že když uživatel klikne na toto téma, bude parametr 2 předán v adrese URL spolu s trasou.
-
Přidejte řádek tabulky pro zobrazení tématu „Směrnice“. V tomto řádku změňte značku href na „Angular / 3“, což znamená, že když uživatel klikne na toto téma, bude parametr 3 předán v adrese URL spolu s trasou.
Krok 2) Do funkce služby routeprovider přidejte: topicId k označení, že jakýkoli parametr předaný v URL po trase by měl být přiřazen k proměnné topicId.
Krok 3) Přidejte potřebný kód do ovladače
- Při definování funkce ovladače nezapomeňte nejprve přidat parametr „$ routeParams“. Tento parametr bude mít přístup ke všem parametrům trasy předaným v adrese URL.
- Parametr „routeParams“ má odkaz na topicId objekt, který je předán jako parametr trasy. Zde připojujeme proměnnou '$ routeParams.topicId' k našemu objektu oboru jako proměnnou '$ scope.tutotialid'. Děje se tak, aby na něj bylo možné v našem pohledu odkazovat prostřednictvím proměnné 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) Přidejte výraz k zobrazení proměnné tutorialid na stránce Angular.html.
Anguler
{{tutorialid}}
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Na výstupní obrazovce
- Pokud kliknete na odkaz Podrobnosti tématu u prvního tématu, číslo 1 se připojí k adrese URL.
- Toto číslo bude poté považováno za argument „routeparam“ službou Angular.JS routeprovider a poté k němu bude mít přístup náš správce.
Používání služby trasy Angular $
Služba $ route vám umožňuje přístup k vlastnostem trasy. Služba $ route je k dispozici jako parametr, když je funkce definována v ovladači. Níže je uvedena obecná syntaxe toho, jak je parametr $ route dostupný z ovladače;
myApp.controller('MyController',function($scope,$route)
- myApp je modul angular.JS definovaný pro vaše aplikace
- MyController je název kontroleru definovaného pro vaši aplikaci
- Stejně jako je pro vaši aplikaci zpřístupněna proměnná $ scope, která slouží k předávání informací z řadiče do zobrazení. Parametr $ route se používá pro přístup k vlastnostem trasy.
Pojďme se podívat, jak můžeme použít službu $ route.
V tomto příkladu
- Chystáme se vytvořit jednoduchou vlastní proměnnou nazvanou „mytext“, která bude obsahovat řetězec „This is angular.“
- Tuto proměnnou připojíme k naší trase. A později budeme přistupovat k tomuto řetězci z našeho řadiče pomocí služby $ route a následně jej pomocí objektu oboru zobrazíme v našem pohledu.
Podívejme se tedy na kroky, které musíme provést, abychom toho dosáhli.
Krok 1) Přidejte na trasu vlastní pár klíč – hodnota. Zde přidáváme klíč s názvem 'mytext' a přiřazujeme mu hodnotu "This is angular."
Krok 2) Přidejte příslušný kód do ovladače
- Přidejte do funkce ovladače parametr $ route. Parametr $ route je klíčový parametr definovaný v úhlu, který umožňuje přístup k vlastnostem trasy.
- Proměnná "mytext", která byla definována v trase, je přístupná prostřednictvím odkazu $ route.current. To je poté přiřazeno proměnné „text“ objektu oboru. K proměnné textu lze poté odpovídajícím způsobem přistupovat z pohledu.
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) Přidejte odkaz na textovou proměnnou z objektu oboru jako výraz. To bude přidáno na naši stránku Angular.html, jak je uvedeno níže.
To způsobí, že do zobrazení bude vložen text „Toto je úhlové“. Výraz {{tutorialid}} je stejný jako v předchozím tématu a zobrazí číslo '1'.
Anguler
{{text}}
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu
- Vidíme, že text „Toto je úhlové“ se také zobrazí, když klikneme na některý z odkazů v tabulce. ID tématu se také zobrazí současně s textem.
Povolení směrování HTML5
Směrování HTML5 se používá v zásadě k vytvoření čisté adresy URL. Znamená to odstranění hashtagu z adresy URL. Směrovací adresy URL by se tedy při použití směrování HTML5 zobrazovaly, jak je uvedeno níže
Sample.html / Angular / 1
Sample.html / Angular / 2
Sample.html / Angular / 3
Tento koncept je běžně známý jako prezentace hezké adresy URL uživateli.
Při směrování HTML5 je třeba provést 2 hlavní kroky.
- Konfigurace $ locationProvider
- Nastavení naší základny pro relativní odkazy
Podívejme se na detail, jak provést výše uvedené kroky v našem příkladu výše
Krok 1) Přidejte příslušný kód do úhlového modulu
- Přidejte do aplikace konstantu baseURL - to je vyžadováno pro směrování HTML5, aby aplikace věděla, jaké je základní umístění aplikace.
- Přidejte služby $ locationProvider. Tato služba umožňuje definovat html5Mode.
- Nastavte html5Mode služby $ locationProvider na hodnotu true.
Krok 2) Odstraňte všechny # tagy odkazů („Angular / 1“, „Angular / 2“, „Angular / 3“) a vytvořte snadno čitelnou 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 |
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu
- Při přístupu k aplikaci vidíte, že značka # není.
souhrn
- Směrování se používá k prezentaci různých pohledů uživateli na stejné webové stránce. Toto je v zásadě koncept používaný v jednostránkových aplikacích, které jsou implementovány téměř pro všechny moderní webové aplikace
- Pro směrování angular.JS lze nastavit výchozí trasu. Používá se k určení, jaké bude výchozí zobrazení, které se zobrazí uživateli
- Parametry lze předat na trasu prostřednictvím adresy URL jako parametry trasy. Tyto parametry jsou následně přístupné pomocí parametru $ routeParams v řadiči
- Službu $ route lze použít k definování vlastních párů klíč – hodnota na trase, ke kterým lze následně přistupovat z pohledu
- Směrování HTML5 se používá k odstranění # tagu ze směrování adresy URL v úhlu k vytvoření hezké adresy URL