L'architecture d'Angular

L'architecture d'Angular ressemble à la structure du Japon féodal - elle est hiérarchique, bien organisée, et chaque élément a son rôle.

Les éléments architecturaux fondamentaux

1. Les composants (武士 - Bushi/Samouraï)

Les composants sont le cœur d'Angular - l'unité de base de l'interface, comme un samouraï dans une armée.

1@Component({
2  selector: 'app-samurai',
3  standalone: true,
4  template: `<div class="samurai">{{ name }}</div>`
5})
6export class SamuraiComponent {
7  name = 'Musashi';
8}

2. Les modules (藩 - Han/Clans)

Les modules regroupent des composants, des services et d'autres éléments liés entre eux - comme des clans regroupant des samouraïs.

1@NgModule({
2  declarations: [],
3  imports: [CommonModule],
4  exports: []
5})
6export class SamuraiModule { }

Remarque : Depuis Angular 17+, les Standalone Components sans NgModule sont recommandés !

3. Les services (職人 - Shokunin/Artisans)

Les services contiennent la logique métier et sont partagés entre les composants.

1@Injectable({
2  providedIn: 'root'
3})
4export class KatanaService {
5  forge(): string {
6    return 'Un nouveau katana a été forgé !';
7  }
8}

providedIn: 'root' enregistre le service globalement : Angular crée une seule instance pour toute l'application et la fournit à chaque composant qui la demande.

4. Les directives (術 - Jutsu/Techniques)

Les directives modifient le comportement des éléments du DOM - comme des techniques de combat spéciales.

5. Les pipes (通訳 - Tsuuyaku/Interprètes)

Les pipes transforment les données dans les templates - comme des interprètes à la cour du shogun.

Le flux de données

1┌─────────────────────────────────────────┐
2│              AppComponent               │
3│  (Shogun - commandant suprême)          │
4├─────────────────────────────────────────┤
5│  ┌──────────────┐  ┌──────────────┐     │
6│  │ HeaderComp   │  │ SidebarComp  │     │
7│  │ (Général)    │  │ (Conseiller) │     │
8│  └──────────────┘  └──────────────┘     │
9│  ┌──────────────────────────────────┐   │
10│  │        MainContentComponent      │   │
11│  │  ┌────────────┐ ┌────────────┐   │   │
12│  │  │ ListComp   │ │ DetailComp │   │   │
13│  │  │ (Escouade) │ │ (Samouraï) │   │   │
14│  │  └────────────┘ └────────────┘   │   │
15│  └──────────────────────────────────┘   │
16└─────────────────────────────────────────┘

Les données circulent de haut en bas via @Input(), et les événements remontent de bas en haut via @Output() - comme les ordres du shogun et les rapports des samouraïs.