X

Vitajte!

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

00:18 - 00:20Vitajte v novom videu
00:20 - 00:24V tejto časti si povieme o routri a navigácii medzi komponentami
00:25 - 00:26Čo je to router?
00:27 - 00:29Angular router umožňuje navigáciu medzi
00:29 - 00:32jednotlivými pohľadmi (views)
00:32 - 00:36počas toho ako užívateľ používa Vašu aplikáciu
00:36 - 00:39Je zodpovedný za nasledujúce veci:
00:39 - 00:41Ak užívateľ klikna na položku v menu
00:41 - 00:43dostane sa do nového pohľadu
00:43 - 00:45s novým načítaným komponentom
00:46 - 00:50Tiež do komponentu dokáže natiahnuť dynamické parametre z URL adresy
00:51 - 00:52Pri použití deeplinku
00:52 - 00:55zas zobrazí konkrétny komponent a jeho stav
00:56 - 01:00Okrem toho dokáže obmedziť prístup pre neautentifikovaných užívateľov
01:00 - 01:03cez tzv. GUARDS
01:03 - 01:06V tomto videu si ukážeme najzákladnejší ROUTER
01:06 - 01:08a vytvoríme menu ktoré nás bude
01:08 - 01:11navigovať medzi komponentami
01:11 - 01:13Poďme na to!
01:14 - 01:17Vytvorme si novú Angular aplikáciu
01:17 - 01:19pomocou príkazu NG NEW
01:24 - 01:26Spustime ju pomocou NG SERVE
01:54 - 01:56Vytvorme si komponent HOMEPAGE
01:59 - 02:02Dostali sme error! Zabudol som napísať
02:02 - 02:04NG G C (c ako component)
02:11 - 02:14Obdobným spôsobom si vytvorme ďalšie 4
02:14 - 02:16testovacie komponenty
02:17 - 02:20Nazvime ich PINK, RED, ORANGE a BLUE
02:20 - 02:23a nastavme im aspoň farbu pozadia
04:12 - 04:15Z názvu selektora vymažeme prefix APP
04:29 - 04:33A na ukážku si ich zobrazíme v našom hlavnom komponente
05:01 - 05:05Vytvorme si nový súbor app.routes.ts
05:08 - 05:10Bude to samostatný modul
05:10 - 05:13pre routovanie našej appky
05:13 - 05:16Importnime si tam Routes a RouterModule
05:16 - 05:18z @angular/router
05:29 - 05:32Ďalej si importnime všetky naše komponenty
05:51 - 05:54Ďalej si vytvorme konštantu Routes typu
05:54 - 05:58Routes ktorá bude obsahovať routovanie našej aplikácie
05:58 - 06:00Teraz si pridáme homapage
06:00 - 06:03tá bude mať URL /home
06:03 - 06:06Do našej konštanty routes pridáme
06:06 - 06:08JSON objekt s parametrami PATH
06:08 - 06:11kde je string "home" a názov komponentu ktorý sa má zobraziť
06:11 - 06:14v našom prípade je to HomeComponent
06:15 - 06:18Ďalej si pridáme defaultnú cestu
06:18 - 06:21k našej aplikácii, teda keď sa lomítkom nič nenachádza
06:21 - 06:23Zapíšeme to štýlom
06:23 - 06:26path: ' ' a dáme tam prázdny string
06:26 - 06:30Tým, že to má smerovať na homepage tak použiejeme redirectTo
06:30 - 06:32a ako string dáme "home"
06:32 - 06:35Všimnite si, že musíme pridať pathMatch: 'full'
06:35 - 06:38aby náš router vedel, že ideme kontrolovať
06:38 - 06:41URL ktorá obsahuje prázdny string
06:41 - 06:44teda ju bude kontrolovať presne tak ako je zapísaná
06:48 - 06:50Teraz si naše nastavenie routeru
06:50 - 06:53vyexportujeme ako RouterModule
06:53 - 06:55pomocou nasledujúceho zápisu
07:05 - 07:07Teraz si náš RouterModule pridáme do
07:07 - 07:10našeho hlavného aplikačného modulu
07:26 - 07:29Aby náš router fungoval musíme si do
07:29 - 07:32našeho hlavného komponentu pridať
07:32 - 07:35 čo je kontainer ktorý zobrazí
07:35 - 07:37obsah aktívnej cesty
07:40 - 07:43Všimnite si, že ak vymažem z URL adresy "home"
07:43 - 07:46stále ma redirektuje naspäť, pretože
07:46 - 07:49sme ho nastavili ako našu defaultnú cestu
07:59 - 08:01Čo sa ale stane ak zadám URL
08:01 - 08:05ktorú nemáme definovanú?! Dostaneme veľmi škaredý error
08:05 - 08:08pretože zadaná cesta neexistuje a ani neexistuje
08:08 - 08:11mechanizmus ktorý by takúto cestu odchytil
08:11 - 08:14preto si tento stav ošetríme pridaním ďalšej cesty
08:14 - 08:17ktorej názov zadáme cez wildcard
08:17 - 08:19dvoch hviezdičiek **
08:19 - 08:23a cez redirectTo ho nasmerujeme na Homepage
08:32 - 08:35Pri reálnej aplikácii by to ale chcelo hlášku, že daný
08:35 - 08:38komponent neexistuje. Tak si vytvorme nový
08:38 - 08:39ktorý nám to povie
09:16 - 09:19Týmto zápisom máme odchytené všetky potencionálne stavy
09:19 - 09:21ktoré môžu nastať
09:21 - 09:23a naša aplikácia neskončí na chybe
09:24 - 09:27Poďme si pridať cesty k jednotlivým komponentom
10:11 - 10:15Pridáme si buttony ktoré budú prepínať naše komponenty
10:43 - 10:46Naše buttony zatiaľ nič nerobia, nevedia ktorý
10:46 - 10:49komponent chceme zobraziť, preto im to musíme povedať
10:56 - 11:00Do našich buttonov len pridáme parameter routerLink
11:00 - 11:01a názov cesty
11:20 - 11:23Po kliku náš router-outlet zobrazuje
11:23 - 11:24konkrétny komponent
11:25 - 11:30Každému nášmu buttonu pridajme routerLinkActive="active"
11:31 - 11:34Ak mám zobrazenú napríklad cestu s názvom "home"
11:34 - 11:37tak routerLinkActive prídá do tohto buttonu
11:37 - 11:40CSS classu "active" a tak vieme zvýrazdniť
11:40 - 11:43button práve zobrazeného komponentu
11:43 - 11:45Poďme si ho trochu naštýlovať
12:19 - 12:22Ak chceme vytvárať URL adresy s viacerými lomítkami
12:22 - 12:25tzv. CHILDREN tak to spravíme jednoduchým zápisom
12:25 - 12:28Vytvoríme novú PATH a do aprametra CHILDREN
12:28 - 12:30vložime ďalšie cesty
12:31 - 12:32Poďme si to ukázať
13:10 - 13:13Do našich buttonov už stačí len pridať
13:13 - 13:15simple-routing a lomítko
13:18 - 13:20Keď si všimnete našu aplikáciu tak jej URL
13:20 - 13:23adresa začína rovno za názvom domény
13:23 - 13:26je to Single Page aplikácia ale navonok sa tvári ako
13:26 - 13:29plnohodnotná ne-JavaScriptová
13:29 - 13:31aplikácia (aspoň tvarom URL adries)
13:31 - 13:35V prípade, že potrebujeme vieme do našeho routingu pridať mriežku
13:35 - 13:38Stačí nám upraviť v našom súbore app.routes.ts
13:38 - 13:41riadok kde exportujeme náš RouterModule
13:49 - 13:52Ako vidíte, náš router funguje ako predtým
13:52 - 13:53s jediným rozdielom
13:54 - 13:56že za názvom domény je mriežka
14:04 - 14:07V tomto videu sme si ukázali najzákladnejší router
14:07 - 14:10aký existuje. Tento diel ale bude mať
14:10 - 14:13ešte aj pokračovanie kde si ukážeme pokročilé techniky
14:13 - 14:14použitia routera
14:15 - 14:17A to konkrétne: GUARDS
14:17 - 14:20viaceré ROUTER-OUTLETy v komponente
14:21 - 14:24či ako preberať parametre z URL adresy
14:25 - 14:27Ďakujem za pozornosť
14:27 - 14:29a vidíme sa v ďalšej časti

Základný routerNavigácia medzi komponentami

V tejto časti si ukážeme najzákladnejší router aký existuje a navigáciu medzi komponentami pomocou routerLink

Čo je to router?

Angular Router umožňuje navigáciu medzi jednotlivými pohľadmi (views) počas toho ako užívateľ používa Vašu aplikáciu.

Router je zodpovedný za to, že:

  • Ak užívateľ klikne na položku menu dostane sa do nového pohľadu s novým načítaným komponentom
  • Do komponentu dokáže natiahnuť dynamické parametre z URL
  • Pri použití deeplinku zobrazí konkrétny komponent a jeho konkrétny stav
  • Obmedzí prístup pre neautentifikovaných užívateľov (tzv. Guards)


V tejto časti si ukážeme základný router-outlet a základné menu pre navigáciu.


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/10/myapp
npm install
ng serve
    


Diskusia