X

Vitajte!

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

00:13 - 00:14Vitajte
00:14 - 00:17v tejto časti si povieme o Property-Bindingu
00:18 - 00:20Čo je to Property-Binding?
00:21 - 00:25Je to jednosmerný mechanizmus ktorý nastavuje DOM atribúty
00:26 - 00:29Používa sa k tomu zápis s hranatými zátvorkami [ ]
00:30 - 00:32v hranatých zátvorkách je názov
00:32 - 00:35atribútu ktorý ideme meniť a expression
00:35 - 00:39môže byť výraz ale najčastejšie to bude premenná
00:39 - 00:41s hodnotou ktorú ideme nastaviť
00:43 - 00:46V Angulari existujú 3 typy Property-Bindingu
00:48 - 00:50Element Property-Binding
00:52 - 00:56Nastavuje DOM atribúty podľa definovaného výrazu
00:58 - 01:02Tento zápis by nastavil odkazu HREF parameter
01:02 - 01:04z premennej website.url
01:04 - 01:07a zároveň text odkazu by bol nastavený
01:07 - 01:09z premennej website.name
01:10 - 01:13Toto isté docielime aj interpoláciou
01:14 - 01:17ktorá ma zápis cez dvojité zložené zátvorky {{ }}
01:18 - 01:19Vyzeralo by to takto...
01:24 - 01:28Ďalší typ je Component Property-Binding
01:29 - 01:33Používa sa na prenesenie dát do child komponentu
01:33 - 01:35cez @Input() dekorátor
01:36 - 01:38Zápis by mohol vyzerať napríklad takto
01:39 - 01:42Tento ukážkový komponent by napríklad
01:42 - 01:43zobrazoval informácie o webstránke
01:44 - 01:47a cez Property-Binding mu vieme poslať
01:47 - 01:48dáta ktoré potrebuje
01:48 - 01:51Vo vnútri tohoto child komponentu by potom v premennej
01:51 - 01:52DATA
01:53 - 01:55bol objekt obsahujúci všetky potrebné
01:55 - 01:57informácie ktoré komponent potrebuje
01:59 - 02:01Nasleduje posledný typ
02:01 - 02:03Directive Property-Binding
02:04 - 02:06Pracuje s HTML elementom
02:06 - 02:09mení jeho atribúty a používa na to
02:09 - 02:10direktívy
02:11 - 02:14Tu je ukážka zápisu pri použití Angular
02:14 - 02:17direktív ngClass ktorá nastavuje parameter
02:17 - 02:18class
02:18 - 02:21a ngStyle ktorá vloží do elementu
02:21 - 02:22inline CSS štýly
02:23 - 02:26V dnešnej časti si povieme o Property Bindingu
02:26 - 02:29Čo je ale dôležité, ukážeme si
02:29 - 02:30@Component Property Binding
02:30 - 02:33kde dáta z jedného komponentu
02:33 - 02:35poskytneme druhému komponentu
02:36 - 02:38Tiež použijeme základné
02:38 - 02:41direktívy ngIf a ngFor
02:41 - 02:44a vyskúšame si aj pár základných
02:44 - 02:47PIPES ako napríklad "uppercase"
02:47 - 02:49a formátovanie dátumu
02:51 - 02:53V predchádzajúcej časti sme si ukázali
02:53 - 02:56ako vytvoriť základné komponenty pre našu aplikáciu
02:56 - 02:59Dneska budeme pracovať s komponentom USER LIST
03:00 - 03:03V našom komponente USER LIST
03:03 - 03:06umiestnime statický JSON s dátami o užívateľoch
03:08 - 03:10Budú obsahovať políčka ako
03:10 - 03:13ID, obrázok, firma, meno
03:13 - 03:16priezvisko, email, pohlavie
03:16 - 03:18adresa a dátum narodenia
03:22 - 03:25Skopírujeme si náš JSON s dátami o užívateľoch
03:27 - 03:30a vložíme ho do USER LIST komponentu
03:30 - 03:33Tam si vytvoríme premennú "userData"
03:33 - 03:37ktorej typ bude ARRAY, v našom prípade je to ARRAY objektov
03:37 - 03:40takže zápis bude vyzerať ARRAY
03:41 - 03:42lomené zátvorky
03:43 - 03:44object
03:50 - 03:53Teraz našu premennú userData použijeme v template
03:54 - 03:57Otvoríme si userList komponent HTML
03:57 - 03:58template
03:58 - 04:01a pomocou zápisu interpolácie
04:01 - 04:04vložíme premennú userData, použijeme pipe
04:04 - 04:06JSON
04:06 - 04:08ktorá nám zobrazí
04:08 - 04:11celú štruktúru nášho JSONu v template
04:13 - 04:15Keďže na našej stránke máme trochu málo miesta
04:15 - 04:18dočasne si vypneme ostatné komponenty
04:18 - 04:21keďže teraz budeme pracovať len s USER LISTom
04:59 - 05:01Poďme dať našim dátam vzhľad
05:05 - 05:08Najprv potrebujeme prejsť každou jednou položkou
05:08 - 05:10našeho JSON objektu
05:11 - 05:13Použijeme na to direktívu ngFor
05:14 - 05:16Vytvoríme lokálnu premennú "user"
05:17 - 05:19"of userData"
05:20 - 05:23kde v premennej "user" bude objekt
05:23 - 05:25konkrétneho jedného užívateľa
05:36 - 05:39Teraz pomocou CSS dáme jednotlivým boxom pre
05:39 - 05:40užívateľa
05:40 - 05:41krajší vzhľad
05:42 - 05:44A rozdelíme ich do stĺpcov
05:44 - 05:48Keďže používame Boostrap vytvorenie stĺpcov bude úplne jednoduché
06:39 - 06:41Stĺpce máme vytvorené
06:41 - 06:45a umiestnime si obrázok užívateľa do prvého z nich
06:53 - 06:56Vytvoríme prázdny IMG tag
06:56 - 06:59kde do parametra SRC
06:59 - 07:01pomocou interpolácie
07:01 - 07:05načítame hodnotu "user.picture"
07:28 - 07:31Čo ale v prípade ak nejaký užívateľ nebude mať
07:31 - 07:32obrázok?
07:32 - 07:34Prvému užívateľovi ho vymažeme
07:53 - 07:55A použijeme direktívu ngIf
07:56 - 07:58aby sme tento stav vedeli odchytiť
07:58 - 08:02Obrázok zobrazíme len vtedy ak "user.picture" existuje
08:04 - 08:06A zároveň ak neexistuje
08:07 - 08:09Vypíšeme text "No picture"
08:12 - 08:15Do podmienky dáme výkričník !user.picture
08:15 - 08:16ak neexistuje
08:24 - 08:26Obdobným spôsobom vyrobíme TITLE
08:26 - 08:29BUTTON pre email a adresu
09:41 - 09:45Budeme rátať s prípadom, že email nemusí mať každý užívateľ
09:45 - 09:46Preto tam doplníme
09:47 - 09:49direktívu ngIf
10:26 - 10:28Čo sú PIPES sme si už naznačili
10:28 - 10:30a Angular ich má veľké množstvo
10:30 - 10:32teraz si ukážeme dve
10:33 - 10:34ktoré sa nám môžu hodiť
10:35 - 10:37Jednou je napríklad "uppercase"
10:37 - 10:40ktorý zobrazí text veľkými písmenami
10:59 - 11:02Ďalšia ale omnoho užitočnejšia je
11:02 - 11:04možnosť formátovať dátum
11:04 - 11:08Ten ktorý máme my je v ISO formáte
11:08 - 11:09a nevyzerá veľmi pekne
11:09 - 11:14Tak pomocou PIPE date si ho pretvoríme na to čo potrebujeme
11:32 - 11:34Ešte dodatočné úpravy
11:34 - 11:37a profil užívateľa by bol skoro hotový
11:56 - 11:59Poďme detail užívateľa premiestniť do
11:59 - 12:00samostatného komponentu
12:01 - 12:03preto vytvorme nový komponent
12:03 - 12:06s názvom UserInfo
12:16 - 12:19A celé naše HTML ktoré tvorí template pre
12:19 - 12:21detail užívateľa
12:21 - 12:23premiestnime do tohoto nového komponentu
12:42 - 12:45Ako vidíte, template funguje
12:45 - 12:47ale neobsahuje žiadne naše dáta
12:49 - 12:52Poďme našemu komponentu povedať
12:52 - 12:54že môže očakávať dáta z vonku
12:55 - 12:58Zápisom v hranatých zátvorkách nášmu komponentu
12:58 - 13:02podsunieme "user Data" v premennej "user"
13:03 - 13:04Zápis bude teda
13:04 - 13:06[user]="user"
13:08 - 13:10ale ako vidíte dostali sme chybu
13:10 - 13:13pretože náš komponent nevie o tom, že
13:13 - 13:15má takéto dáta prijať
13:16 - 13:18Tak mu to ideme povedať
13:18 - 13:22Vytvoríme premennú "user" a pomocou dekorátora @Input()
13:24 - 13:27povieme nášmu komponentu, že tieto dáta prídu z vonku
13:28 - 13:30Tým, že dekorátor @Input()
13:30 - 13:32je súčasťou Angular Core
13:32 - 13:34musíme ho ešte pridať do importu
13:41 - 13:44CSS z USER LIST komponentu
13:44 - 13:48musíme preniesť do USER INFO komponentu
14:00 - 14:02Ako môžete vidieť
14:02 - 14:06náš template sa zjednodušil pretože všetky informácie
14:06 - 14:09o užívateľovi majú už samostatný komponent
14:09 - 14:10ktorý prijíma dáta z vonku
14:13 - 14:16Podobným spôsobom viete aj obrovskú aplikáciu
14:16 - 14:17rozbiť na menšie komponenty
14:18 - 14:21Jeden komponent môže obsahovať ďalšie komponenty
14:21 - 14:23a tie zase ďalšie
14:24 - 14:27V tejto časti sme si ukázali čo je Property Binding
14:28 - 14:31zároveň sme robii aj s interpoláciou
14:31 - 14:35a použili aj pár základných direktív ako ngIf a ngFor
14:36 - 14:39Tiež sme si ukázali ako fungujú základné PIPES
14:39 - 14:42ako "uppercase" alebo napríklad "date"
14:43 - 14:45Dúfam, že sa Vám video páčilo
14:46 - 14:48a uvidíme sa nabudúce

Property BindingJednosmerný data-binding

V tejto časti si povieme o Property Bindingu a všetkých jeho typoch. Cez @Component Property Binding zase prenesieme dáta z jedného komponentu do druhého.

Čo je to Property Binding?

Je to jednosmerný mechanizmus ktorý nastavuje DOM atribúty. Používa k tomu zápis s hranatými zátvorkami.

                                
    [property]="expression"
                                
                            

V Angulari existujú 3 typy property bindingu:

Element Property Binding

Nastavenie DOM atributov podľa definovaného výrazu.

                                
    <a [href]="website.url" [textContent]="website.name"></a>
    <a [href]="website.url">{{website.name}}</a>
                                
                            

Tento zápis by nastavil odkazu HREF parameter z premennej “website.url” a zároveň text odkazu bude nastavený z premennej “website.name”. Toto isté ale docielite aj interpoláciou ktorá má zápis cez dvojité zložené zátvorky {{}}.

@Component Property Binding

Používa sa na prenesie dát do child komponentu cez @Input() dekorátor, zápis by mohol vyzerať takto:

                                
<website [data]="websiteData"> </website>
                                
                            

Tento ukážkový komponent by napríklad zobrazoval informácie o webstránke, cez property binding mu vieme poslať dáta ktoré potrebuje. Vo vnútri tohoto child komponentu by potom v premennej data bol objekt obsahujúci všetky potrebné informácie ktoré komponent potrebuje.

Directive Property Binding

Pracuje s HTML elementom, mení jeho atribúty a používa na to direktívy. Tu je ukážka zápisu pri použití Angular direktív ngClass ktorá nastavuje parameter class a ngStyle ktorá vloží do elementu inline CSS štýly.

                                
<p [ngClass]="'one two'"> Angular 2 Property Binding Example </p>
<p [ngStyle]="{'color':'red', 'font-size':'17px'}"> Angular 2 Property Binding Example</p>
                                
                            

My si teraz vo videu ukážeme všetky tri typy Property Bindingu, budeme pokračovať v našom template a rozšírime ho o ďalšiu funkcionalitu. Ukážeme si aj prácu s direktívami ako napríklad *ngIf a *ngFor. Cez Component property binding nacitame data do child komponentu cez dekorator Input a nastavíme mu štýly podľa dynamických dát.



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


Diskusia