Angular 17 Počítačový Kurz

Úvod

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

První kroky

• Vytváření nových projektů v Angularu 17 pomocí Angular CLI.
• Prozkoumání struktury a souborů projektu.
• Spuštění a testování aplikace.
• Zobrazování dat pomocí interpolace a výrazů.

Komponenty

• Role komponent v Angularu 17.
• Vytváření a používání komponent.
• Předávání dat mezi komponentami pomocí vstupů a výstupů.
• Využití životních cyklů komponent.

Direktivy

• Rozdíly mezi strukturálními a atributovými direktivami.
• Používání vestavěných direktiv jako ngIf, ngFor, ngSwitch apod.
• Vytváření vlastních direktiv.

Filtry

• Účel filtrů v Angularu 17.
• Používání vestavěných filtrů jako date, currency či json.
• Vytváření a používání vlastních filtrů.

Služby

• Účel služeb v Angularu 17.
• Vytváření a využití služeb.
• Injekce závislostí pomocí poskytovatelů.

Moduly

• Role modulů v Angularu 17.
• Vytváření a používání modulů.
• Importování a exportování modulů.

Vazba dat

• Rozdíly mezi jednosměrnou a obousměrnou vazbou dat.
• Používání vlastnostní vazby, událostní vazby a syntaxe banana-in-a-box.
• Využití proměnných odkazujících na šablonu.

Směrování

• Role směrování v Angularu 17.
• Nastavení a konfigurace tras.
• Přecházení mezi stránkami pomocí routerLink či router.navigate().
• Používání parametrů, dotazových řetězců a fragmentů.

Formuláře

• Rozdíly mezi formuláři řízenými šablonou a reaktivními formuláři.
• Tvorba a validace formulářů s využitím kontrol, skupin či polí.
• Využívání vestavěných validátorů jako required, minLength či maxLength.
• Vytváření a používání vlastních validátorů.

HTTP klient

• Účel HTTP klienta v Angularu 17.
• Posílání požadavků na backend pomocí HTTP klienta.
• Pracování s asynchronními daty pomocí observable objektů.
• Využívání interceptorů ke změně či zpracování požadavků a odpovědí.

Nová deklarativní syntaxe řídicích bloků

• Vysvětlení nové syntaxe pro řízení toku dat, která usnadňuje podmíněné vykreslování, cykly či práci s prázdnými kolekcemi.
• Příklady použití bloků @if, @else, @switch, @case, @default, @for a @empty.
• Srovnání nové syntaxe se staršími zápisy jako *ngIf, *ngSwitch či *ngFor.
• Zmínka o tom, jak tato syntaxe podporuje aplikace bez použití „zonu“ s využitím signálů.

Odložené načítání obsahu

• Vysvětlení konceptu odkládaného načítání, jeho vlivu na výkon a uživatelský komfort.
• Představení bloku @defer umožňujícího lazy-loading obsahu i příslušných závislostí.
• Příklady využití tohoto bloku pro načítání komponent, direktiv, filtrů, animací či stylů.
• Vysvětlení spolupráce bloku @defer s novým API pro přechody mezi zobrazeními.

API pro přechody mezi zobrazeními

• Účel a výhody tohoto API, které umožňuje programátorům definovat vlastní animace při změně stránek.
• Představení direktivy withViewTransitions umožňující práci s tímto API.
• Příklady použití této direktivy pro různé typy přechodů, jako je mizení, posuv, zoom či otočení.
• Zmínka o tom, jak toto API spolupracuje s Angular routerem a historií prohlížeče.

Ostatní funkce a vylepšení

• Stručný přehled dalších novinek v Angularu 17, například:
• Možnost definovat styl komponenty jako řetězec.
• Animace v Angularu lze načítat jen tehdy, když jsou potřeba.
• Podpora TypeScriptu 5.2.
• Stabilní verze API pro práci se signály.
• Podpora Node.js v18.13.0 a novější, starší verze již nejsou podporovány.
• Esbuild je nyní výchozím nástrojem na sestavení a vývojový server používá Vite.

Závěr a další kroky