X

Vitajte!

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

00:13 - 00:16Vitajte, moje meno je Peter Oravec
00:16 - 00:19a budem Vás sprevádzať v tomto kurze
00:19 - 00:21Prihovárať sa Vám budem cez tohoto avatara
00:21 - 00:22v tvare Angular loga
00:22 - 00:23Pekný nie?
00:24 - 00:27Vitajte v prvej časti kurzu frameworku Angular 2
00:28 - 00:30V nasledujúcich troch minútach Vám vysvetlím
00:31 - 00:34Čo je Angular, čo s ním môžete robiť
00:34 - 00:37a už v tomto videu si vytvoríme našu prvú
00:37 - 00:39Angular aplikáciu pomocou Angular CLI
00:41 - 00:42Poďme na to!
00:43 - 00:44Čo je to Angular?
00:45 - 00:48Angular je jeden z popredných frameworkov pre vývoj
00:48 - 00:51robustných javascriptových single-page aplikácií
00:52 - 00:54Ale, čo sú to single-page aplikácie?
00:55 - 00:57Porovnajme ich s klasickými webstránkami
00:58 - 01:01Pri klasickej webstránke keď klikneme na odkaz
01:01 - 01:04stránka sa refreshne a nový obsah sa načíta spolu s ňou
01:05 - 01:08Pri single-page aplikácii namiesto toho
01:08 - 01:10aby sa stránka načítala nanovo tak
01:10 - 01:12sa načíta len určitá časť templatu za nový obsah
01:14 - 01:17Užívateľ sa dokonca stále môže navigovať tlačidlami
01:17 - 01:19dopredu a dozadu
01:19 - 01:21a single-page aplikácia vždy zobrazí
01:21 - 01:23správny stav
01:23 - 01:26Vďaka tomu je user experience neprerušovaná a aplikácia pôsobí svižne
01:28 - 01:31Asi najlepším príkladom single-page aplikácie je Gmail
01:31 - 01:36v ktorom píšete, čítate, upravujete, filtrujete svoje emaily, nahrávate do nich prílohy
01:37 - 01:41do toho chatujete s priateľmi a to všetko naraz bez jediného refreshu
01:43 - 01:48V dnešnej dobe ale existuje veľké množstvo iných frameworkov ktoré sľubujú to isté, prečo práve Angular?
01:50 - 01:51No, je tu už pár rokov
01:52 - 01:53má svoju históriu
01:53 - 01:54veľkú komunitu
01:55 - 01:56a hlavne udržiava ho samotný Google
01:58 - 02:01Záujem o Angular teda neustále stúpa a ďalších fanúšikov si ešte len získa
02:02 - 02:06Preto dúfam, že tento kurz Vás inšpiruje a budete ďalší koho Angular zaujme
02:09 - 02:13V tomto kurze sa naučíme základy Angularu krok za krokom
02:13 - 02:15v čo najzrozumiteľnejšej a najjednoduchšej forme
02:17 - 02:18Ak teda už poznáte Angular 1
02:19 - 02:22tak v tomto prípade je to úplne jedno lebo Angular 2 je nový framework
02:23 - 02:24ktorý sa poučil z chýb jednotky
02:25 - 02:26a všetko bolo prebudované od základu
02:28 - 02:31Mimichodom Angular 2+ sa píše v TypeScripte od Microsoftu
02:33 - 02:36Určite sa pýtate prečo nie v Javascripte, čo s ním je zle?!
02:39 - 02:45TypeScript je nadstavba Javascriptu ktorá ho dopĺňa o nové funkcie
02:45 - 02:49ktoré niesú podporované v aktuálnej verzii samotného Javascriptu
02:50 - 02:51Sú to napríklad:
02:51 - 02:51Moduly
02:51 - 02:52Classy
02:52 - 02:52Interface
02:52 - 02:56Modifiery ako public, private
02:57 - 02:58Type-checking, Intellisense
02:58 - 03:00A mnoho ďalších
03:01 - 03:02Nebojte sa
03:03 - 03:05Typescript sa Vám zaručene zapáči
03:05 - 03:09lebo každý validný Javascript je zároveň aj validný Typescript
03:09 - 03:11to znamená, že sa nebudete musieť učiť
03:12 - 03:14úplne nový jazyk od základov
03:14 - 03:17ale len rozšírite svoju znalosť Javascriptu o nové funkcie
03:19 - 03:21Ešte jedna dôležitá vec na upresnenie
03:22 - 03:23Koľko verzií Angularu existuje?
03:25 - 03:27Aktuálne je to Angular 2
03:27 - 03:284
03:28 - 03:30verzia 3 dokonca neexistuje a bola preskočená
03:31 - 03:33a do konca roku 2018 to bude aj
03:33 - 03:35Angular 5, 6 a 7
03:38 - 03:41Angular 2 prináša len iné označovanie verzií
03:41 - 03:47takže Angular 4,5,6,7 je stále ten istý Typescriptový Angular 2
03:49 - 03:52Nastal čas nainštalovať si vývojové prostredie
03:53 - 03:55k práci potrebujeme len jednu jedinú vec
03:55 - 03:56Node Package Manager
03:57 - 03:58ktorý je súčasťou technológie Node.js
03:58 - 04:00otvorme si terminál
04:00 - 04:01a zadajme príkaz
04:03 - 04:05npm -v
04:06 - 04:10ak sa Vám zobrazí číslo verzi Node Package Manager máme nainštalovaný
04:10 - 04:12a môžme začať rovno pracovať
04:12 - 04:13ak ho nemáte
04:13 - 04:15stiahnite si ho zo stránky
04:15 - 04:17http://nodejs.org
04:22 - 04:24stiahnite si ľubovoľnú verziu
04:25 - 04:26nainštalujte ju
04:27 - 04:29a po zadaní príkazu "npm -v"
04:29 - 04:31by ste mali vidieť číslo verzie
04:31 - 04:34vtedy máte všetko správne nainštalované
04:36 - 04:40Teraz si ukážeme ako vytvoriť jednoduchú Angular aplikáciu pomocou AngularCLI
04:42 - 04:45AngularCLI je commandlinový interface
04:46 - 04:48vďaka ktorému je práce s Angularom úplne jednoduchá
04:49 - 04:50Čo všetko umožňuje?
04:51 - 04:55Pomocou príkazu "ng new" vytvárate nové Angular aplikácie
04:55 - 04:58AngularCLI za Vás vytvorí potrebnú adresárovú štruktúru
04:59 - 05:02konfiguračné súbory pre unit testy, e2e testy
05:02 - 05:04a vytvorí za Vás
05:04 - 05:06defaultný modul a základný komponent
05:07 - 05:10jednoducho po zadaní "ng new" sa netrápite s nastavovaním Angularu
05:11 - 05:12ale rovno začínate programovať
05:14 - 05:17Príkaz "ng generate" za vás vygeneruje komponenty, servisy, pipy
05:18 - 05:20a ďalšie stavebné bloky Angular appky
05:20 - 05:22jednoduchým zavolaním príkazu
05:24 - 05:28Napríklad pri vytváraní komponentu za Vás vytvorí template s CSS súborom
05:28 - 05:30a naimportuje ho všade kde treba
05:31 - 05:32a vy ho len začnete používať
05:34 - 05:39Cez príkaz "ng serve" si viete svoju aplikáciu pozerať v LIVE reload móde
05:39 - 05:45kde každá zmena vo Vašej aplikácii sa hneď prejaví bez toho aby ste museli refreshovať svoju Angular aplikáciu
05:48 - 05:49AngularCLI vie
05:50 - 05:53okrem toho púšťať unit testy a e2e testy cez Protractor
05:53 - 05:56všetky konfiguračné súbory sú na to už predpripravené
05:58 - 06:01Kým začneme je potrebné si nainštalovať AngularCLI
06:02 - 06:03takže si otvoríme terminál
06:04 - 06:05a zadáme
06:09 - 06:10A zadáme...
06:10 - 06:19npm install -g @angular/cli
06:20 - 06:22-g nainštaluje AngularCLI globálne
06:29 - 06:32Vytvorme si pracovný adresár pre našu aplikáciu
06:38 - 06:40Otvorte si tento adresár v termináli
06:47 - 06:49Teraz stačí napísať
06:50 - 06:52"ng new" a názov appky
07:00 - 07:02V našom adresári si AngularCLI vytvoril novú aplikáciu
07:02 - 07:04Čo všetko obsahuje?
07:05 - 07:08Tu môžete vidieť konfiguračný súbor nastavenia TypeScriptu kompilátora
07:09 - 07:12konfiguračný súbor pre e2e testy cez Protractor
07:13 - 07:17konfiguračný súbor pre Karma task runner pre unit testy
07:18 - 07:21Tu sú konfiguračné súbory pre environmenty aplikácie
07:22 - 07:25a tu je vytvorený základný modul a komponent
07:26 - 07:29Aby sme si pozreli našu aplikáciu v LIVE reload móde
07:31 - 07:33Otvorme si adresár našeho projektu
07:44 - 07:46A zadajme príkaz "ng serve"
07:47 - 07:51Toto vytvorí rýchly build a URL localhost počúvajúcu na porte 4200
07:58 - 08:00Ak vidíte presne to isté čo ja
08:00 - 08:04gratulujem, vytvorili ste svoju prvú Angular aplikáciu
08:07 - 08:11"ng serve" beží, naša aplikácia počúva na porte 4200
08:12 - 08:15Akékoľvek zmeny vo Vašom kóde sa hneď prejavia
08:15 - 08:17a vy nemusíte stránku manuálne refreshovať
08:20 - 08:21Dobré, nie?
08:22 - 08:24V tomto videu sme si povedali, čo je Angular
08:24 - 08:26aké sú jeho verzie
08:26 - 08:29nainštalovali sme si vývojové prostredie
08:29 - 08:32a vytvorili našu prvú aplikáciu pomocou AngularCLI
08:33 - 08:37Ďakujem Vám za pozornosť a vidíme sa v ďalšom videu

Úvod do Angular 2+Základné informácie

V tejto časti sa dozviete "Čo je to Angular", "Čo sa s ním dá robiť..." a nainštalujeme si vývojové prostredie (NPM - Node Package Manager) a vytvoríme prvú Angular aplikáciu pomocou Angular CLI

Angular je jeden z popredných frameworkov pre tvorbu tzv. single-page aplikácii (alebo ak chcete SPA).

Čo sú to single-page aplikácie?

Porovnajme si ich s klasickými webstránkami, pri klasickej webstránke sa po kliku na odkaz stránka refreshne a nový obsah sa načíta spolu s ňou. Pri SPA aplikácii sa stránka načíta len raz, všetko po ostatné sa deje na pozadí. Užívateľský zážitok je tak neprerušovaný a aplikácia pôsobí svižne.

TypeScript

Angular 2+ sa píše v TypeScripte od Microsoftu. Je to superset (nadstavba) JavaScriptu ktorá ho dopĺňa o ďalšie funkcie ktoré zatiaľ nie sú dostupné v aktuálnej verzii JavaScriptu. Sú to napríklad:

  • classy
  • interface
  • modifiery (public, private)
  • type-checking
  • intellisense
  • a veľa ďalších...

Každý validný JavaScript je zároveň aj validný Typescript takže naučiť sa ho nevyžaduje učiť sa niečo nové úplne od základov ale len rozšíriť svoje existujúce znalosti JavaScriptu o nové funkcie.



Inštalácia vývojového prostredia

Pre začiatok práce s Angularom je potrebné si nainštalovať NPM ktorý je súčasťou technológie Node.js. Stiahnite a nainštalujte si ho zo stránky http://nodejs.org (na verzii nezáleží). Po úspešnej inštalácii skontrolujte či NPM funguje. Ak sa zobrazí číslo verzie, NPM máte úspešne nainštalované.

                    #otvorte terminál a zadajte tento príkaz pre zobrazenie verzie NPM
npm -v
                

Inštalácia Angular CLI


NPM máme nainštalované a nastal čas si nainštalovať Angular CLI. Angular CLI je command line interface ktorý nám uľahčí prácu s Angularom. Pomocou jednoduchých príkazov viete vytvárať:

  • komponenty
  • direktívy
  • servisy
  • pipes
  • routes
  • guards
  • spúšťať unit testy
  • spúšťať e2e testy cez Protractor
  • a mnoho iných prvkov...



Angular CLI nainštalujete zadaním príkazu:

                    #tento príkaz nainštaluje Angular CLI globálne
npm install -g @angular/cli
                

ng new

Pomocou tohoto príkazu vytvárate nové Angular aplikacie. Angular CLI za vás vytvorí potrebnú stromovú štruktúru, predpripraví konfiguračné súbory pre unit testy, e2e testy a environmenty. Tiež za vás vytvorí základný modul a komponent. Vy tak môžete začať rovno programovať.

ng generate

Pomocou príkazu ng generate viera do svojej aplikácie pridávať nové komponenty, servicy a iné stavebné bloky Angular aplikacie jednoduchým príkazom.

Okrem toho že Angular CLI vytvorí takýto nový element tak za vás pridá na správne miesto aj všetky importy, deklarácie a ostatné potrebné veci aby Váš nový prvok v oblasti Vašom kóde fungoval.

Toto je veľmi pohodlné lebo napr. vytvorenie a pridanie nového komponentu si vyžaduje vytvorenie viacerých súborov a pridanie importu, deklarácií do ostatných súborov vo vašom kóde.

ng serve

Tento príkaz vytvorí rýchly build pomocou ktorého viete svoju aplikáciu vyvíjať a sledovať zmeny bez nutnosti stránku refreshovať. Akákoľvek zmena v kóde sa hneď prejaví a Angular CLI aplikáciu za vás reštarte.



Diskusia