Ako funguje Angular?

Angular je založený na architektúre MVC/MVVM. Používa komponenty, dátové väzby a injekciu závislostí na vytváranie interaktívnych webových aplikácií.

Hlavné koncepty:

• Komponenty: Stavebné bloky aplikácie, pozostávajúce zo šablóny, triedy a štýlov.
• Moduly (NgModules): Zoskupujú súvisiace komponenty, služby a ďalšie prvky.
• Dátová väzba: Synchronizuje údaje medzi modelom a zobrazením.
  • Jednosmerná väzba: Dáta tečú jedným smerom (napríklad od modelu k zobrazeniu).
  • Dvojzložková väzba [()]: Zmeny v modeli ovplyvňujú zobrazenie a naopak.
• Služby: Poskytujú funkcionalitu, ktorú môžu využívať rôzne komponenty (napríklad práca s HTTP požiadavkami).
• Injekcia závislostí (DI): Mechanizmus poskytovania závislostí (napríklad služieb) komponentom.
• Šablóny: HTML s rozšíreniami Angular syntaxe na zobrazovanie dát a spracovanie udalostí.
• Direktívy: Menia správanie alebo vzhľad prvkov DOM.
  • Štrukturálne: Pridávajú, odstraňujú alebo manipulujú s prvkami DOM (napríklad *ngIf, *ngFor).
  • Atribútové: Menia vzhľad alebo správanie existujúceho prvku (napríklad [ngClass], [ngStyle]).
• Životný cyklus komponentov: Súbor hookov, ktoré umožňujú vykonávať kód v rôznych fázach života komponentu (napríklad OnInit, OnDestroy).
• Zóny (NgZone): Zabezpečujú automatické zistenie zmien a aktualizáciu zobrazenia pri asynchrónnych operáciách.

Proces práce:

1. Načítanie: Aplikácia sa načíta, Bootstrap modul spustí koreňový komponent.
2. Renderovanie: Angular kompiluje šablóny a vytvára štruktúru DOM.
3. Dátové väzby: Nastaví sa spojenie medzi dátami a zobrazením.
4. Spracovanie udalostí: Poslucháče udalostí reagujú na akcie používateľa.
5. Zistenie zmien: Zóna sleduje asynchrónne operácie.
6. Aktualizácia zobrazenia: Pri zistení zmien Angular aktualizuje príslušné časti DOM.

Príklad dvojzložkovej dátovej väzby:

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

// V triede komponentu
export class MyComponent {
  userName: string = '';
}