LUMIFY WORK Angular 12 Programovanie

PREČO ŠTUDOVAŤ TENTO KURZ

Tento komplexný kurz programovania Angular 12 je kombináciou teoretického učenia a praktických cvičení, ktoré zahŕňa úvod do Angular, po ktorom nasleduje TypeScript, komponenty, smernice, služby, HTTP klient, testovanie a ladenie.
Kurz je nabitý užitočnými a praktickými informáciami, ktoré môžete okamžite použiť vo svojej práci. Naučte sa základy základného vývoja Angular 12, ako sú napríklad aplikácie jednostránkového prehliadača, responzívne webstránky a hybridné mobilné aplikácie.
Poznámka: Môžeme poskytnúť školenie aj na iných verziách Angular. Prosím, kontaktujte nás pre dopyt alebo registrujte svoj záujem.

ČO SA NAUČÍTE
Po úspešnom absolvovaní tohto kurzu budete vedieť:

• Vyvíjajte jednostránkové aplikácie Angular pomocou Typescript
• Nastavte kompletné vývojové prostredie Angular
• Vytvárajte komponenty, smernice, služby, kanály, formuláre a vlastné validátory
• Zvládnite pokročilé úlohy získavania sieťových údajov pomocou Observables Consume data z REST web služby pomocou klienta Angular HT TP Spravujte pripojenia push-data pomocou WebProtokol zásuviek
• Pri formátovaní údajov pracujte s Angular Pipes
• Používajte pokročilé funkcie uhlového komponentného smerovača
• Testujte a ladte aplikácie Angular pomocou vstavaných nástrojov.

PREDMETY KURZOV

Kapitola 1. Predstavenie Angular

• Čo je Angular?
• Centrálne vlastnosti Angular Framework Vhodné prípady použitia
• Stavebné bloky uhlovej aplikácie Základná architektúra uhlovej aplikácie Inštalácia a používanie Angular
• Anatómia uhlovej aplikácie Spustenie aplikácie
• Vytvorenie a nasadenie aplikácie Angular pre natívne mobilné aplikácie
• Zhrnutie

Kapitola 2. Úvod do TypeScript

• Programovacie jazyky na použitie so syntaxou Angular TypeScript
• Editori programovania
• Typový systém – Definovanie premenných
• Typový systém – Definovanie polí
• Základné primitívne typy
• Zadajte funkcie
• Inferencia typu
• Definovanie tried
• Triedne metódy
• Kontrola viditeľnosti
• Konštruktéri triedy
• Konštruktory tried – neinicializované polia alternatívnych foriem
• Rozhrania
• Práca s modulmi ES6
• var vs let
• Funkcie šípok
• Funkcia šípok Reťazce šablón kompaktnej syntaxe
• Generiká v triede
• Generics in Function
• Zhrnutie

Kapitola 3. Komponenty

• Čo je komponent?
• Example Komponent
• Vytvorenie komponentu pomocou Angular CLI
• Trieda komponentov
• @Component Decorator
• Registrácia komponentu do jeho šablóny komponentu modulu
• Example: HelloComponent Template
• Example: Trieda HelloComponent pomocou komponentu
• Spustite aplikáciu
• Hierarchia komponentov
• Koreňový komponent aplikácie
• Bootstrap File
• Háčiky životného cyklu komponentov Prample Lifecycle Háčiky
• CSS štýly
• Zhrnutie

Kapitola 4. Šablóny komponentov

• Šablóny
• Umiestnenie šablóny
• Syntax Fúzy {{ }}
• Nastavenie vlastností prvku DOM
• Nastavenie textu tela prvku
• Väzba udalosti
• Obslužný program udalosti výrazu
• Zabrániť predvolenej manipulácii
• Smernice o atribútoch
• Použite štýly zmenou tried CSS
• Example: ngClass
• Priama aplikácia štýlov
• štrukturálnych smerníc
• Podmienečne spustiť šablónu
• Example: ngIf
• Looping pomocou ngFor
• ngPre lokálne premenné
• Manipulácia so zbierkou Prample – Odstránenie položky
• Sledovanie položiek pomocou ngPre výmenu prvkov s prvkami zoskupenia ngSwitch
• Súhrn referenčnej premennej šablóny

Kapitola 5. Komunikácia medzi komponentmi

• Základy komunikácie
• Architektúra toku údajov
• Príprava dieťaťa na príjem údajov
• Odoslať údaje od rodiča
• Viac o nastavení vlastností
• Udalosť spustenia z komponentu
• @Output() Naprample – Child Component @Output() Prample – Nadradený komponent
• Úplné obojsmerné viazanie
• Nastavenie obojsmernej dátovej väzby v nadradenom zariadení
• Zhrnutie

Kapitola 6. Formuláre riadené šablónou

• Formuláre riadené šablónou
• Import modulu formulárov
• Základný prístup
• Nastavenie formulára
• Získanie používateľského vstupu
• Vynechanie atribútu ngForm
• Inicializujte formulár
• Obojsmerná dátová väzba
• Validácia formulára
• Uhlové validátory
• Zobrazenie stavu overenia pomocou tried Ďalšie typy vstupu
• Začiarkavacie políčka
• Vyberte (rozbaľovacie) polia
• Možnosti vykreslenia pre polia Vybrať (rozbaľovací) dátum
• Prepínače
• Zhrnutie

Kapitola 7. Reaktívne formy

• Reactive Forms Overview
• Stavebné bloky
• Importujte modul ReactiveFormsModule
• Vytvorte formulár
• Navrhnite šablónu
• Získavanie vstupných hodnôt
• Inicializácia vstupných polí
• Nastavenie hodnôt formulára
• Prihlásenie na odber zmien vstupu
• Validácia
• Vstavané validátory
• Zobrazuje sa chyba overenia
• Vlastný validátor
• Použitie vlastného validátora
• Dodanie konfigurácie do vlastného validátora
• FormArray – Dynamické pridávanie vstupov
• FormArray – Trieda komponentov
• FormArray – šablóna
• FormArray – Hodnoty
• Sub FormGroups – Trieda komponentov
• Sub FormGroups – HTML šablóna
• Prečo používať podskupiny formulárov
• Zhrnutie

Kapitola 8. Služby a injekcia závislosti

• Čo je to služba?
• Vytvorenie základnej služby
• Servisná trieda
• Čo je to Dependency Injection?
• Vloženie inštancie služby
• vstrekovače
• Hierarchia vstrekovačov
• Registrácia služby pomocou koreňového injektora
• Registrácia služby pomocou vstrekovača komponentu
• Zaregistrujte si službu pomocou vstrekovača s funkčným modulom
• Kde zaregistrovať službu?
• Vloženie závislosti v iných artefaktoch poskytujúcich alternatívnu injekciu závislosti implementácie a @Host
• Dependency Injection a @Voliteľné
• Zhrnutie

Kapitola 9. HTTP klient

• Klient Angular HT TP
• Používanie klienta HT TP – Overview
• Importuje sa modul HttpClientModule
• Služba pomocou HttpClient
• Podanie žiadosti GET
• Čo robí pozorovateľný objekt?
• Používanie Služby v Komponente
• Spracovanie chýb komponentu klienta PeopleService
• Prispôsobenie objektu chyby
• Podanie žiadosti o POST
• Zadanie požiadavky PUT
• Podanie žiadosti o VYMAZANIE

Kapitola 10. Rúry a formátovanie údajov

• Čo sú Pipes?
• Vstavané potrubia
• Používanie rúr v reťazení rúr HTML šablón
• Internacionalizované potrubia (i18n) Načítavajú sa lokálne údaje
• Dátum Pipe
• Číslo Pipe
• Menová fajka
• Vytvorte si vlastnú fajku
• Vlastné potrubie naprample
• Používanie vlastných potrubí
• Použitie potrubia s ngFor
• Filtračné potrubie
• Kategória potrubia: čisté a nečisté
• Zhrnutie
• Pure Pipe Example
• Nečisté potrubie naprample
• Zhrnutie

Kapitola 11. Úvod do jednostránkových aplikácií

• Čo je tradičná jednostránková aplikácia (SPA). Web Aplikácia
• Pracovný postup SPA
• Jednostránková aplikácia Advantages HTML5 History API
• SPA výzvy
• Implementácia SPA pomocou Angular Summary

Kapitola 12. Uhlový komponentný smerovač

• Komponentný smerovač
• View Navigácia
• Angular Router API
• Vytvorenie aplikácie s povoleným smerovačom
• Hostenie smerovaných komponentov
• Navigácia pomocou odkazov a tlačidiel
• Programová navigácia
• Parametre prechodu trasy
• Navigácia pomocou parametrov trasy
• Získanie hodnôt parametrov trasy
• Synchrónne získavanie parametra trasy
• Asynchrónne získavanie parametra trasy
• Parametre dopytu
• Dodanie parametrov dopytu
• Asynchrónne získavanie parametrov dotazu
• Problémy s manuálom URL vstup a záložka
• Zhrnutie

Kapitola 13. Rozšírený klient HTTP

• Možnosti žiadosti
• Vrátenie objektu HttpResponse
• Nastavenie hlavičiek požiadaviek
• Vytváranie nových pozorovateľných objektov
• Vytvorenie jednoduchého pozorovateľného objektu
• Metóda pozorovateľného konštruktora Pozorovateľné operátory
• Mapa a filter Operátori
• Operátor flatMap().
• Operátor tap().
• Kombinátor zip().
• Ukladanie odpovede HT TP do vyrovnávacej pamäte
• Uskutočňovanie sekvenčných hovorov HT TP
• Uskutočňovanie paralelných hovorov
• Prispôsobenie objektu chyby pomocou funkcie catchError()
• Chyba v potrubí
• Obnova po chybe
• Zhrnutie

Kapitola 14. Uhlové moduly

• Prečo uhlové moduly?
• Anatómia modulovej triedy
• Vlastnosti @NgModule
• Moduly funkcií
• Example Štruktúra modulu
• Vytvorte modul domény
• Vytvorte pár smerovacích/smerovacích modulov
• Vytvorte servisný modul
• Vytváranie spoločných modulov

Kapitola 15. Pokročilé smerovanie

• Modul funkcie s povoleným smerovaním
• Používanie modulu funkcií
• Lenivé načítanie modulu funkcií
• Vytváranie prepojení pre komponenty modulu funkcií
• Viac o Lazy Loading
• Prednačítanie modulov
• Predvolená trasa
• Trasa so zástupným znakom
• presmerovať na
• Detské trasy
• Definovanie detských trás
• pre detské trasy
• Odkazy na detské trasy
• Navigačné stráže
• Vytváranie implementácií stráží
• Používanie stráží na trase
• Zhrnutie

Kapitola 16. Testovanie jednotiek Uhlové aplikácie

• Uhlové artefakty testovania jednotiek
• Skúšobné nástroje
• Typické kroky testovania
• Výsledky testov
• Testovacie suity Jasmine
• Špecifikácie jasmínu (testy jednotiek)
• Očakávania (tvrdenia)
• Matchers
• Exampsúbory Používanie Matchers
• Použitie nie vlastníctva
• Nastavenie a odstránenie v súpravách Unit Test Suite
• Exampsúbor funkcií beforeEach a afterEach
• Uhlový testovací modul
• Example Uhlový testovací modul
• Testovanie služby
• Vloženie inštancie služby
• Otestujte synchrónnu metódu
• Otestujte asynchrónnu metódu
• Použitie Mock HT TP klienta
• Poskytovanie predpripravenej odozvy
• Testovanie komponentu
• Modul testovania komponentov
• Vytvorenie inštancie komponentu
• Trieda ComponentFixture
• Testy základných komponentov
• Trieda DebugElement
• Simulácia interakcie používateľa
• Zhrnutie

Kapitola 17. Ladenie

• Koniecview uhlového ladenia
• Viewing TypeScript Code v Debuggeri
• Použitie kľúčového slova ladiaceho nástroja
• Debug protokolovanie
• Čo je Angular DevTools?
• Používanie nástrojov Angular DevTools
• Angular DevTools – Štruktúra komponentov
• Angular DevTools – Zmeňte vykonanie detekcie
• Zachytenie chýb syntaxe
• Zhrnutie

Laboratórne cvičenia

• Laboratórium 1. Úvod do Angular
• Laboratórium 2. Úvod do TypeScript
• Laboratórium 3. Úvod do komponentov
• Laboratórium 4. Šablóna komponentov
• Laboratórium 5. Vytvorte komponent fotogalérie
• Laboratórium 6. Formulár riadený šablónou
• Laboratórium 7. Vytvorte formulár na úpravu
• Laboratórium 8. Reaktívna forma
• Laboratórium 9. Vývoj služby
• Laboratórium 10. Vytvorte klienta HT TP
• Laboratórium 11. Použite potrubia
• Laboratórium 12. Základná jednostránková aplikácia pomocou smerovača Laboratórium 13. Vytvorenie jednostránkovej aplikácie (SPA)
• Laboratórium 14. Pokročilý klient HT TP
• Laboratórium 15. Používanie Angular Bootstrap
• Laboratórium 16. Lenivé načítanie modulu
• Laboratórium 17. Pokročilé smerovanie
• Laboratórium 18. Testovanie jednotiek
• Laboratórium 19. Ladenie uhlových aplikácií

PRE KOHO JE KURZ URČENÝ?
Tento kurz je určený pre každého, kto sa potrebuje naučiť základy vývoja Angular 12 a použiť ich pri tvorbe web aplikácie. Tento tréningový kurz môžeme dodať a prispôsobiť aj pre väčšie skupiny – šetríme tak čas, peniaze a zdroje vašej organizácie.

PREDPOKLADY
Web Aby ste z tohto kurzu Angular vyťažili maximum, sú potrebné skúsenosti s vývojom pomocou HTML, CSS a JavaScriptu. Užitočná je aj znalosť prehliadača DOM. Predchádzajúce skúsenosti s Angular s AngularJS alebo akoukoľvek verziou Angular sa nevyžadujú.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokumenty / zdroje

LUMIFY WORK Angular 12 Programovanie [pdf] Používateľská príručka Angular 12 Programovanie, Angular, 12 Programovanie, Programovanie

Referencie

• Používateľská príručka