X

Vitajte!

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

00:18 - 00:19Vitajte
00:20 - 00:23v tomto videu si povieme o stavebných blokoch
00:23 - 00:26každej Angular aplikácie, konkrétne o komponentoch
00:27 - 00:28Pre upresnenie...
00:29 - 00:31Čo sú stavebné bloky každej Angular aplikácie?
00:32 - 00:33Sú to:
00:33 - 00:35Komponenty, servisy
00:35 - 00:37moduly, templaty
00:38 - 00:41metadata a dekorátory, data-binding
00:41 - 00:44direktívy, routre, pipes
00:44 - 00:46dependency injection
00:46 - 00:49Dnes si povieme hlavne o komponentoch
00:49 - 00:52Ukážeme si ako vytvoriť nové komponenty pomocou
00:52 - 00:53Angular CLI
00:54 - 00:56A predpripravíme si komponenty ktoré zatiaľ nebudú
00:56 - 01:00nič robiť ale v ďalších dieloch im dáme viac života
01:05 - 01:08Komponent je hlavný stavebný prvok Angular aplikácie
01:08 - 01:12Angular 2+ je component based framework
01:12 - 01:14takže hlavnou ideou za programovaním
01:14 - 01:17v Angulari je, že jednotlivé časti Vašej aplikácie
01:17 - 01:19sú oddelené komponenty
01:19 - 01:22ktoré zložíte do jedného celku ktorý vytvorí
01:22 - 01:23Vašu aplikáciu
01:23 - 01:26Každý komponent je oddelená časť kódu
01:26 - 01:28ktorá obsahuje vlastnú logiku a template
01:28 - 01:29pre svoje fungovanie
01:29 - 01:31Vďaka tomu sa ľahko udržiava
01:32 - 01:34a je aj ľahko prepoužiteľný
01:34 - 01:37lebo logika jedného komponentu nezasahuje do logiky druhého
01:39 - 01:42Ako by vyzerala jednoduchá stránka zložená z komponentov?
01:42 - 01:44Poďme si to ukázať
01:46 - 01:50Obsahovala by hlavný komponent ktorý môžeme nazývať aj ROOT komponent
01:50 - 01:54Každá webstránka obsahuje HEADER a FOOTER
01:54 - 01:56Naša webstránka bude mať aj SIDEBAR
01:58 - 02:01Hlavná časť layoutu bude dynamická
02:01 - 02:03a obsah sa bude meniť podľa potreby
02:04 - 02:07V hlavnej časti zobrazíme užívateľov v prehľadnom gride
02:08 - 02:11ktorý nazvime USER GRID
02:13 - 02:16Aby náš template nebol zložitý a ostal udržateľný
02:16 - 02:18jednotlivé bloky o užívateľoch
02:18 - 02:20budú vykreslené v samostatnom komponente
02:21 - 02:23Môžeme ho volať USERINFO
02:25 - 02:27Teraz to vytvoríme...
02:27 - 02:28Poďme na to!
02:34 - 02:36Vytvorme nový adresár pre našu appku
02:37 - 02:39a otvorme si ho v termináli
02:45 - 02:47Zadajte príkaz NG NEW
02:48 - 02:50a názov aplikácie
02:52 - 02:55Angular CLI vytvorí všetko potrebné
02:57 - 02:59Otvoríme si projekt v editore
03:00 - 03:01ja použijem WebStorm
03:13 - 03:15Pustíme si našu Angular aplikáciu pomocou
03:15 - 03:16ng serve
03:18 - 03:19Ako vidíte, dostali sme error
03:20 - 03:24To preto, že NG SERVE musíme púšťať v adresári
03:24 - 03:25Angular aplikácie
03:26 - 03:27a tam nie sme
03:27 - 03:30preto musíme vojsť do adresára "myapp"
03:31 - 03:33ng serve beží
03:34 - 03:37a po zadaní URL adresy localhost
03:37 - 03:39na porte 4200
03:39 - 03:41by sme mali vidieť našu Angular aplikáciu
03:45 - 03:47V tejto aplikácii chceme použiť Bootstrap
03:48 - 03:49tak si stiahneme jeho CSS
03:49 - 03:52a umiestnime ho ako lokálny asset do našej aplikácie
03:56 - 04:00do adresára assetov vytvoríme súbor bootstrap.css
04:01 - 04:05a dáme tam CSS boostrapu ktoré použijeme ako lokálny asset
04:11 - 04:16otvoríme si konfiguračný súbor angular-cli.json
04:16 - 04:18a do sekcie štýlov
04:18 - 04:21doplníme našu URL pre Bootstrap
04:24 - 04:28Vďaka tomu bude Angular CLI počas kompilácie vedieť
04:28 - 04:31že aj náš nový Boostrap je jeho súčasťou
04:31 - 04:33a pridá ho ho balíka štýlov
04:37 - 04:40Teraz si overíme či náš Boostrap funguje
04:41 - 04:43Do našeho hlavného templatu si pridáme
04:44 - 04:47button s bootstrapovskou classou BTN-PRIMARY
04:47 - 04:50a uvidíme či štýl bootstrapu sa na neho aplikuje
04:56 - 04:58Ako vidíte všetko je po starom
04:58 - 05:01a pritom všetko je natavené dobre
05:01 - 05:03Prečo to tak je?
05:04 - 05:06Dôvod je jednoduchý...
05:07 - 05:11Stačí nám reštartovať našu Angular aplikáciu
05:11 - 05:14Pretože štýly sa tiež kompilujú
05:14 - 05:17musia byť súčasťou balíka ktorý si Angular musí vytvoriť
05:17 - 05:20a tým, že naša aplikácia ešte nebola
05:20 - 05:23rekompilovaná Boostrap nie je jeho súčasťou
05:46 - 05:49V adresári "app" vytvoríme nový adresár "components"
05:50 - 05:53kde vytvoríme HEADER, FOOTER a SIDEBAR
05:53 - 05:56a všetky ostatné komponenty ktoré budeme potrebovať
05:57 - 06:00Ďalej pomocou príkazu NG GENERATE
06:00 - 06:03alebo skrátene NG G COMPONENT
06:04 - 06:07vytvoríme komponent HEADER v adresári "components"
06:19 - 06:22Tento príkaz nám vytvoril 4 súbory, CSS
06:22 - 06:26HTML template, spec pre unit testy
06:26 - 06:28a TypeScript súbor nášho komponentu
06:31 - 06:34Spec pre unit testy zatial nebudeme potrebovať
06:34 - 06:35Môžeme ho zmazať
06:37 - 06:39Každý komponent obsahuje SELEKTOR
06:40 - 06:42Je to jeho názov ktorým
06:42 - 06:45ho voláme v ostatných templatoch
06:46 - 06:48Aj keď sme náš komponent nazvali HEADER
06:48 - 06:51tak má prefix "app-"
06:51 - 06:53V prípade, že takýto prefix nechceme
06:53 - 06:55stačí ísť do nastavenia Angular CLI
06:56 - 06:58a položku prefix nastaviť na prázdnu
07:04 - 07:07Ďalej tu máme TypeScript súbor nášho komponentu
07:07 - 07:09samostatný CSS súbor štýlov
07:10 - 07:12a samostatný HTML template
07:18 - 07:21Poďme si pridať HEADER komponent do nášho templatu
07:28 - 07:31Trochu si to odsadíme aby to pekne vyzeralo
07:50 - 07:53A trochu si naštýlujeme aj HEADER komponent
08:08 - 08:09Poďme si vytvoriť FOOTER
08:14 - 08:16Angular CLI nám umožňuje
08:16 - 08:18vložiť dodatočné parametre vďaka ktorým
08:18 - 08:23napríklad štýly či template budú vložené inline
08:23 - 08:24Poďme to tak spraviť
08:32 - 08:35Ako vidíte vygenerovalo nám to len 2 súbory
08:36 - 08:38Pre unit testy ktorý teraz zmažeme
08:38 - 08:41a všetko ostatné je v jednom jedinom template
08:48 - 08:49Poďme ho oštýlovať
09:23 - 09:26Všimnite si, že obidva naše komponenty obsahujú H1 tag
09:28 - 09:30Každý z nich má mať inú farbu
09:30 - 09:33a aj keď sú zadefinované veľmi všeobecne
09:33 - 09:35tak sa vzájomne neprepisujú
09:37 - 09:39Štýly v komponentoch sú izolované
09:39 - 09:41a patria len danému komponentu
09:52 - 09:55Poďme si vytvoriť SIDEBAR komponent
09:56 - 09:58štandardným spôsobom
09:58 - 10:01ale ukážeme si ešte jeden parameter
10:02 - 10:03FLAT
10:06 - 10:08FLAT parameter robí len jednu jedinú vec
10:10 - 10:12Nevytvára samostatný adresár
10:12 - 10:14podľa názvu komponentu
10:16 - 10:19ale vloží súbory tam kde práve
10:19 - 10:21voláte NG GENERATE, v našom prípade
10:22 - 10:24ich uloží rovno do adresára "components"
10:28 - 10:31Teraz si naštýlujeme SIDEBAR komponent
10:55 - 10:58Vytvorme si posledný komponent USER LIST
10:59 - 11:02Všimnite si, že za adresárom "components"
11:02 - 11:04zadávam ešte adresár "user"
11:04 - 11:07aby sme úplne oddelili komponenty ktoré patria
11:07 - 11:09User Listu
11:10 - 11:13Podobným spôsobom môžete vytvoriť ľubovoľnú adresárovú štruktúru
11:13 - 11:15pre Vaše komponenty
11:16 - 11:19Je dobré v nich spraviť poriadok už na začiatku
11:22 - 11:24Ešte posledné úpravy
11:25 - 11:27a naše komponenty máme pripravené
11:47 - 11:49Poďme si pozrieť obsah nášho hlavného modulu
11:50 - 11:51Použitím NG GENERATE
11:52 - 11:53Angular CLI
11:53 - 11:56za nás do hlavného modulu vytvorí všetky potrebné importy
11:56 - 11:59so správnymi cestami a pridá deklarácie
11:59 - 12:01na všetky komponenty ktoré sme vytvorili
12:01 - 12:04Vy sa tak nemusíte starať o tieto drobnosti
12:04 - 12:06a všetko vyrieši Angular CLI z Vás
12:07 - 12:10V tomto videu sme si ukázali ako vytvoriť základné komponenty
12:11 - 12:12pomocou Angular CLI
12:13 - 12:16Ukázali sme si rôzne spôsoby ako vytvoriť štruktúru
12:16 - 12:19pre naše komponenty a zároveň aj rôzne
12:19 - 12:22parametre ktoré upravujú nami vytvorené
12:22 - 12:24komponenty a obsah ich súborov
12:26 - 12:28Naše komponenty zatiaľ nič nerobia
12:28 - 12:30ale to sa čoskoro zmení
12:31 - 12:34Ďakujem za pozornosť a vidíme sa v ďalšom videu

KomponentyStavebné bloky Angular aplikácie

V tejto časti si povieme o stavebných blokoch každej Angular aplikácie. A konkrétne o tej najhlavnejšej, o komponentoch.

Čo je to komponent?

Komponent je hlavný stavebný prvok Angular aplikácie. Angular 2+ je komponent based framework, takže hlavnou ideou pri programovaní v Angulari je, že jednotlivé časti Vašej aplikácie sú oddelené komponenty ktoré zložíte do jedného celku ktorý vytvorí Vašu aplikáciu.

Každý komponent je oddelená časť kódu ktorá obsahuje vlastnú logiku a template pre svoje fungovanie. Vďaka tomu sa ľahko udržiava a je aj ľahko prepoužiteľný lebo logika jedného komponentu nezasahuje do logiky druhého.

Ako by vyzerala jednoduchá stránka zložená z komponentov? Takto...

  • Obsahovala by hlavný komponent ktorý môžeme nazývať aj ROOT komponent
  • Každá webstránka obsahuje HEADER a FOOTER
  • Naša webstránka bude obsahovať aj SIDEBAR
  • Hlavná časť layoutu bude dynamická a obsah sa bude meniť podľa potreby
  • V hlavnej časti zobrazíme zoznam užívateľov v prehľadnom gride a napríklad ho nazveme USER GRID
  • Aby náš template nebol zložitý a ostal udržateľný jednotlivé bloky o užívateľoch budú vykreslené v samostatnom komponente - USER INFO


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

Vytvorenie komponentu cez Angular CLI

Nový komponent vytvoríte zadaním príkazu ng generate component

                    
#dlhý zápis
ng generate component ./mojaurl/NazovKomponentu

#skrátený zápis
ng g c NazovKomponentu


#parametre:
--flat               - nevytvára si samostatný adresár s názvom komponentu ale vytvorí ich do aktuálneho adresára
--inline-style       - nevytvára samostatný súbor pre CSS
--inline-template    - nevytvára samostatný súbor pre template
                    
                

Viac informácií o parametroch a možnostiach Angular CLI nájdete na tejto adrese https://github.com/angular/angular-cli/wiki/generate



Diskusia