Comment fonctionne Angular?

Angular fonctionne comme un framework pour créer des applications monopage (SPA). Ses composants clés et principes:

• Modularité: Les applications sont construites à partir de modules. @NgModule définit quels composants, services et autres éléments appartiennent au module.
• Composants: Les blocs de construction principaux des applications Angular. Chaque composant se compose d'un template (HTML), d'une classe TypeScript (logique) et de styles (CSS). Le décorateur Component les relie.
• Binding de données (Data Binding): Angular assure la liaison entre les données dans la classe du composant et la vue dans le template. Il existe des liaisons unidirectionnelles (property binding, interpolation) et bidirectionnelles (ngModel).
• Directives: Modifient le comportement ou l'apparence des éléments DOM. Elles peuvent être structurelles (*ngIf, *ngFor) ou attributives (ngClass, ngStyle).
• Services: Classes contenant la logique pouvant être utilisée par plusieurs composants. Utilisées pour obtenir des données, la logique métier, etc.
• Injection de dépendances (Dependency Injection): Mécanisme par lequel Angular fournit des services aux composants ou autres services. Permet de rendre le code plus flexible et testable.
• Routing: Permet de naviguer entre différentes vues (composants) de l'application sans recharger la page. Défini via RouterModule et la configuration des routes.
• Cycle de vie du composant (Component Lifecycle): Série d'événements se produisant depuis la création jusqu'à la destruction du composant. Angular fournit des hooks (méthodes) pouvant être implémentés pour effectuer des actions à des étapes spécifiques (par exemple, ngOnInit, ngOnDestroy).
• Détection des changements (Change Detection): Mécanisme qui détermine quand mettre à jour la vue (DOM) en fonction des changements dans les données de l'application. Angular utilise des zones (NgZone) pour suivre les événements asynchrones et lancer automatiquement la détection des changements.
• Templates: HTML avec extensions Angular pour la liaison de données, directives et expressions.
• RxJS: Angular utilise activement la bibliothèque RxJS pour travailler avec des données asynchrones et des flux d'événements.

Processus de travail à un niveau élevé:

1. Chargement: Le navigateur charge index.html.
2. Démarrage: La racine de l'application est lancée, généralement dans main.ts.
3. Bootstrap: @NgModule pour le module racine (généralement AppModule) est chargé avec platform-browser.
4. Rendu: Angular crée et rend les composants, en commençant par la racine.
5. Binding de données: Les données des classes de composants sont liées aux templates.
6. Détection des changements: Angular surveille les changements de données et met à jour la vue.
7. Routing: Les transitions entre vues sont gérées par le routeur.

// Exemple d'un composant simple
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Nom de la balise pour utilisation dans le template
  template: `<p>{{ message }}</p>`, // Template du composant
  styles: ['p { color: blue; }'] // Styles du composant
})
export class GreetComponent {
  // Logique du composant
  message = 'Bonjour de Angular!';
}

// Exemple d'utilisation d'un service avec DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Service disponible dans l'injecteur racine
})
export class DataService {
  getData(): string {
    return 'Données du service';
  }
}

// Dans un composant utilisant le service
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Injection du service
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular compile TypeScript et templates HTML en JavaScript lors du processus de build (compilation AOT par défaut), ce qui améliore la performance.