Flux de contrôle Angular : guide complet

Introduction : L'Évolution du Contrôle de Flux dans Angular

Pendant des années, les développeurs Angular ont compté sur les directives de structure telles que *ngIf, *ngFor et *ngSwitch pour gérer le flux de contrôle dans leurs templates. Ces directives, bien que puissantes, présentaient certaines limitations en termes de lisibilité et de performances, surtout dans des templates complexes.

C'est dans ce contexte qu'Angular a introduit les nouveaux blocs de control flow. Cette évolution répond à plusieurs besoins cruciaux :

• Syntaxe plus intuitive : Les nouveaux blocs @if, @for, et @switch offrent une syntaxe plus proche du JavaScript natif, rendant le code plus facile à lire et à comprendre.
• Performances améliorées : Contrairement aux directives de structure qui nécessitent une interprétation supplémentaire, les blocs de control flow sont compilés directement, ce qui se traduit par de meilleures performances.
• Pas besoin d'importer CommonModule : Un avantage majeur est que ces nouveaux blocs ne nécessitent pas l'importation du CommonModule, simplifiant ainsi la structure de vos modules.
• Meilleure intégration avec l'IDE : Les nouveaux blocs offrent une meilleure intégration avec les IDE, facilitant l'auto-complétion et la détection d'erreurs.

Explorons maintenant en détail ces nouveaux blocs de control flow et comparons-les avec leurs équivalents traditionnels.

1. Affichage Conditionnel avec @if, @else-if, et @else

Le bloc @if permet un rendu conditionnel du contenu basé sur l'évaluation d'une expression.

Exemple : Rendu Conditionnel de Base

Ancienne approche avec *ngIf :

  
*ngIf="user.age >= 18">{{ user.name }} est un adulte.
*ngIf="user.age < 18">{{ user.name }} est mineur.
  

Nouvelle approche avec @if :

  
@if (user.age >= 18) {
  <p>{{ user.name }} est un adulte.</p>
} @else {
  <p>{{ user.name }} est mineur.</p>
}
  

Exemple : Conditions Multiples avec @else-if

Ancienne approche :

  
*ngIf="user.score > 90">{{ user.name }} a un excellent score !
*ngIf="user.score > 75 && user.score <= 90">{{ user.name }} a un bon score.
*ngIf="user.score <= 75">{{ user.name }} a besoin de s'améliorer.
  

Nouvelle approche :

  
@if (user.score > 90) {
  <p>{{ user.name }} a un excellent score !</p>
} @else if (user.score > 75) {
  <p>{{ user.name }} a un bon score.</p>
} @else {
  <p>{{ user.name }} a besoin de s'améliorer.</p>
}
  

2. Répétition de Contenu avec le Bloc @for

Le bloc @for permet d'itérer sur une collection et de rendre du contenu pour chaque élément.

Exemple : Boucle de Base avec @for

Ancienne approche avec *ngFor :

  
<ul>
  *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>
  

Nouvelle approche avec @for :

  
<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ul>
  

L'Importance de l'Expression track

L'utilisation de l'expression track est cruciale pour les performances, car elle aide Angular à gérer efficacement les changements dans le DOM en corrélant les données avec les éléments rendus.

Exemple : Boucle Optimisée avec Tracking et Contenu de Secours

Ancienne approche :

  
<ul>
  *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
  *ngIf="items.length === 0">Aucun élément disponible.</li>
</ul>
  

Nouvelle approche :

  
<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  } @empty {
    <li>Aucun élément disponible.</li>
  }
</ul>
  

3. Affichage Conditionnel avec le Bloc @switch

Le bloc @switch offre une syntaxe alternative pour le rendu conditionnel.

Exemple : Utilisation de @switch pour un Contenu Basé sur le Rôle

Ancienne approche avec *ngSwitch :

  
<ng-container [ngSwitch]="user.role">
  <app-admin-dashboard *ngSwitchCase="'admin'"></app-admin-dashboard>
  <app-editor-dashboard *ngSwitchCase="'editor'"></app-editor-dashboard>
  <app-viewer-dashboard *ngSwitchCase="'viewer'"></app-viewer-dashboard>
  <p *ngSwitchDefault>Vous n'avez pas la permission d'accéder à ce contenu.</p>
</ng-container>
  

Nouvelle approche avec @switch :

  
@switch (user.role) {
  @case ('admin') {
    <app-admin-dashboard />
  }
  @case ('editor') {
    <app-editor-dashboard />
  }
  @case ('viewer') {
    <app-viewer-dashboard />
  }
  @default {
    <p>Vous n'avez pas la permission d'accéder à ce contenu.</p>
  }
}
  

Résumé et Considérations de Performance

Les nouveaux blocs de control flow d'Angular offrent plusieurs avantages significatifs :

• Syntaxe plus claire et intuitive : La nouvelle syntaxe est plus proche du JavaScript natif, ce qui rend le code plus facile à lire et à maintenir.
• Meilleures performances : Les blocs de control flow sont compilés directement, ce qui se traduit par de meilleures performances par rapport aux directives de structure traditionnelles.
• Réduction de la taille du bundle : L'absence de nécessité d'importer CommonModule peut conduire à une réduction de la taille du bundle final de votre application.
• Meilleure intégration avec les outils de développement : Les nouveaux blocs offrent une meilleure prise en charge par les IDE, facilitant la détection d'erreurs et l'auto-complétion.

En adoptant ces nouveaux blocs de control flow, les développeurs Angular peuvent créer des templates plus expressifs, plus performants et plus faciles à maintenir. Bien que la transition puisse nécessiter un certain temps d'adaptation, les avantages en termes de clarté du code et de performances en font un changement bienvenu dans l'écosystème Angular.