X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

00:17 - 00:18Vitajte v novom videu
00:19 - 00:22v predchádzajúcej časti sme si ukázali základy routeru
00:22 - 00:24a navigáciu medzi komponentami
00:25 - 00:28Dnes budeme pokračovať tam kde sme skončili
00:28 - 00:31a ukážeme si pokročilejšie techniky práce s routerom
00:32 - 00:35Ukážeme si ako sa navigovať vo vnútri komponentu
00:36 - 00:41Naučíme sa ako pracovať s viacerými router-outletmi naraz ak sa nachádzajú v jednom komponente
00:41 - 00:43Tiež si vytvoríme funkcionalitu
00:43 - 00:47ktorá obmedzí prístup do konkrétnej URL len pre určitých užívateľov
00:48 - 00:50a nakoniec si ukážeme ako preberať z URL
00:50 - 00:52dynamické parametre
00:52 - 00:54pre potreby našeho komponentu
00:55 - 00:56Poďme na to
01:01 - 01:04Teraz si ukážeme ako sa pomocou routera navigovať
01:04 - 01:06z vnútra komponentu
01:10 - 01:14Otvoríme si náš app.component.ts
01:14 - 01:15a importneme si Router
01:22 - 01:25Ďalej vytvorme konštruktor a náš router
01:25 - 01:28cez neho poskytnime našemu komponentu
01:34 - 01:36V našom komponente si vytvorme metódu
01:36 - 01:38navigateMeTo()
01:38 - 01:41ktorá bude mať parameter routerName
01:45 - 01:48A pomocou metódy this.router.navigate()
01:48 - 01:52vieme z vnútra komponentu redirektovať na ľubovoľnú cestu
01:53 - 01:56V našom prípade to bude dynamická hodnota
01:56 - 01:58v premennej routeName
02:03 - 02:06Pre ukážku priraďme našu metódu navigateMeTo()
02:06 - 02:07do buttonu
02:39 - 02:41Ako vidíte dostali sme error
02:41 - 02:45to preto, že metóda this.router.navigate() očakáva pole
02:45 - 02:47pretože okrem názvu cesty
02:47 - 02:50môžete zadávať ďalšie parametre dynamicky
02:51 - 02:53To si ukážeme neskôr. Opravíme to tak, že medzi
02:53 - 02:56oblé zátvorky dáme ešte hranaté
03:02 - 03:05Poďme si ukázať spôsob ako obmedziť prístup
03:05 - 03:08určitých užívateľov ku konkrétnemu komponentu
03:08 - 03:11a konkrétnej URL adrese
03:11 - 03:15Vytvoríme si tzv. Guard ktorý bude obsahovať verifikačnú logiku
03:15 - 03:19ktorá rozhodne či užívateĺa pustí ďalej alebo nie
03:22 - 03:24Otvorme si terminál a pomocou príkazu
03:24 - 03:27"ng g guard"vytvorme v adresári
03:27 - 03:30"guards" LoggedIn classu
03:40 - 03:43Keď si pozrieme jej obsah zistíme, že obsahuje
03:43 - 03:46jednu funkciu ktorá sa volá CanActivate
03:46 - 03:49a je tam štandardne vrátená hodnota TRUE
03:49 - 03:51Vlastne už teraz sa tam nachádza všetko čo potrebujeme
03:51 - 03:55Ak má mať užívateľ prístup do našeho komponentu
03:55 - 03:58a konkrétnej cesty mala by táto funkcia
03:58 - 03:59vrátiť TRUE
03:59 - 04:02Takže do vnútra tela funkcie CanActivate
04:03 - 04:05dáme našu verifikačnú logiku
04:05 - 04:08Tým, že sme si ešte neukázali čo sú servisy
04:08 - 04:13tak tam vložím jendoduchý IF ktorý bude kontrolovať hodnotu z localStorage
04:15 - 04:17Naša verifikačná logika teda bude
04:17 - 04:19Ak hodnota premennej "logged"
04:19 - 04:21z localStorage
04:21 - 04:23sa bude rovnať TRUE
04:24 - 04:27tak sa nič nestane a užívateľ si môže pozerať náš komponent
04:27 - 04:29na konkrétnej ceste
04:29 - 04:32Inak sa zobrazí hláška, že užívateľ nemá prístup
04:32 - 04:35Pre túto potrebu si vytvoríme ďalší komponent
04:35 - 04:37s názvom AccessDenied
05:13 - 05:16Tento nový komponent si pridáme do našich "routes"
05:17 - 05:19pod názvom "noaccess"
05:37 - 05:40Nastavíme mu ešte CSS štýl
06:24 - 06:26Do našeho LoggedIn guardu si importnime
06:26 - 06:28Router z @angular/router
06:28 - 06:31vytvorme konštruktor a poskytnime tento router
06:31 - 06:33našemu Guardu
06:39 - 06:43Tento importovaný router potom použijeme v podmienke ELSE
06:43 - 06:46ak užívateľ nemá mať prístup k danému komponentu
06:46 - 06:50Použiejeme funkciu this.router.navigateTo()
06:50 - 06:51a ako hodnotu dáme array
06:52 - 06:54s cestou k "noaccess"
07:09 - 07:12K našej ceste simple-routing pridáme
07:12 - 07:14paraemter CanActivate
07:14 - 07:16v ktorom bude Array
07:16 - 07:19a importnime si náš vytvorený Guard
07:19 - 07:20LoggedIn
07:34 - 07:37Ups, dostali sme error ale to preto, že som spravil preklep
07:37 - 07:40pri redirectovaní do "noaccess"
07:40 - 07:43Správne to má byť this.router.navigate()
07:55 - 07:58Po kliku na router button sme dostali error
07:58 - 08:01No provider for LoggedInGuard
08:01 - 08:04Do našeho hlavného modulu si musíme
08:04 - 08:07do sekcie providers pridať náš novovytvorený Guard
08:07 - 08:09Poďme to opraviť
08:24 - 08:27Poďme si to otestovať. Po zadaní
08:27 - 08:30URL adresy "simple-routing" a napríklad "orange"
08:30 - 08:33ma automaticky redirektuje na "AccessDenied"
08:33 - 08:35pretože nie je splnená naša podmienka
08:35 - 08:39Nemám uloženú premennú localStorage["logged"]
08:39 - 08:41ktorá sa rovná TRUE, tak si ju poďme pridať
08:48 - 08:51Vidíte?! Náš loggedInGuard
08:51 - 08:54vyhodnotil podmienku localStorage["logged"] že sa rovná TRUE
08:54 - 08:57a vráti teda TRUE a ja mám prístup ku všetkým
08:57 - 09:00komponentom na ktoré sa vzťahuje CanActivate
09:01 - 09:03v ktorom je LoggedInGuard
09:03 - 09:07Takýmto spôsobom viete obmedziť cestu k ľubovoľným komponentom a ľubovoľným cestám
09:08 - 09:11CanActivate očakáva pole hodnôt
09:11 - 09:13takže nie ste limitovaní len jedným guardom
09:13 - 09:15môžete ich použiť ľubovoľne veľa
09:17 - 09:20Guard obsahujú ale viaceré interface
09:20 - 09:21okrem CanActivate
09:22 - 09:25kde validujeme prístup k našej konkrétnej ceste
09:25 - 09:27ale existujú aj ďalšie
09:27 - 09:30Napríklad CanActivateChild
09:30 - 09:34kde môžeme validovať prístup do CHILD cesty
09:34 - 09:35teda za lomítkom
09:35 - 09:36V CanDeactivate
09:37 - 09:40tu môžeme validovať či užívateľ môže
09:40 - 09:43opustiť danú cestu, vhodné napríklad v prípade
09:43 - 09:45kedy neuložil svoje dáta a
09:45 - 09:47chce odísť z komponentu
09:48 - 09:49Resolve
09:50 - 09:52ideálne miesto ak potrebujem spracovať
09:52 - 09:56nejaké dáta ešte predtým ako sa užívateľ dostane na konkrétnu URL
09:58 - 09:59CanLoad
10:00 - 10:03dodatočné miesto pre verifikáciu
10:03 - 10:06napríklad v prípade, že nejaké moduly
10:06 - 10:08načítavame asynchrónne
10:10 - 10:13Poďme si teraz ukázať ako pracovať s viacerými router-outletmi
10:13 - 10:15ktoré sa nachádzajú v jednom komponente
10:16 - 10:18Vytvorme si nový komponent
10:18 - 10:20MultipleOutlets
10:49 - 10:51A do našeho komponentu pridajme dva
10:51 - 10:53router-outlety
10:54 - 10:56Pridajme im parameter "name"
10:56 - 10:59a jeden nazvime outlet-left
10:59 - 11:02a druhý outlet-right
11:09 - 11:13Pomocou CSS im definujme určitý CSS štýl
11:13 - 11:16a dajme ich vedľa seba do stĺpcov
11:54 - 11:57V našich routes si vytvorme novú cestu
11:57 - 11:59two-outlets
11:59 - 12:04a priraďme ju našemu novému komponentu MultipleOutlets
12:29 - 12:33Naše dva outlety sú na mieste ale zatiaľ nezobrazujú žiadny obsah
12:33 - 12:36Poďme im pridať cesty ktoré môžu zobraziť
12:40 - 12:42Pomocou children: [ ]
12:42 - 12:45vytvorme ďalšie dve cesty BLUE a ORANGE
12:45 - 12:46Dôležitá vec!
12:47 - 12:51Ak máte v jednom komponente viaceré router-outlety, musíte definovať
12:51 - 12:54ktorá cesta sa môže zobraziť v ktorom outlete
12:54 - 12:56My chceme zobraziť komponent BLUE a
12:56 - 12:58ORANGE naraz v obydvoch
12:59 - 13:01preto musíme naše cesty zduplikovať
13:01 - 13:04a do parametra "outlet" zadať názvy oboch
13:28 - 13:30Poďme si pridať navigačné buttony
13:42 - 13:46Buttony vytvárame štandardným spôsobom pomocou routerLinku
13:47 - 13:50Jediný rozdiel je, že pribudla sekcia "outlets"
13:51 - 13:53kde zadefinujeme názov outletu
13:53 - 13:55a ktorá cesta sa má zobraziť
14:26 - 14:28Poďme si to odskúšať
14:29 - 14:30Vidíte?!
14:30 - 14:32Po kliku na naše buttony
14:32 - 14:36sa na konkrétnych miestach zobrazujú konkrétne komponenty
14:38 - 14:41Samozrejme naše buttony môžu priraďovať cesty
14:41 - 14:43viacerým outletom naraz
14:43 - 14:46Poďme si pridať ešte ďalšie dva buttony
15:03 - 15:05Ako vidíte funguje to bezchybne
15:05 - 15:09Jeden button nastavuje cesty pre dva rôzne router-outlety
15:13 - 15:17Poďme si ukázať ako preberať parametre z URL adries
15:19 - 15:21Vytvorme si nový komponent
15:22 - 15:23GetParams
16:02 - 16:04A pridajme si do našeho routera
16:08 - 16:10Nesmieme zabudnúť ho importnúť
16:10 - 16:12k ostatným našim komponentom
17:06 - 17:09Do našeho komponentu si importnime Router
17:09 - 17:11ActivatedRoute
17:11 - 17:14a Params z @angular/router
17:19 - 17:22Cez konšstruktor si pridajme do našeho komponentu
17:22 - 17:23ActivatedRoute
17:26 - 17:29ktorý nám umožňuje pristupovať k objektu
17:29 - 17:31a dátam práve aktívnej cesty
17:57 - 18:01Poďme si ukázať ako preberať parametre z URL adresy
18:01 - 18:03Tým, že sme si importovali
18:03 - 18:06do našeho komponentu ActivatedRoute tak cez zápis
18:06 - 18:09this.activatedRoute.params
18:09 - 18:12sa vieme subscribnúť k parametrom
18:12 - 18:13aktuálnej URL adresy
18:13 - 18:15Poďme si to ukázať
18:23 - 18:26Ako môžete vidieť zatiaĺ nemáme žiadne parametre
18:26 - 18:30tak si poďme vytvoriť cesty ktoré ich budú mať
18:31 - 18:33Zduplikujem si našu cestu get-params
18:33 - 18:37a pridajme tam dynamický parameter s názvom :id
18:37 - 18:38za lomítkom
18:38 - 18:39Zápis vyzerá nasledovne
18:40 - 18:43get-params/:id
18:44 - 18:46a :id znamená, že za lomítkom môže byť
18:46 - 18:48akákoľvek dynamická hodnota
18:49 - 18:52ktorá bude uložená v parametri "id"
18:58 - 19:01Priraďme tieto parametre do premennej
19:01 - 19:03myParams a zobrazme ju v našom komponente
19:27 - 19:30V prípade ak potrebujete viacej dynamických parametrov
19:30 - 19:33pridajte ich klasicky cez lomítko a pomocou
19:33 - 19:35dvojbodky im priraďte názov
19:44 - 19:48Poďme si ukázať ako priradiť dynamický parameter pomocou buttonu
19:59 - 20:03Jeden zo spôsobov je použitie routerLinku
20:03 - 20:05kde do hodnoty dáte presný názov
20:32 - 20:35Ale najčastejšie budú vaše hodnoty dynamické
20:35 - 20:38a budú uložené v premenných, preto to môžete
20:38 - 20:41zapísať štýlom kde zadáte názov cesty
20:41 - 20:44a cez čiarky zadáte ďalšie dynamické
20:44 - 20:47parametre ktoré sa nachádzajú za lomítkami
20:48 - 20:52Nie všetky parametre prichádzajúce do Vašej aplikácie
20:52 - 20:54musia byť nutne pekne oddelené lomítkami
20:54 - 20:57Poďme si ukázať ako preberať tzv. queryParametre
20:57 - 21:01teda čokoľvek za URL adresou čo sa nachádza za otáznikom
21:03 - 21:06Vytvorme si v našom komponente ďalšiu premennú s názvom
21:06 - 21:10myQueryParams a zobrazme ju v komponente
21:25 - 21:28a do našej URL pridajme Query parameter
21:34 - 21:36Zduplikujem si subscribe
21:36 - 21:39ku klasickým parametrom a zmeňme slovo "params"
21:39 - 21:40na queryParams
21:40 - 21:42Výsledok priraďme do premennej
21:42 - 21:44myQueryParams
21:47 - 21:49A ako môžete vidieť obdobným spôsobom
21:49 - 21:53dokážeme prebrať aj dynamické Query parametre
22:00 - 22:04Poďme si ukázať ako nastavovať Query parametre pomocou buttonu
22:13 - 22:16Do našeho buttonu len pridáme nový parameter
22:16 - 22:19s názvom [queryParams] ktorý ako hodnotu bude obsahovať
22:19 - 22:23JSON objekt s hodnotami Query parametrov
23:00 - 23:04V tejto časti sme si ukázali pokročilejšie techniky práce s routerom
23:05 - 23:06Vytvorili sme si prvý Guard
23:07 - 23:10ktorý blokoval prístup ku konkrétnej ceste a komponentu
23:10 - 23:15Ukázali sme si ako funguje navigácia medzi dvoma router-outletmi
23:15 - 23:17ktoré sa nachádzajú v jednom komponente
23:17 - 23:21a naučili sa aj preberať dynamické dáta z URL adries
23:22 - 23:24Dúfam, že sa Vám video páčilo
23:25 - 23:26a uvidíme sa nabudúce

Pokročilý routerOstatné funkcie routeru

V tejto časti si ukážeme pokročilejšie funkcie routeru ako navigácia z vnútra komponentu, guards, viaceré router outlety na jednej stránke a preberanie parametrov z URL

Redirect z vnútra komponentu

Navigácia z vnútra komponentu sa robí pomocou router.navigate:


//navigácia routerom z komponentu
this.router.navigate([RouterName]);

                            

Guards

Obmedzujú prístup ku konkrétnym cestám. V prípade, že užívateľ má mať prístup k danej ceste verifikačná logika funkcie CanActivate musí vrátiť TRUE.


import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';


@Injectable()
export class LoggedInGuard implements CanActivate {

    constructor(private router: Router) {}

    canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        //your verification logic here
        if(localStorage['logged'] == 'true') {
            return true;
        } else {
            this.router.navigate(['/noaccess']);
        }

    }
}

Viaceré router-outlety v jednom komponente

Pri viacerých router-outletoch v jednom komponente je nutné im nastaviť názov a v routerLinku určiť ktorá cesta sa má zobraziť v ktorom outlete.


<router-outlet name="outlet-left"></router-outlet>
<router-outlet name="outlet-right"></router-outlet>

<button [routerLink]="[{outlets: {'outlet-left': ['blue']}}]">load BLUE LEFT</button>
<button [routerLink]="[{outlets: {'outlet-right': ['blue']}}]">load BLUE RIGHT</button>
<button [routerLink]="[{outlets: {'outlet-left': ['orange']}}]">load ORANGE LEFT</button>
<button [routerLink]="[{outlets: {'outlet-right': ['orange']}}]">load ORANGE RIGHT</button>

Preberanie parametrov z URL



//získanie parametrov z URL
this.activatedRoute.params.subscribe((params: Params) => {
   console.log(params);
});

//získanie Query parametrov
 this.activatedRoute.queryParams.subscribe((params: Params) => {
    console.log(params);
 });



Pomocou routerLinku a queryParams nastavujete dynamické parametre


//nastavenie parametrov cez tlačidlo
<button [routerLink]="['/get-params/555']">Open ID: 555</button>
<button [routerLink]="['/get-params/345678']">Open ID: 345678</button>
<button [routerLink]="['/get-params', '12345', 'Peter']">Open ID: 12345 + name: Peter</button>
<button [routerLink]="['/get-params']" [queryParams]="{param1: '1235', param2: 'angular.sk'}">Set query params</button>

Stiahnite si súbory tohoto kurzu
    
#potrebujete node.js a globálne nainštalovaný @angular/cli
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/11/myapp
npm install
ng serve
    


Diskusia