X

Vitajte!

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

00:15 - 00:17Vitajte v novom videu
00:18 - 00:20v tejto časti si povieme o direktívach
00:23 - 00:25Čo sú to direktívy?
00:27 - 00:30Direktíva je najzákladnejší element Angular aplikácie.
00:31 - 00:34V skutočnosti aj najpoužívanejší prvok
00:34 - 00:35ktorým je komponent
00:35 - 00:37je vlastne direktíva.
00:37 - 00:40Komponenty sú direktívy vyššieho radu
00:40 - 00:43ktoré majú template a používajú sa ako stavebné
00:43 - 00:45bloky Angular aplikácie.
00:46 - 00:48Ako vytvárať komponent direktívy
00:48 - 00:49sme si už ukázali
00:50 - 00:54a tak sa budeme venovať hlavne štrukturálnym a atribútovým direktívam.
00:58 - 00:59Atribútová direktíva
01:00 - 01:04Atribútové direktívy, už podľa názvu sa aplikujú do elementov
01:04 - 01:05ako atribúty.
01:06 - 01:09Používajú sa na manipulovanie s DOM modelom
01:09 - 01:10všetkými spôsobmi
01:11 - 01:12okrem ich vytvárania a ničenia.
01:13 - 01:16Môžeme ich nazývať aj DOM-friendly direktívy.
01:23 - 01:25Môžu napríklad nastavovať classy
01:25 - 01:28ako ngClass, prípadne meniť
01:28 - 01:32CSS štýly ako napríklad style.color
01:32 - 01:36prípadne schovávať element pomocou atribútu HIDDEN
01:37 - 01:38Všetky majú ale spoločné jedno
01:39 - 01:43Žiadnym spôsobom element neničia ani nevytvárajú
01:44 - 01:45len menia jeho vlastnosti
01:51 - 01:54Štrukturálne direktívy nie sú DOM-friendly
01:54 - 01:57v zmysle akom vytvárajú, ničia alebo znovu
01:57 - 02:01inicializujú DOM elementy na základe rôznych podmienok.
02:01 - 02:03Napríklad direktíva *ngIf
02:04 - 02:06v porovnaní s direktívou [hidden]
02:07 - 02:09Je veľký rozdiel medzi tým čo robí atribútová
02:09 - 02:12direktíva v porovnaní so štruktúrovou
02:12 - 02:15Napríklad atribútová direktíva HIDDEN
02:15 - 02:18nechá DOM element tak ako je, len ho schová
02:18 - 02:20pred užívateľom
02:21 - 02:23zatiaľ čo štrukturálna direktíva
02:23 - 02:26napríklad *ngIf element zničí.
02:26 - 02:28Fyzicky ho vyhodí z templatu
02:31 - 02:34My si teraz ukážeme ako vytvoriť vlastnú štrukturálnu
02:34 - 02:36a atribútovú direktívu
02:37 - 02:37Poďme na to!
02:40 - 02:44Pomocou príkazu NG NEW si vytvorme novú Angular aplikáciu
02:45 - 02:47a spustime ju pomocou NG SERVE
03:09 - 03:12Pomocou príkazu NG GENERATE
03:12 - 03:14konkrétne NG G DIRECTIVE
03:15 - 03:17vytvoríme v adresári directives
03:17 - 03:19novú direktívu
03:19 - 03:21s názvom Highlight
03:28 - 03:30Ako vidíte je podobná komponentu
03:31 - 03:33len má dekorátor @Directive
03:33 - 03:36Tiež obsahuje selector kde v hranatých zátvorkách
03:37 - 03:38je jej názov.
03:38 - 03:41My z neho vyhodíme slovíčko app a necháme ho len ako Highlight
03:59 - 04:01Ďalej si vytvoríme 2 texty
04:01 - 04:06Jeden klasický a jeden na ktorý aplikujeme našu direktívu Highlight
04:20 - 04:23Naša direktíva s textom zatiaľ nič nerobí
04:35 - 04:38Pridajme si do našej direktívy ElementRef
04:38 - 04:41a cez konštruktor ho poskytnime našej direktíve
04:41 - 04:44Pomocou ElementRef vieme pristupovať k
04:44 - 04:46DOM atribútom daného templatu
04:46 - 04:49V našom prípade to budú DOM atribúty
04:49 - 04:50tagu

04:55 - 04:58Pridajme si ešte funkciu ngOnInit
05:11 - 05:14Naša direktíva Highlight bude manipulovať
05:14 - 05:16s CSS štýlom daného elementu
05:16 - 05:20Vytvorme si funkciu basicStyle() ktorá bude nastavovať štandardné štýly
05:20 - 05:22pre našu direktívu
05:22 - 05:23Pomocou zápisu
05:24 - 05:27this.elRef.nativeElement
05:27 - 05:30vieme pristupovať priamo ku všetkým atribútom
05:30 - 05:33daného elementu a pomocou "style.color"
05:33 - 05:36nastavíme farbu a pomocou "style.backgroundColor"
05:36 - 05:38pozadie
05:51 - 05:53A našu funkciu basicStyle()
05:53 - 05:55vložme do ngOnInit()
05:56 - 05:59Ako vidíte základný štýl sa aplikoval na náš element
06:01 - 06:04Vytvorme si funkiu onHover() ktorá pri prejdení myši
06:04 - 06:07nad element zmení farby elementu
06:07 - 06:10Skopírujeme obsah basicStyle(), pridáme
06:10 - 06:13do funkcie onHover() a nastavíme iné farby
06:15 - 06:18Máme síce pridanú funkciu onHover()
06:18 - 06:21ktorá by mala meniť farbu pri prejdení myši nad element
06:21 - 06:24ale naša direktíva zatiaľ nevie kedy
06:24 - 06:26má túto funkciu použiť, preto jej to ideme povedať
06:26 - 06:30V dekorátore @Directive vytvorme HOST a pridajme
06:30 - 06:32jednotlivé eventy
06:32 - 06:35V našom prípade to bude (mouseover) ktorý zavolá funkiu
06:35 - 06:38onHover() a (mouseout) ktorý zavolá funkciu basicStyle()
06:56 - 06:59Naša direktíva konečne reaguje na eventy myši
06:59 - 07:02(mouseover) a (mouseout) a aplikuje jednotlivé štýly
07:03 - 07:05Poďme si pridať jeden doplnkový
07:05 - 07:07parameter fontSize - veľkosť textu
07:07 - 07:10Pomocou dekorátora @Input
07:10 - 07:12si vytvorme premennú fontSize a nastavme jej
07:13 - 07:15prednastavenú veľkosť 30
07:29 - 07:31A pomocou ElementRef
07:31 - 07:35a property "style.fontSize" ju pridajme do oboch našich funkcií
07:39 - 07:42Našemu lementu potom pridajme parameter fontSize
07:42 - 07:43rovná sa 50
07:44 - 07:45Môžeme použiť zápis
07:45 - 07:48s hranatými zátvorkami ako property binding
07:48 - 07:50ale bude nám fungovať aj zápis bez nich
08:17 - 08:19Pristupovať k atribútom
08:19 - 08:23sa dá aj zjednodušene cez funkiu getAttribute()
08:23 - 08:25ktorú nám poskytuje ElementRef a jeho nativeElement
08:27 - 08:30Vypíšme si do konzoly náš atribút fontSize
08:39 - 08:42Okrem CSS štýlov a jeho atribútov
08:42 - 08:44vieme pristupovať aj k ostatným častiam
08:44 - 08:48napríklad ako innerText čo je vlastne text našej direktívy
08:48 - 08:50Poďme si ukázať ako ho vypísať v konzole
09:00 - 09:04Poďme si ukázať ako vytvoriť jednoduchú štrukturálnu direktívu
09:05 - 09:07V našom prípade vytvoríme jednoduchú direktívu
09:07 - 09:11*onlyAdmin ktorá zobrazí obsah len vtedy
09:11 - 09:14ak užívateľ bude mať uložený v localStorage
09:14 - 09:17premennú isAdmin ktorá sa rovná TRUE
09:18 - 09:19Poďme na to
09:25 - 09:27Pomocou príkazu NG GENERATE
09:27 - 09:30vytvoríme direktívu v adresári directives
09:30 - 09:32s názvom onlyAdmin
09:43 - 09:46Zo selectora vymažeme app prefix
09:46 - 09:49a necháme ho len ako onlyAdmin
09:52 - 09:54Importneme si TemplateRef
09:54 - 09:56a ViewCountainerRef
09:56 - 10:00TemplateRef ako už napovedá názov je referencia
10:00 - 10:01na template
10:01 - 10:04Ak sa nad tým zamyslíte tak templaty
10:04 - 10:07obsahujú DOM elementy takže ak potrebujete vložiť
10:07 - 10:11element potrebujete miesto kam ho vložiť
10:11 - 10:14V Angulari sa takéto miesto volá Container
10:14 - 10:17a ViewContainerRef je na neho referencia
10:23 - 10:26Ďalej si ich pridáme do konštruktora aby sme ich
10:26 - 10:27mohli v našej direktíve používať
11:00 - 11:05Naša direktíva bude podobná *ngIf ale s tým rozdielom
11:05 - 11:07že zobrazí text len tomu
11:07 - 11:09kto má v localStorage
11:09 - 11:12uloženú premennú isAdmin ktorá sa rovná TRUE
11:17 - 11:20Pridajme si do tempaltu 2 texty
11:21 - 11:23Jeden klasický ktorý sa zobrazí vždy
11:24 - 11:28a jeden s direktívou *onlyAdmin
11:34 - 11:37Ako vidíte direktíva *onlyAdmin schovala
11:37 - 11:40obsah aj keď ešte neobsahuje žiadnu logiku
11:40 - 11:42To preto, že náš TemplateRef
11:42 - 11:45musí byť pridaný do ViewContainera
11:45 - 11:47aby zobrazil čo má
11:56 - 12:00Do konzoly si vypíšme obsah localStorage
12:00 - 12:03premennej isAdmin, ako vidíte je UNDEFINED
12:03 - 12:06To preto, že neexistuje. Tak si ju tam manuálne pridáme
12:06 - 12:08NAstavíme ju na hodnotu TRUE
12:13 - 12:17Hodnotu premennej podľa ktorej budeme rozhodovať či sa obsah zobrazí alebo nie
12:17 - 12:19máme nastavenú, chýba posledná vec...
12:19 - 12:23povedať našej direktíve kedy má obsah zobraziť
12:23 - 12:24a kedy nie
12:24 - 12:27Spravíme to pomocou jednoduchého IFu
12:29 - 12:33if(localStorage['isAdmin'] == 'true')
12:33 - 12:35TRUE je ako string
12:35 - 12:38a v prípade, že je TRUE tak nasleduje volanie
12:38 - 12:41this.viewContainer
12:45 - 12:47this.templateRef
12:48 - 12:51Vďaka tomuto sa do našeho kontajnera pridá
12:51 - 12:54referencia na template, toto spôsobí to že
12:54 - 12:57obsah templatu sa na stránke zobrazí
12:58 - 13:00Naopak. V časti ELSE
13:00 - 13:03ak chceme takýto obsah schovať tak len vymažeme
13:03 - 13:05referenciu na template z kontajnera
13:05 - 13:08To spravíme pomocou volania
13:08 - 13:10this.viewContainer.clear()
13:12 - 13:15K našej direktíve onlyAdmin
13:15 - 13:18môžeme pridať aj ďalšie direktívy, napríklad našu Highlight
13:18 - 13:20ktorú sme si vytvorili predtým
13:21 - 13:24V prípade, že zmeníme hodnotu premennej isAdmin
13:24 - 13:27v localStorage na FALSE, obsah v tejto direktíve
13:27 - 13:29sa nezobrazí
13:43 - 13:46Možno Vás zaujíma čo znamená * pri
13:46 - 13:49štrukturálnej direktíve, je to len SYNTACTIC SUGAR
13:49 - 13:50ktorý nám uľahčuje zápis
13:50 - 13:52Keby sme tam tú hviezdičku nemali
13:52 - 13:54museli by sme danú direktívu zapísať
13:54 - 13:57pomocou NG-TEMPLATE
13:57 - 14:00Obidva príklady sú vo výsledku rovnaké
14:00 - 14:03len použitie * pred názvom direktívy zápis
14:03 - 14:04zjednodušuje
14:18 - 14:21V tejto časti sme si povedali o direktívach
14:21 - 14:24a ukázali ako vytvoriť základnú atribútovú
14:24 - 14:26a štrukturálnu direktívu
14:27 - 14:30Už poznáme rozdiely medzi nimi a s týmito poznatkami
14:30 - 14:32by sme mali byť schopní si vytvoriť
14:32 - 14:34ďalšie naše vlastné direktívy
14:34 - 14:36Dúfam, že sa Vám video páčilo
14:37 - 14:39a uvidíme sa nabudúce

DirektívyŠtrukturálne a atribútové

V tejto časti si povieme o direktívach, vytvoríme si štrukturálne a atribútové direktívy na jednoduchých príkladoch.

Čo sú to direktívy?

Direktíva je najzákladnejší element Angular aplikácie. V skutočnosti aj najpoužívanejší prvok ktorým je komponent je vlastne direktíva. Komponenty sú direktívy vyššieho radu ktoré majú template a používajú sa ako stavebné bloky Angular aplikácie.

Ako vytvárať komponent direktívy sme si už ukázali a tak sa budeme venovať hlavne štrukturálnym a atribútovým direktívam.

Existujú 3 typy direktív:

  • Components
  • Structural Directives
  • Attribute Directives

@Component direktíva

Áno, komponenty sú v Angulari 2+ typ direktívy.

Je to špecifický typ direktívy ktorá Vám umožňuje využívať encapsulovanú funkcionalitu webových komponentov a opakovane ich používať v celej aplikácii.

Komponenty sú hlavný spôsob akým vytvárame a riadime logiku na stránke, cez vlastné elementy a atribúty pridávame funkcionalitu do existujúcich komponentov.

Štrukturálna direktíva

Štrukturálne direktívy nie sú DOM-friendly v zmysle akom vytvárajú, ničia alebo znovu inicializujú DOM elementy na základe rôznych podmienok.

Je veľký rozdiel medzi tým čo robí atribútová direktíva v porovnaní so štruktúrovou. Napríklad atribútová direktíva hidden nechá DOM element tak ako je a len ho schová pred užívateľom, zatiaľ čo štrukturálna direktíva napríklad *ngIf element zničí.

                            
<div *ngIf="showMe">
Ak showMe bude FALSE *ngIf zničí tento element a vymaže ho z DOM
</div>
                            
                            

Atribútová direktíva

Atribútové direktívy, už podľa názvu sa aplikujú do elementov ako atribúty. Používajú sa na manipulovanie s DOM modelom všetkými spôsobmi okrem ich vytvárania a ničenia. Môžeme ich nazývať aj DOM-friendly direktívy.

Aplikovať štýly a classy do elementu

                            
<p [style.color]="'blue'">Táto direktíva nastaví modrú farbu</p>
                            
                            

Zobraziť / schovať element dynamicky

                            
<p [hidden]="shouldHide">Direktíva zobrazí / schová element</p>
                            
                            

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


Diskusia