Cum funcționează Angular?

Angular funcționează pe baza unei arhitecturi MVC/MVVM. Utilizează componente, legătura datelor și injecția de dependințe pentru a construi aplicații web interactive.

Concepte principale:

• Componente: Blocuri de construcție ale aplicației, compuse dintr-un șablon, o clasă și stiluri.
• Module (NgModules): Grupează componente, servicii și alte elemente legate.
• Legătura datelor: Sincronizează datele între model și vizualizare.
  • Legătură unidirecțională: Datele curg într-o singură direcție (de exemplu, de la model la vizualizare).
  • Legătură bidirecțională [()]: Modificările în model afectează vizualizarea și invers.
• Servicii: Oferă funcționalități care pot fi utilizate de diferite componente (de exemplu, lucrul cu solicitări HTTP).
• Injecția de dependințe (DI): Mecanism de furnizare a dependențelor (de exemplu, servicii) către componente.
• Șabloane: HTML cu extensii de sintaxă Angular pentru afișarea datelor și gestionarea evenimentelor.
• Directive: Modifică comportamentul sau aspectul elementelor DOM.
  • Structurale: Adaugă, elimină sau manipulează elemente DOM (de exemplu, *ngIf, *ngFor).
  • Atribut: Schimbă aspectul sau comportamentul unui element existent (de exemplu, [ngClass], [ngStyle]).
• Ciclul de viață al componentelor: Set de hooks care permit executarea de cod în diferite etape ale vieții componentului (de exemplu, OnInit, OnDestroy).
• NgZone: Asigură detectarea automată a schimbărilor și actualizarea vizualizării în operațiuni asincrone.

Procesul de lucru:

1. Încărcare: Aplicația se încarcă, modulul Bootstrap pornește componenta rădăcină.
2. Renderizare: Angular compilează șabloanele și creează structura DOM.
3. Legătura datelor: Se stabilește conexiunea între date și vizualizare.
4. Gestionarea evenimentelor: Ascultătorii de evenimente reacționează la acțiunile utilizatorului.
5. Detectarea schimbărilor: Zona monitorizează operațiunile asincrone.
6. Actualizarea vizualizării: La detectarea schimbărilor, Angular actualizează părțile corespunzătoare ale DOM-ului.

Exemplu de legătură bidirecțională a datelor:

<!-- În șablon -->
<input [(ngModel)]="userName">
<p>Salut, {{ userName }}!</p>

// În clasa componentă
export class MyComponent {
  userName: string = '';
}