X

Vitajte!

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

00:18 - 00:20Vitajte v novom videu
00:20 - 00:23V tejto časti si povieme o Pipe funkciách
00:23 - 00:27Ukážeme si užitočné, prednastavené Pipes pre prácu s dátumami
00:27 - 00:29číslami, stringami
00:29 - 00:32a vytvoríme si aj dve vlastné Pipe funkcie
00:33 - 00:35Čo je to Pipe funkcia?
00:36 - 00:39Je to spôsob ako jednoducho transformovať dáta
00:39 - 00:42ktoré sa majú zobraziť v template pomocou jednoduchého
00:42 - 00:44zápisu vo Vašom HTML
00:44 - 00:46Používa sa na to znak
00:46 - 00:47Pipe - |
00:48 - 00:50V praxi to môže vyzerať nasledovne
00:50 - 00:53Predstavte si Angular aplikáciu ktorá pracuje so surovými dátami
00:53 - 00:54z databázy
00:54 - 00:56Tieto dáta budú napríklad obsahovať dátum
00:57 - 00:59ten ale dostanete z databázy
00:59 - 01:02väčšinou v škaredom ISO formáte ktorý môže vyzerať napríklad takto
01:05 - 01:08A povedzme, že mi chceme tento dátum zobraziť úplne inak
01:08 - 01:09Napríklad takto:
01:12 - 01:15Jeden zo spôsobov ako docieliť potrebnú transformáciu
01:15 - 01:17je práce Pipe funkcia
01:18 - 01:19Angular ich má mnoho
01:19 - 01:22ale v tomto konkrétnom prípade by to vyzeralo nasledovne
01:24 - 01:27Zjednodušene povedané, Pipe funkcia je
01:27 - 01:30len jendoduchá funkcia transform() ktorá má vstup hodnôt
01:30 - 01:31a parametrov
01:31 - 01:32a výstup
01:33 - 01:35Všetko sa deje vo vnútri tejto funkcie
01:36 - 01:39Najčastejšie použitie Pipes je pre transformáciu
01:39 - 01:41kedy sa vstupné hodnoty
01:41 - 01:45vo vnútri transform() funkcie premenia na požadovanú formu a vrátia sa už zmenené
01:45 - 01:48Najjednoduchší príklad je napríklad Pipe
01:48 - 01:49uppercase
01:50 - 01:53ktorá všetky znaky v stringu zmení na veľké písmená
01:55 - 01:58Ďalšie časté použitie Pipe finkcií je
01:58 - 01:59keď potrebujeme filtrovať dáta
02:00 - 02:05Do transform( ) funkcie prídu všetky, vo vnútri tejto funkcie sa vyfiltrujú podľa určitých podmienok
02:06 - 02:07a vrátia sa už len tie dáta
02:07 - 02:09ktoré zodpovedajú našim podmienkam
02:11 - 02:13Poďme si to ukázať na príkladoch
02:20 - 02:23Poďme si ukázať najzákladnejšie Pipes
02:23 - 02:26Vytvorme si v našom komponente
02:26 - 02:28premennú myText typu string
02:28 - 02:30a zadajme jej nejaký textový obsah
02:33 - 02:37Poďme si ukázať jednoduchú Pipe - uppercase
02:37 - 02:41ktorá z klasického textu urobí text kde sú všetky prísmená veľké
02:53 - 02:55Zápis vyzerá nasledovne
03:03 - 03:06Okrem uppercasu existuje aj opačná varianta
03:06 - 03:09lowercase - ktorá všetky písmená v stringu
03:09 - 03:10nastaví na malé
03:25 - 03:29Angular obsahuje už vstavanú Pipe pre prácu s dátumom
03:30 - 03:32Vytvorme si v našom komponente premennú
03:32 - 03:33myDate
03:33 - 03:35ktorej nastavíme aktuálny dátum
03:56 - 03:59Pri Pipe date budete najčastejšie používať
03:59 - 04:02parameter kde si nastavíte vlastný formát
04:02 - 04:03môže to vyzerať napríklad takto
04:29 - 04:33Pipe date má viaceré prednastavené formáty
04:33 - 04:35ako napríklad: medium
04:35 - 04:39short, fullDate, mediumDate, shortDate a ďalšie
04:39 - 04:41Poďme si ukázať všetky
04:41 - 04:43aby sme vedeli ako sa nám zobrazia v template
05:26 - 05:28Poďme si ukázať Pipe JSON
05:28 - 05:32V našom komponente si vytvorme premennú myJSON
05:32 - 05:34a vytvorme tam jednoduchý JSON objekt
05:34 - 05:39Pipe JSON nám ho zobrazí v podobe ako keby sme na neho použili JSON.stringify( )
06:16 - 06:19Poďme si ukázať Pipe SLICE ktorá dokáže
06:19 - 06:20orezať string
06:21 - 06:25Prijíma dva parametre, prvý je od ktorého znaku začíname
06:25 - 06:28a druhý - koľko znakov orezávame
06:28 - 06:29Poďme si to ukázať na príklade
06:53 - 06:57Poďme si ukázať ako formátovať čísla pomocou Pipe NUMBER
06:57 - 07:00V našom komponente si vytvorme 4 čísla
07:00 - 07:01ktoré použijeme
07:31 - 07:34Pipe NUMBER obsahuje aj parameter ktorý
07:34 - 07:37nastavuje formát čísla, vyzerá nasledovne
07:37 - 07:40Prvé číslo označuje koľko číslic sa má
07:40 - 07:44nachádzať pred čiarkou, v našom prípade to bude 1
07:44 - 07:46za bodkou je zase zápis s pomlčkou
07:46 - 07:50ktorý určuje rozsah koľko číslic sa má zobraziť za čiarkou
07:50 - 07:52v našom prípade napríklad 1-5
07:52 - 07:54Poďme si ukázať viaceré varianty
08:42 - 08:45Existuje Pipe PERCENT
08:45 - 08:47ktorá rovnakým spôsobom ako číslo
08:47 - 08:49dokáže formátovať percentá
09:36 - 09:39Angular obsahuje aj Pipe CURRENCY
09:39 - 09:42ktorá dokáže formátovať číslo ako menu
09:42 - 09:44Jej prvý parameter je názov meny
09:44 - 09:45teda jej skratka
10:00 - 10:03Pipe CURRENCY obsahuje aj druhý parameter
10:03 - 10:07ktorý môže byť TRUE alebo FALSE, ten nastaví skratku
10:07 - 10:09na symbol ktorý jej pripadá
10:33 - 10:35A existuje aj tretí parameter
10:35 - 10:40ktorý je presne taký istý ako pri čísle, teda nastavujeme počet číslic pred bodkou
10:41 - 10:43a počet číslic za bodkou
10:45 - 10:47Poďme si ukázať ASYNC Pipe
10:47 - 10:53Tú budeme používať vtedy keď z našeho komponentu potrebujeme zobraziť dáta ktoré idú zo streamu
10:53 - 10:55Pipe ASYNC teda zobrazí vždy tú poslednú
10:55 - 10:58hodnotu ktorá príde do streamu
10:58 - 11:00Ukážeme si to na jendoduchom príklade
11:01 - 11:03Do našeho komponentu si importnime Observable
11:03 - 11:07Observable a Subscriber z RxJS
11:18 - 11:22V našom komponente si vytvorme premennú observableTime
11:22 - 11:25ktorá bude typu Observable a bude obsahovať string
11:25 - 11:26v našom prípade to bude
11:26 - 11:27aktuálny čas a dátum
11:35 - 11:38Ešte si pridajme metódu ngOnInit( )
12:07 - 12:11Vytvorme si funkciu getCurrentTimeFromDataStream
12:11 - 12:13ktorá v intervale 1 sekundy
12:13 - 12:15vráti Observable
12:15 - 12:17s aktuálnym dátumom a časom
12:17 - 12:19Túto metódu priradíme
12:19 - 12:21premennej observableTime
13:09 - 13:11Našu premennú observableTime
13:11 - 13:14si pridáme do templatu s Pipe ASYNC
13:14 - 13:17Tá z dát streamu zobrazí vždy poslednú hodnotu
13:27 - 13:30Dostali sme chybu lebo som zabudol napísať
13:30 - 13:33slovo this(bodka) pred názvom funkcie
13:33 - 13:35getCurrentTimeFromDataStream
13:52 - 13:55A ako môžete vidieť Pipe ASYNC
13:55 - 13:58zobrazuje dáta zo streamu
13:58 - 14:00v intervale 1 sekundy
14:09 - 14:12Poďme si vytvoriť našu novú Pipe funkciu
14:13 - 14:16Pomocou príkazu ng generate pipe
14:17 - 14:19vytvorme do adresára ./pipes
14:19 - 14:20pipe
14:21 - 14:22s menom Useless
14:23 - 14:27To preto, že bude úplne zbytočná a nebude dokopy nič robiť
14:27 - 14:30ale na ukážku to bude stačiť, poďme na to
14:36 - 14:40Akákoľvek Pipe funkcia je v podstate len funkcia transform( )
14:40 - 14:42ktorá má premennú value
14:42 - 14:45kde sú vstupné dáta a argumenty, teda ľubovoľné parametre
14:45 - 14:48ktoré potrebujeme pre jej fungovanie
14:54 - 14:58My našej funkcii transform nastavíme typ string
14:58 - 15:01a pridáme parametre BEFORE a AFTER
15:01 - 15:02typu string
15:13 - 15:16a táto funkcia bude vracať string takže
15:16 - 15:18"any" prepíšeme na slovo "string"
15:26 - 15:29Vo vnútri našej funkcii transform( ) si vytvoríme premennú
15:29 - 15:32newStr ktorá bude string
15:32 - 15:36My pre uľahčenie práce použijeme backtick a template string feature
15:36 - 15:37z ES6
15:38 - 15:42pre zjednodušenie zápisu. Tento string z tejto funkcie vrátime
16:05 - 16:08a našu Useless Pipe použijeme v template
16:26 - 16:29Do našeho templatu si pridajme Pipe Useless
16:29 - 16:32a zadajme dva parametre ktoré sme jej pridali
16:32 - 16:35môžeme tam dať string START a string END
16:40 - 16:43a naša Useless Pipe vstupný string
16:43 - 16:46obalí textom START a END
16:54 - 16:57Poďme si vytvoriť užitočnejšiu Pipe funkciu
16:57 - 16:59s názvom CustomFilter
17:17 - 17:20V našom komponente si vytvorme premennú myFilterData
17:20 - 17:23ktorý bude pole objektov
17:23 - 17:26a dajme si tam ukážkové data, budú obsahovať meno
17:26 - 17:28a property CanFly
17:29 - 17:31ktoré môžu mať hodnotu TRUE alebo FALSE
17:31 - 17:35to podľa toho či daný superhrdina vie lietať alebo nie
17:35 - 17:37My to neskôr použijeme vo filtri
18:06 - 18:10Pomocou *ngFor si zobrazme našich superhrdinov v template
19:16 - 19:19Poďme si v našej Pipe vytvoriť filter funkcionalitu
19:19 - 19:21pre ukážku si tam pridajme
19:22 - 19:24console.log( ) pre value a argumenty
19:24 - 19:28a pomocou metódy filter prejdime všetky záznamy premennej value
19:28 - 19:32Vo vútri tejto funkcii len spravíme jednoduchú podmienku
19:32 - 19:35if( myData.canFly === args )
19:35 - 19:36argumens bude u nás
19:36 - 19:39hodnota TRUE alebo FALSE tak zavoláme return
19:39 - 19:42tento jendoduchý IF spôsobí to
19:42 - 19:45že ak bude v argumentoch napríklad FALSE
19:45 - 19:49tak sa vrátia len záznamy ktoré majú túto property nastavenú na FALSE
19:59 - 20:01Zduplikujme si náš výpis superhrdinov
20:01 - 20:05a pridajme ho spolu s Pipe CustomFilter
20:05 - 20:07kde prvý parameter bude nastavený na FALSE
20:07 - 20:11Teda zobrazia sa len superhrdinovia ktorí majú property
20:11 - 20:13CanFly nastavenú na FALSE
20:21 - 20:24A pridajme si ešte výpis s hodnotou CustomFilter TRUE
20:28 - 20:31A pre úplné pochopenie si ešte pozrite console.log( )
20:31 - 20:35kde v premennej "value" sú všetky záznamy premennej
20:35 - 20:37a v premennej "args" sú jendotlivé parametre
20:37 - 20:40u nás je to len jeden s hodnotou TRUE
20:40 - 20:41alebo FALSE
20:44 - 20:48Poďme si ešte ukázať spôsob ako zavolať našu Pipe
20:48 - 20:49vo vnútri komponentu
20:49 - 20:50Občas sa to môže hodiť
21:00 - 21:04V našom komponente si vytvorme premennú "pipeFromComponent"
21:05 - 21:06a bude to Object
21:10 - 21:13Vo vnútri našeho komponentu potom stačí zavolať
21:13 - 21:16new UselessPipe
21:16 - 21:19teda názov classy a jej metódu transform( )
21:19 - 21:21so všetkými povinnými parametrami
21:32 - 21:36V tejto časti sme si ukázali základnú prácu s Pipes funkciami
21:36 - 21:38Ako sa pracuje s prednastavenými Pipes
21:38 - 21:40ktoré má Angular už v sebe
21:40 - 21:42ale vytvorili sme si aj dve vlastné funkcie
21:42 - 21:45pre transformáciu a filtrovanie dát
21:47 - 21:49Dúfam, že sa Vám dnešné video páčilo
21:50 - 21:51a uvidíme sa nabudúce

PipesZáklady práce a vytvorenie vlastných pipes

V tejto časti si ukážeme preddefinované pipes funkcie Angularu a vytvoríme pár vlastných pipes funkcií s vlastnými parametrami

Čo je to Pipe funkcia?

Každá aplikácia vyzerá podobne - získať dáta, pretransformovať ich, a zobraziť v template. Ako dáta prídu do Vašeho templatu často sú v surovej forme ktorá má ďaleko od dobrého UI.

Napríklad, dátum z databázy môže prísť v štandardnom ISO formáte ktorý vyzerá napríklad takto: Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time) ale my tieto dáta potrebujeme zobraziť ako April 15, 1988.

Buť nám správny formát vráti backend alebo použijeme pipe funkcie pre ich transformáciu. V tomto prípade by to vyzeralo nasledovne:


{{ myDate | date:"MM/dd/yy" }}



V tomto videu si ukážeme základné prednastavené pipes Angularu a vytvoríme aj 2 vlastné pipe funkcie.


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


Diskusia