Comment fonctionne Angular?

Angular fonctionne sur une architecture MVC/MVVM. Il utilise des composants, la liaison de données et l'injection de dépendances pour construire des applications web interactives.

Concepts principaux:

• Composants: Blocs de construction de l'application, composés d'un template, d'une classe et de styles.
• Modules (NgModules): Regroupent des composants liés, des services et d'autres éléments.
• Liaison de données: Synchronise les données entre le modèle et la vue.
  • Liaison unidirectionnelle: Les données circulent dans une seule direction (par exemple, du modèle à la vue).
  • Liaison bidirectionnelle [()]: Les changements dans le modèle affectent la vue et vice versa.
• Services: Fournissent des fonctionnalités pouvant être utilisées par différents composants (par exemple, gestion des requêtes HTTP).
• Injection de dépendances (DI): Mécanisme pour fournir des dépendances (par exemple, des services) aux composants.
• Templates: HTML avec des extensions de syntaxe Angular pour afficher des données et gérer des événements.
• Directives: Modifient le comportement ou l'apparence des éléments DOM.
  • Structurelles: Ajoutent, suppriment ou manipulent des éléments DOM (par exemple, *ngIf, *ngFor).
  • Attribut: Changent l'apparence ou le comportement d'un élément existant (par exemple, [ngClass], [ngStyle]).
• Cycle de vie des composants: Ensemble de hooks permettant d'exécuter du code à différentes étapes de la vie du composant (par exemple, OnInit, OnDestroy).
• Zones (NgZone): Assurent la détection automatique des changements et la mise à jour de la vue lors d'opérations asynchrones.

Processus de fonctionnement:

1. Chargement: L'application se charge, le module Bootstrap lance le composant racine.
2. Rendu: Angular compile les templates et crée la structure DOM.
3. Liaison de données: La connexion entre les données et la vue est établie.
4. Gestion des événements: Les écouteurs d'événements réagissent aux actions de l'utilisateur.
5. Détection des changements: La zone surveille les opérations asynchrones.
6. Mise à jour de la vue: Lorsqu'un changement est détecté, Angular met à jour les parties correspondantes du DOM.

Exemple de liaison bidirectionnelle de données:

<!-- Dans le template -->
<input [(ngModel)]="userName">
<p>Bonjour, {{ userName }}!</p>

// Dans la classe du composant
export class MyComponent {
  userName: string = '';
}