Angular 17 Počítačový Kurz

Úvod do Angularu 17

• Co je Angular?
• Angular vs React vs Vue
• Přehled funkcí a architektury Angularu 17
• Nastavení vývojového prostředí

Základy a úvodní kroky

• Vytvoření nového projektu Angular 17 pomocí Angular CLI
• Prozkoumání struktury projektu a souborů
• Spuštění a servírování aplikace
• Zobrazení dat pomocí interpolace a výrazů

Komponenty

• Porozumění roli komponent v Angularu 17
• Vytváření a použití komponent
• Přenos dat mezi komponentami pomocí vstupů (inputs) a výstupů (outputs)
• Používání životních cyklů komponent (lifecycle hooks)

Direktivy

• Porozumění rozdílu mezi strukturálními a atributovými direktivami
• Vytváření a použití vestavěných direktiv, jako jsou ngIf, ngFor, ngSwitch apod.
• Vytváření a použití vlastních direktiv

Pipe

• Porozumění účelu pipe v Angularu 17
• Vytváření a použití vestavěných pipe, jako jsou date, currency, json apod.
• Vytváření a použití vlastních pipe

Služby

• Porozumění roli služeb v Angularu 17
• Vytváření a použití služeb
• Injekce závislostí pomocí providerů

Moduly

• Porozumění roli modulů v Angularu 17
• Vytváření a použití modulů
• Import a export modulů

Vazba dat

• Porozumění rozdílu mezi jednosměrnou a dvousměrnou vazbou dat
• Vytváření a použití vazby vlastností, vazby událostí a syntaxe „banana-in-a-box“
• Používání šablonových referenčních proměnných

Routování

• Porozumění roli routování v Angularu 17
• Vytváření a konfigurace tras
• Navigace mezi trasami pomocí routerLink a router.navigate()
• Používání parametrů tras, dotazových parametrů a fragmentů

Formuláře

• Porozumění rozdílu mezi formuláři řízenými šablonou a reaktivními formuláři
• Vytváření a validace formulářů pomocí ovládacích prvků formuláře, skupin formulářů, polí formulářů apod.
• Používání vestavěných validátorů, jako jsou required, minLength, maxLength apod.
• Vytváření a použití vlastních validátorů

HTTP Klient

• Porozumění roli HTTP klienta v Angularu 17
• Vytváření a používání HTTP požadavků pro komunikaci s backendovými službami
• Používání observables pro zpracování asynchronních datových toků
• Používání interceptorů pro úpravu nebo zpracování HTTP požadavků nebo odpovědí

Nový deklarativní řídící tok

• Vysvětlení nové syntaktiky šablonových řídících bloků a toho, jak zjednodušuje běžné úkoly, jako je podmíněné vykreslování, cyklování a zpracování prázdných kolekcí
• Předvedení příkladů použití nových bloků, jako jsou @if, @else, @switch, @case, @default, @for a @empty
• Srovnání nové syntaktiky s předchozí, jako jsou *ngIf, *ngSwitch a *ngFor
• Uvedení toho, jak nové řídící bloky podporují aplikace bez zóny pomocí signálů (signals)

Bloky oddáleného načítání

• Vysvětlení konceptu oddáleného načítání a toho, jak může zlepšit výkon a uživatelský zážitek webových aplikací
• Úvod do nového řídícího bloku @defer, který umožňuje lenivé načítání obsahu bloku a jeho závislostí
• Předvedení příkladů použití bloku @defer pro různé scénáře, jako je načítání komponent, direktiv, pipe, animací a stylů
• Uvedení toho, jak blok @defer funguje s novým API pro přechody pohledů

API pro přechody pohledů

• Vysvětlení účelu a výhod API pro přechody pohledů, které umožňuje vývojářům přizpůsobit animace a přechody mezi pohledy
• Úvod do nové direktivy withViewTransitions, která umožňuje použití API pro přechody pohledů
• Předvedení příkladů použití direktivy withViewTransitions s různými typy přechodů, jako jsou fade, slide, zoom a flip
• Uvedení toho, jak API pro přechody pohledů funguje s Angular routerem a historií prohlížeče

Jiné funkce a vylepšení

• Krátké shrnutí některých dalších funkcí a vylepšení, které Angular 17 nabízí, jako jsou:
• Podpora přenosu @Component.styles jako řetězce
• Kód animací Angularu je možné načítat lenivě
• Podpora TypeScriptu 5.2
• Základní API pro signály (signals) je nyní stabilní
• Podpora Node.js v16 byla odstraněna a minimální podporovaná verze je v18.13.0
• Esbuild bude výchozím buildérem a výchozí vývojový server bude využívat Vite