X

Vitajte!

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

00:16 - 00:18Vitajte v novom videu
00:19 - 00:22Každý Angular komponent prechádza životným cyklom
00:23 - 00:25Od jeho vzniku až po zánik
00:25 - 00:27existuje veľa rôznych eventov
00:27 - 00:30na ktoré sa viete naviazať a pracovať s nimi
00:31 - 00:32V tejto časti si o nich povieme
00:33 - 00:36a tie najpoužívanejšie si ukážeme v príkladoch
00:38 - 00:40Aký životný cyklus má komponent?
00:41 - 00:42Pozrime si to na obrázku
00:45 - 00:46Prvý je konštruktor
00:48 - 00:52Konštruktor triedy sa zavolá pred akýmkoľvek lifecycle hookom
00:53 - 00:55Ak Váš komponent obsahuje závislosti
00:56 - 00:58konštruktor je ideálne miesto
00:58 - 01:00ako ich načítať do svojho komponentu
01:03 - 01:04ngOnChanges
01:05 - 01:07zavolá sa pred ngOnInit
01:08 - 01:12vždy keď sa zmení hodnota premenných ktoré vstupujú do komponentu
01:14 - 01:15ngOnChanges
01:16 - 01:19pri zmene poskytne objekt s predchádzajúcou a novou hodnotou
01:22 - 01:23ngOnInit
01:25 - 01:26inicializuje komponent
01:26 - 01:27zavolá sa vždy
01:28 - 01:30raz hneď po ngOnChanges
01:31 - 01:35Ideálne miesto pre prvotné inicializovanie dát z databázy
01:38 - 01:40ngDoCheck
01:41 - 01:44Angular zavolá túto metódu vždy
01:45 - 01:48keď ngOnChanges nezdetekuje žiadnu zmenu
01:50 - 01:52ngAfterContentInit
01:54 - 01:56Je to interface iba pre komponent
01:56 - 01:59zavolá sa raz po ngDoCheck metóde
02:00 - 02:02keď vlastnosti zobrazovaného komponentu
02:02 - 02:03sú inicializované
02:06 - 02:08ngAfterContentChecked
02:10 - 02:14Je to interface iba pre komponent, volá sa po každej kontrole komponentu
02:14 - 02:15alebo direktívy
02:16 - 02:18dokonca aj vtedy ak sa ich obsah nezmení
02:21 - 02:23ngAfterViewInit
02:24 - 02:26Je to interface iba pre komponent, zavolá sa raz
02:27 - 02:29hneď po ngAfterContentInit
02:30 - 02:32Keď vlastnosti child templatu boli inicializované
02:35 - 02:37ngAfterViewChecked
02:38 - 02:40Je to interface iba pre komponent
02:41 - 02:43Zavolá sa vždy keď Angular zbadá zmeny
02:43 - 02:45vo vlastnostiach child komponentu
02:46 - 02:47Je to užitočné vtedy
02:47 - 02:50ak Váš komponent očakáva niečo z child komponentu
02:54 - 02:55ngOnDestroy
02:57 - 02:58Zavolá sa raz
02:58 - 02:59tesne predtým
02:59 - 03:01ako je komponent zničený
03:02 - 03:05Je to posledná šance upratať všetko potrebné po tomto komponente
03:06 - 03:10Je to vhodné napríklad vtedy ak Váš komponent spúšťa nejaký externý servis
03:10 - 03:13a chcete ho pri zničení komponentu tiež zrušiť
03:17 - 03:19Poďme si ukázať na príkladoch najpoužívanejšie hooky
03:20 - 03:20ngOnInit
03:21 - 03:22ngOnChanges
03:22 - 03:24a tiež ako funguje konštruktor
03:29 - 03:32Vytvorme si novú Angular aplikáciu
03:32 - 03:34pomocou príkazu ng new
03:34 - 03:36a spustime ju pomocou ng serve
04:26 - 04:28Poďme si ukázať čo je konštruktor
04:30 - 04:33Konštruktor triedy sa zavolá pred akýmkoľvek lifecycle hookom
04:35 - 04:37Ak Váš komponent obsahuje závislosti
04:37 - 04:39konštruktor je ideálne miesto
04:39 - 04:41ako ich načítať do svojho komponentu
04:42 - 04:43Poďme si vytvoriť ukážkový servis
04:44 - 04:46a vložíme ho do našeho komponentu cez konštruktor
04:48 - 04:49Použijeme na to príkaz
04:49 - 04:51ng generate service
04:51 - 04:55alebo skrátene "ng g service"
04:55 - 04:56a názov servisu
05:01 - 05:04Ako vidíte náš servis nič neobsahuje
05:04 - 05:07tak tam pridáme jednoduchú metódu sayHello
05:08 - 05:10ktorá len vráti string "hello"
05:19 - 05:22A do našeho komponentu vytvoríme funkciu constructor()
05:34 - 05:37Teraz do nej načítame externý servis
05:38 - 05:40ale ten musíme najprv importnúť
05:42 - 05:45Tak na začiatok nášho komponentu pridáme import
05:46 - 05:47a cestu k našemu servisu
05:48 - 05:50Ďalej cez náš konštruktor
05:50 - 05:52vložíme do našeho komponentu externý servis
05:53 - 05:54spravíme to tak
05:55 - 05:57že pomocou zápisu PRIVATE
05:57 - 06:00tu môžeme použiť modifikátory ako PRIVATE a PUBLIC
06:01 - 06:02názov našeho servisu
06:02 - 06:04ja som použil "podčiarkovník" example service
06:05 - 06:06len pre odlíšenie, že
06:06 - 06:08to čo má podčiarkovník
06:08 - 06:09je externá služba
06:09 - 06:11a za dvojbodkou je
06:11 - 06:12názov našeho servisu
06:13 - 06:15ten ktorý sme importovali
06:15 - 06:18ďalej v našom komponente už môžeme náš servis ľubovoľne použiť
06:18 - 06:21Takže ak chcem zavolať našu metódu sayHello
06:21 - 06:24napíšem _exampleService.sayHello()
06:26 - 06:28Ako vidíte dostali sme error
06:28 - 06:29to preto, že
06:29 - 06:32náš servis musíme pridať do sekcie providers
06:32 - 06:34do našeho komponent dekorátora
06:42 - 06:44ngOnInit
06:44 - 06:46Inicializuje komponent
06:46 - 06:48zavolá sa vždy raz
06:48 - 06:49hneď po ngOnChanges
06:50 - 06:54ideálne miesto pre prvotné inicializovanie dát z databázy
06:56 - 06:59Pre ukážku si vytvorme funkciu
06:59 - 07:00saySomething()
07:01 - 07:02ktorá má parameter text
07:02 - 07:04ktorý sa zobrazí v konzole
07:16 - 07:18Poďme si do našeho komponentu pridať
07:18 - 07:19ngOnInit
07:21 - 07:22Prvé čo musíme spraviť je
07:24 - 07:25pridať ho do importu
07:25 - 07:26z Angular/Core
07:28 - 07:30Ďalej do našej classy musíme pridať
07:31 - 07:32slovo implements
07:32 - 07:33a čo implementujeme
07:34 - 07:35a teraz to bude
07:35 - 07:36onInit
07:49 - 07:51V našom prípade funkcia saySomething()
07:51 - 07:53len pozdraví užívateľa
07:53 - 07:55ale v reálnej aplikácii
07:56 - 07:59je ngOnInit práve to miesto kde by ste mali načítavať
07:59 - 08:01externé dáta z databázy
08:02 - 08:03pre potreby komponentu
08:17 - 08:18Poďme si ukázať ngOnChanges
08:21 - 08:24V našom komponente si vytvorme jednoduchú funkciu
08:24 - 08:25changeText
08:26 - 08:29ktorá zmení hodnotu premennej "title"
08:33 - 08:35Do templatu pridajme 3 rôzne tlačítka
08:35 - 08:38ktoré nastavia 3 rôzne hodnoty textu
09:04 - 09:06Vytvorme si nový testovací komponent
09:06 - 09:08s názvom Example
09:20 - 09:23A pridajme tomuto komponentu premennú myText
09:24 - 09:24typu "string"
09:25 - 09:28ktorá príde z vonku cez @Input() dekorátor
09:52 - 09:54a poskytneme tomuto komponentu
09:54 - 09:55hodnotu našej premennej "title"
10:05 - 10:07Teraz pridáme do našeho komponentu
10:07 - 10:09detekciu zmien
10:09 - 10:10ngOnChanges
10:10 - 10:12a zároveň aj SimpleChanges
10:12 - 10:14čo nám umožní vidieť predchádzajúce hodnoty
10:15 - 10:15do našej classy
10:16 - 10:18za "implements ngOnInit"
10:18 - 10:20dáme čiarku a dopíšeme
10:20 - 10:21onChanges
10:22 - 10:24ďalej vytvoríme funkciu ngOnChanges
10:24 - 10:26kde dáme parameter "changes"
10:26 - 10:27typu SimpleChanges
10:28 - 10:29čo je objekt ktorý reprezentuje
10:30 - 10:32zmeny ktoré nastali v našich hodnotách
10:34 - 10:37ak si vypíšeme hodnotu premennej changes do konzoly
10:37 - 10:40uvidíme, že je to jednoduchý objekt ktorý obsahuje
10:40 - 10:43informáciu o tom čo bola predchádzajúca hodnota
10:44 - 10:45a čo je aktuálna hodnota
11:02 - 11:07V tejto časti sme si ukázali ako fungujú základné lifecycle hooky v Angulari
11:08 - 11:10a tie s ktorými sa budete stretávať najčastejšie
11:11 - 11:12sme si ukázali na príkladoch
11:13 - 11:14Dúfam, že sa Vám video páčilo
11:15 - 11:16a uvidíme sa nabudúce

Lifecycle HooksŽivotný cyklus komponentu

V tejto časti si povieme o životnom cykle Angular komponentov a direktív a najpoužívanejšie si ukážeme na príkladoch

Konštruktor

Konštruktor triedy sa zavolá pred akýmkoľvek lifecycle hookom. Ak Váš komponent obsahuje závislosti konštruktor je ideálne miesto ako ich načítať do svojho komponentu.

ngOnChanges

Zavolá sa pred ngOnInit vždy keď sa zmení hodnota premenných ktoré vstupujú do komponentu. ngOnChanges pri zmene poskytne objekt s predchádzajúcou a novou hodnotou.

ngOnInit

Inicializuje komponent, zavolá sa vždy raz hneď po ngOnChanges. Ideálne miesto pre prvotné inicializovanie dát z databázy.

ngDoCheck

Angular zavolá túto metódu vždy keď ngOnChanges nezdetekuje žiadnu zmenu

ngAfterContentInit

Je to interface iba pre komponent, zavolá sa raz po ngDoCheck metóde keď vlastnosti zobrazovaného komponentu sú inicializované

ngAfterContentChecked

Je to interface iba pre komponent, volá sa po každej kontrole komponentu alebo direktívy dokonca aj vtedy ak sa ich obsah nezmení

ngAfterViewInit

Je to interface iba pre komponent, zavolá sa raz hneď po ngAfterContentInit Keď vlastnosti child templatu boli inicializované

ngAfterViewChecked

Je to interface iba pre komponent, zavolá sa vždy keď Angular zbadá zmeny vo vlastnostiach child komponentu. Je to užitočné vtedy ak Váš komponent očakáva niečo z child komponentu.

ngOnDestroy

Zavolá sa raz tesne predtým ako je komponent zničený. Je to posledná šance upratať všetko potrebné po tomto komponente. Je to vhodné napríklad vtedy ak Váš komponent spúšťa nejaký externý servis a chcete ho pri zničení komponentu tiež zrušiť.



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


Diskusia