Angular kurz vývoje front-endu

Lekce 1 • Angular moduly a bootstrap aplikace

Vysvětluje NgModules, kořenový AppModule a způsob, jakým Angular provádí bootstrap aplikace. Poskytuje strukturní kontext nezbytný před tvorbou komponent.

Lekce 2 • Základy TypeScriptu pro Angular

Seznamuje s TypeScriptovými typy, rozhraními a dekorátory potřebnými pro sebevědomé psaní kódu v Angularu. Propojuje znalost JavaScriptu s typovaným ekosystémem Angularu.

Lekce 3 • Úvod do frameworku Angular

Pokrývá roli Angularu v moderním front-endovém vývoji a jeho architekturu inspirovanou MVC. Stanovuje koncepční základ pro všechna následující témata frameworku.

Lekce 4 • Nastavení vývojového prostředí

Instaluje a konfiguruje Node.js, npm a Angular CLI. Zajišťuje, aby každý student měl konzistentní a reprodukovatelné lokální pracovní prostředí.

Lekce 1 • Vestavěné strukturální direktivy

Aplikuje *ngIf, *ngFor a *ngSwitch pro dynamické řízení struktury DOM. Ukazuje, jak direktivy rozšiřují vyjadřovací schopnosti šablon.

Lekce 2 • Vazba vlastností a událostí

Učí jednosměrný tok dat pomocí vazby vlastností a zpracování uživatelských událostí pomocí vazby událostí. Propojuje logiku komponenty s prvky DOM a interakcemi uživatele.

Lekce 3 • Syntaxe šablon a výrazy

Pokrývá výrazový jazyk šablon Angularu, bezpečnou navigaci a proměnné odkazující na šablonu. Umožňuje dynamické vykreslování obsahu v rámci zobrazení komponent.

Lekce 4 • Lifecycle hooks komponent

Zkoumá celou sekvenci lifecycle hooks od ngOnInit po ngOnDestroy. Učí, kdy a proč jednotlivé hooky používat pro inicializaci a úklid.

Lekce 1 • Dotazy ViewChild a ContentChild

Umožňuje programový přístup k instancím potomkových komponent a promítanému obsahu pomocí dotazů. Umožňuje pokročilou koordinaci komponent nad rámec vazeb v šabloně.

Lekce 2 • Komunikace od rodiče k potomkovi pomocí @Input

Používá @Input k předávání dat směrem dolů stromem komponent a ověřuje vstup pomocí setterů. Zavádí primární vzor sestupného toku dat v Angularu.

Lekce 3 • Tvorba vlastních strukturálních direktiv

Implementuje strukturální direktivy pomocí TemplateRef a ViewContainerRef pro manipulaci s DOM. Rozšiřuje schopnost studentů vytvářet znovupoužitelnou layoutovou logiku.

Lekce 4 • Tvorba vlastních atributových direktiv

Vytváří direktivy, které upravují vzhled nebo chování hostitelského elementu, aniž by měnily strukturu DOM. Upevňuje vzor direktiv představený v kapitole 2.

Lekce 1 • Vytváření a poskytování Angular služeb

Generuje služby pomocí CLI a registruje je na úrovni modulu, komponenty nebo kořenové úrovni (root). Ukotvuje vrstvu služeb jako domov pro sdílenou logiku.

Lekce 2 • HTTP klient a integrace REST API

Konfiguruje HttpClientModule a provádí požadavky GET, POST, PUT a DELETE. Propojuje vrstvu služeb se skutečnými backendovými zdroji dat.

Lekce 3 • Zpracování chyb a HTTP interceptory

Implementuje globální zpracování chyb pomocí catchError a transformaci požadavků/odpovědí pomocí interceptorů. Vytváří produkčně připravené vzory HTTP komunikace.

Lekce 4 • Hlubší pohled na vkládání závislostí

Zkoumá hierarchii DI, injection tokeny a typy poskytovatelů. Umožňuje jemnější kontrolu nad tím, jak jsou závislosti v aplikaci řešeny.

Lekce 1 • Route guards a řízení přístupu

Implementuje CanActivate, CanDeactivate a CanLoad pro ochranu cest. Integruje autentizaci a autorizaci do navigační vrstvy.

Lekce 2 • Líné načítání (Lazy Loading) a Route resolvery

Rozděluje aplikaci do feature modulů načítaných na vyžádání a přednačítá data pomocí resolverů. Zlepšuje výkon počátečního načtení a uživatelský zážitek.

Lekce 3 • Vnořené cesty a pojmenované výstupy (Named Outlets)

Strukturuje potomkovské cesty pod rodičovskými cestami a používá pojmenované výstupy pro pomocná zobrazení. Podporuje komplexní požadavky na layout ve velkých aplikacích.

Lekce 4 • Nastavení routeru a základní navigace

Konfiguruje RouterModule s definicemi cest a přidává router-outlet a routerLink. Vytváří základ pro všechny navigační funkce.

Lekce 1 • Dynamické formuláře s FormArray

Používá FormArray k dynamickému přidávání a odebírání ovládacích prvků formuláře za běhu pro data proměnné délky. Řeší scénáře z praxe, jako jsou opakující se položky.

Lekce 2 • Validátory a vlastní validace

Aplikuje synchronní a asynchronní validátory a vytváří znovupoužitelné vlastní validační funkce. Zajišťuje integritu dat před odesláním.

Lekce 3 • Odesílání formuláře a správa stavu

Řeší odeslání formuláře, reset a stavy dirty/touched pro dokonalý uživatelský zážitek. Propojuje data formuláře s voláními služeb představenými v kapitole 4.

Lekce 4 • Šablonově řízené formuláře

Používá ngForm, ngModel a vestavěné validátory k deklarativnímu vytváření formulářů v šabloně. Představuje koncepty formulářů s minimální režií TypeScriptu.

Lekce 1 • NgRx Entity a DevTools

Zjednodušuje správu kolekcí pomocí NgRx Entity a kontrolu stavu pomocí Redux DevTools. Urychluje vývoj a ladění funkcí náročných na store.

Lekce 2 • Úvod do NgRx Store

Instaluje NgRx a definuje akce, reducery a store pro část funkcionality (feature slice). Ukotvuje Redux vzor v ekosystému Angularu.

Lekce 3 • Stav založený na službách s BehaviorSubject

Ukládá a sdílí stav napříč komponentami pomocí BehaviorSubject ve službě. Poskytuje odlehčené řešení stavu před zavedením NgRx.

Lekce 4 • NgRx Effects pro vedlejší efekty

Zpracovává asynchronní operace, jako jsou HTTP volání, mimo reducery pomocí NgRx Effects. Udržuje reducery čisté a centralizuje logiku vedlejších efektů.

Lekce 1 • Strategie nasazení a integrace CI/CD

Nasazuje sestavení Angularu na statický hosting a integruje automatizované pipeline pro kontinuální doručování. Uzavírá vývojový životní cyklus od kódu po produkci.

Lekce 2 • Jednotkové testování komponent a služeb

Píše jednotkové testy pomocí Jasmine a TestBed pro komponenty, služby a pipes. Validuje jednotlivé jednotky izolovaně před integrací.

Lekce 3 • Optimalizace balíčků a konfigurace sestavení

Konfiguruje produkční sestavení, tree shaking a diferenciální načítání pro optimální velikost balíčku. Připravuje aplikaci na omezení reálného nasazení.

Lekce 4 • End-to-End testování s Cypress

Automatizuje testování uživatelských toků pomocí Cypress pro validaci chování celé aplikace. Doplňuje jednotkové testy o realistické scénáře v prohlížeči.