X

Vitajte!

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

00:16 - 00:18Vitajte v novom videu
00:18 - 00:22už sme si ukázali jednosmerný property binding a event binding
00:22 - 00:25V tejto časti tieto 2 typy bindingu skombinujeme
00:26 - 00:28a vytvoríme obojsmerný data-binding
00:29 - 00:31Použijeme direktívu ngModel
00:32 - 00:36ale ukážeme si aj ako vytvoriť vlastnú verziu obojsmerného data-bindingu
00:37 - 00:38Poďme na to!
00:42 - 00:45Poďme si vytvoriť novú Angular aplikáciu
01:05 - 01:07Vojdime do adresára myapp
01:07 - 01:09a pomocou príkazu "ng serve"
01:09 - 01:12spustíme našu Angular aplikáciu
01:35 - 01:38Vytvorme prázdne textové pole
01:38 - 01:41a premennú username v našom komponente
02:36 - 02:38Obojsmerný data-binding
02:38 - 02:42je v podstate kombinácia event bindingu a property bindingu
02:42 - 02:44Preto si ukážeme ako to zapísať
02:44 - 02:46štandardným spôsobom
02:59 - 03:02Ako vidíte obojsmerný data-binding funguje
03:02 - 03:05premenná username sa načíta z komponentu
03:05 - 03:08ale zároveň v našom template vieme
03:08 - 03:11dynamicky jej hodnotu meniť pomocou input fieldu
03:11 - 03:13Tento zápis však nevyzerá veľmi pekne
03:14 - 03:16Dá sa to docieliť oveľa jednoduchšie
03:20 - 03:22Zduplikujeme si náš input field
03:22 - 03:25a namiesto použitia property bindingu
03:25 - 03:28a event bindingu použijeme
03:28 - 03:31ngModel direktívu, zápis vyzerá takto:
03:41 - 03:44I keď všetko je zapísané dobre, dostaneme error
03:44 - 03:47to preto, že ngModel je súčasťou formulárov
03:47 - 03:49tak si ich musíme importovať do nášho modulu
04:05 - 04:08Vo výsledku sme teda docielili obojsmerný data-binding
04:08 - 04:11s oveľa jednoduchším zápisom
04:11 - 04:13Ako pomôcka pre zapamätanie
04:13 - 04:16Zápis obojsmerného data-bindingu sa nazýva aj
04:16 - 04:18BANANA IN THE BOX
04:18 - 04:21Stačí si predstaviť krabicu s banánmi
04:38 - 04:41My ale našu ukážku obojsmerného data-bindingu
04:41 - 04:43posunieme ešte na vyššiu úroveň
04:43 - 04:47Vytvoríme si vlastnú verziu obojsmerného data-bindingu
05:04 - 05:07Vytvoríme si jednoduchý komponent, bude to počítadlo
05:07 - 05:09s dvoma tlačidlami + a -
05:09 - 05:12ktoré po stlačení bude meniť hodnotu čísla
05:24 - 05:26Vytvorme obsah nášho komponentu
05:26 - 05:29Dodajme mu trochu CSS štýlov
06:34 - 06:36Vytvorme si premennú counterValue
06:36 - 06:39a nastavme jej počiatočnú hodnotu na 0
06:51 - 06:54Ďalej vytvoríme pomocou GETTERu a SETTERu
06:54 - 06:55funkciu counter()
06:56 - 06:59ktorá v jednom prípade vráti aktuálnu hodnotu
07:00 - 07:02a v druhom ju nastaví
07:03 - 07:05Tým, že použijeme GETTER a SETTER
07:06 - 07:08tak v zápise obojsmerného bindingu
07:09 - 07:12nám ako hodnotu stačí zadať slovo counter
07:12 - 07:13uvidíme to neskôr
07:21 - 07:24Ďalej budeme potrebovať ešte 2 funkcie
07:24 - 07:26increment a decrement
07:27 - 07:30incerement - zvýši hodnotu nášho countera
07:31 - 07:32a decrement ju zníži
07:52 - 07:53Teraz si ich pridáme do templatu
08:26 - 08:28Aby náš komponent vedel prijímať hodnotu
08:28 - 08:31čísla z vonku musíme ho nastaviť ako @Input()
08:56 - 08:59V našom hlavnom komponente si vytvorme premennú randomNumber
08:59 - 09:02ktorú použiejeme ako testovaciu premennú
09:05 - 09:08Cez property binding ju poskytneme našemu komponentu
09:22 - 09:26Komponent funguje, hodnota našeho čísla sa mení
09:26 - 09:28ale všetko toto a deje vo vnútri komponentu
09:28 - 09:31v prípade, že si vypíšeme premennú randomNumber
09:31 - 09:34v template jej hodnota sa nemení
09:45 - 09:48Deje sa to preto, že náš komponent
09:48 - 09:50neemituje navonok zmenu hodnoty
09:50 - 09:54Opravíme to tak, že pridáme EventEmmiter
09:54 - 09:56do nášho SETera
09:56 - 09:57counter()
10:32 - 10:34Hodnotu countera vyemitujeme von
10:34 - 10:37z komponentu nasledovne zápisom
10:37 - 10:40this.counterChange.emit a ako hondotu
10:40 - 10:43dáme this.counterValue
10:58 - 11:03A nášmu komponentu už len pridáme oblé zátvorky k našemu property bindingu
11:03 - 11:05Teraz náš komponent už funguje ako má
11:05 - 11:08manipuluje s externou premennou
11:08 - 11:11a funguje medzi ňou obojsmerný data-binding
11:15 - 11:18V tomto videu sme si ukázali použitie ngModelu
11:18 - 11:21a vytvorili sme aj vlastný obojsmerný
11:21 - 11:24data-binding v našom komponente
11:25 - 11:28Dúfam, že sa Vám video páčilo
11:28 - 11:30a uvidíme sa v ďalšej časti

Two-Way Data-BindingVytvorenie obojsmerného data-bindingu

V tejto časti sa naučíme používať obojsmerný data-binding s použitím direktívy ngModel a vytvoríme aj vlastnú verziu obojsmerného data-bindingu

Obojsmerný Data-Binding

Angular nemá priamu podporu pre obojsmerný data-binding, je to vždy kombinácia property a event bindingu. V tejto časti tieto dva typy bindingu skombinujeme a vytvoríme obojsmerný data-binding kde sa dáta prenášajú v oboch smeroch pri akejkoľvek zmene.

                                
//skrátený zápis cez direktívu ngModel
<input [(ngModel)]="name" >

//klasický dlhý zápis cez property a event binding
<input [ngModel]="name" (ngModelChange)="name=$event">
                                
                            

Tento obojsmerný data-binding kombinuje @Input() a @Output() data-binding do jedného zápisu, direktívy ngModel. Je to jednoduchý zápis ktorý vo výsledku bude robiť presne to isté ako dlhší zápis cez property a event binding.

Vlastný obojsmerný Data-Binding

Pozrite si video a dozviete sa ako vytvoriť vlastný obojsmerný data-binding vo vlastnom komponente, vyzeralo by to presne takto.

                                
<mycounter [(counter)]="random_number"></mycounter>
                                
                            


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


Diskusia