Come funziona Angular?

Angular funziona su un'architettura MVC/MVVM. Utilizza componenti, binding dei dati e iniezione delle dipendenze per costruire applicazioni web interattive.

Concetti principali:

• Componenti: Blocchi costitutivi dell'applicazione, composti da un template, una classe e stili.
• Moduli (NgModules): Raggruppano componenti correlati, servizi e altri elementi.
• Binding dei dati: Sincronizza i dati tra il modello e la vista.
  • Binding unidirezionale: I dati fluiscono in una direzione (ad esempio, dal modello alla vista).
  • Binding bidirezionale [()]: Le modifiche nel modello influenzano la vista e viceversa.
• Servizi: Forniscono funzionalità che possono essere utilizzate da diversi componenti (ad esempio, gestione delle richieste HTTP).
• Iniezione delle dipendenze (DI): Meccanismo per fornire dipendenze (come servizi) ai componenti.
• Template: HTML con estensioni di sintassi Angular per visualizzare dati e gestire eventi.
• Directive: Modificano il comportamento o l'aspetto degli elementi DOM.
  • Strutturali: Aggiungono, rimuovono o manipolano elementi DOM (ad esempio, *ngIf, *ngFor).
  • Attributo: Cambiano l'aspetto o il comportamento di un elemento esistente (ad esempio, [ngClass], [ngStyle]).
• Ciclo di vita dei componenti: Set di hook che consentono di eseguire codice in diverse fasi della vita del componente (ad esempio, OnInit, OnDestroy).
• NgZone: Garantisce il rilevamento automatico delle modifiche e l'aggiornamento della vista durante operazioni asincrone.

Processo di lavoro:

1. Caricamento: L'applicazione viene caricata, il modulo Bootstrap avvia il componente radice.
2. Rendering: Angular compila i template e crea la struttura DOM.
3. Binding dei dati: Viene stabilita la connessione tra dati e vista.
4. Gestione degli eventi: Gli ascoltatori di eventi reagiscono alle azioni dell'utente.
5. Rilevamento delle modifiche: La zona monitora le operazioni asincrone.
6. Aggiornamento della vista: Quando vengono rilevate modifiche, Angular aggiorna le parti corrispondenti del DOM.

Esempio di binding bidirezionale dei dati:

<!-- Nel template -->
<input [(ngModel)]="userName">
<p>Ciao, {{ userName }}!</p>

// Nella classe del componente
export class MyComponent {
  userName: string = '';
}