Hogyan működik az Angular?

Az Angular az MVC/MVVM architektúrára épül. Komponenseket, adat kötést és függőség injektálást használ az interaktív webalkalmazások építéséhez.

Fő fogalmak:

• Komponensek: Az alkalmazás építőelemei, amelyek sablonból, osztályból és stílusokból állnak.
• Modulok (NgModules): Kapcsolódó komponenseket, szolgáltatásokat és más elemeket csoportosítanak.
• Adat kötés: Az adatok szinkronizálása a modell és a nézet között.
  • Egyirányú kötés: Az adatok egy irányban áramlanak (pl. a modellből a nézetbe).
  • Kétirányú kötés [()]: A modellben történt változások hatással vannak a nézetre és fordítva.
• Szolgáltatások: Funkcionalitást nyújtanak, amelyeket különböző komponensek használhatnak (pl. HTTP kérésekkel való munka).
• Függőség injektálás (DI): Mechanizmus a függőségek (pl. szolgáltatások) komponensekhez való biztosítására.
• Sablonok: HTML Angular szintaxis kiterjesztésekkel az adatok megjelenítéséhez és események kezeléséhez.
• Direktívák: Megváltoztatják a DOM elemek viselkedését vagy megjelenését.
  • Strukturális: DOM elemek hozzáadása, eltávolítása vagy manipulálása (*ngIf, *ngFor).
  • Attribútum: Megváltoztatják egy meglévő elem megjelenését vagy viselkedését ([ngClass], [ngStyle]).
• Komponens életciklusa: Készlet hook, amely lehetővé teszi kód végrehajtását a komponens életének különböző szakaszaiban (OnInit, OnDestroy).
• NgZone: Automatikus változásérzékelést és nézetfrissítést biztosít aszinkron műveletek során.

Működési folyamat:

1. Betöltés: Az alkalmazás betöltődik, a Bootstrap modul elindítja a gyökérkomponenst.
2. Renderelés: Angular fordítja a sablonokat és létrehozza a DOM struktúrát.
3. Adat kötés: Kapcsolat jön létre az adatok és a nézet között.
4. Eseménykezelés: Eseményfigyelők reagálnak a felhasználói műveletekre.
5. Változásérzékelés: A zóna figyeli az aszinkron műveleteket.
6. Nézet frissítése: Változások észlelésekor Angular frissíti a DOM megfelelő részeit.

Példa kétirányú adat kötésre:

<!-- A sablonban -->
<input [(ngModel)]="userName">
<p>Szia, {{ userName }}!</p>

// A komponens osztályában
export class MyComponent {
  userName: string = '';
}