Jak funguje Angular?

Angular je založen na architektuře MVC/MVVM. Používá komponenty, datové vazby a injekci závislostí k vytváření interaktivních webových aplikací.

Hlavní koncepty:

• Komponenty: Stavební bloky aplikace, skládající se ze šablony, třídy a stylů.
• Moduly (NgModules): Skupiny souvisejících komponent, služeb a dalších prvků.
• Datové vazby: Synchronizuje data mezi modelem a zobrazením.
  • Jednosměrná vazba: Data proudí jedním směrem (například od modelu ke zobrazení).
  • Obousměrná vazba [()]: Změny v modelu ovlivňují zobrazení a naopak.
• Služby: Poskytují funkčnost, kterou mohou využívat různé komponenty (například práce s HTTP požadavky).
• Injekce závislostí (DI): Mechanismus pro poskytování závislostí (například služeb) komponentám.
• Šablony: HTML s rozšířeními syntaxe Angular pro zobrazování dat a zpracování událostí.
• Direktivy: Mění chování nebo vzhled prvků DOM.
  • Strukturální: Přidávají, odstraňují nebo manipulují s prvky DOM (*ngIf, *ngFor).
  • Atributové: Mění vzhled nebo chování existujícího prvku ([ngClass], [ngStyle]).
• Životní cyklus komponent: Sada hooků umožňujících spouštět kód v různých fázích života komponenty (OnInit, OnDestroy).
• NgZone: Zajišťuje automatické rozpoznání změn a aktualizaci zobrazení při asynchronních operacích.

Pracovní proces:

1. Načítání: Aplikace se načte, bootstrap modul spustí kořenovou komponentu.
2. Renderování: Angular kompiluje šablony a vytváří strukturu DOM.
3. Datové vazby: Navazuje spojení mezi daty a zobrazením.
4. Zpracování událostí: Posluchače událostí reagují na akce uživatele.
5. Detekce změn: Zona sleduje asynchronní operace.
6. Aktualizace zobrazení: Při detekci změn Angular aktualizuje příslušné části DOM.

Příklad obousměrné datové vazby:

<!-- V šabloně -->
<input [(ngModel)]="userName">
<p>Ahoj, {{ userName }}!</p>

// Ve třídě komponenty
export class MyComponent {
  userName: string = '';
}