Voici la première leçon du Cours Angular Moderne, une série de vidéos gratuites qui enseignent Angular de la manière dont il doit être écrit aujourd’hui. Si la dernière fois que vous avez utilisé Angular sérieusement remonte à quelques années, Angular v21+ pourrait vous surprendre. Ce n’est pas simplement une autre mise à jour de version — elle change la façon dont vous envisagez la construction d’applications Angular.
Dans cet article, nous aborderons :
- À qui s’adresse ce cours ?
- Contenu du cours
- La grande transformation : Angular privilégie les signaux
- Le flux de contrôle intégré remplace les directives structurelles
- Vitest devient désormais l’exécuteur de tests par défaut
- Pourquoi Angular v21+ paraît différent des versions précédentes ?
À qui s’adresse ce cours ?
Ce cours a été conçu pour trois types de développeurs :
- Développeurs débutants en Angular qui veulent l’apprendre de manière moderne dès le premier jour.
- Développeurs qui migrent d’Angular v16 vers la v20 et constatent que Angular a soudainement changé son apparence et son comportement.
- Développeurs frontend issus de React ou Vue qui recherchent un cadre mental réactif, clair et explicite.
Indépendamment du groupe auquel vous appartenez, Angular v21+ offre une manière bien plus prévisible et explicite de créer des applications — et ce cours a été conçu autour de cette idée.
Contenu de ce cours
Ce n’est pas un cours Angular traditionnel. Nous construisons des applications Angular de la manière à laquelle Angular v21+ s’attend.
Au cours de ce cursus, vous apprendrez :
- Gestion d’état orientée par les signaux — réactivité affinée avec des signaux mutables, des signaux calculés et des effets.
- Flux de contrôle intégré — en utilisant @if, @for et @switch directement dans les modèles.
- Composants indépendants — créer des applications sans NgModules, avec une injection de dépendances moderne.
- Routage — gardes fonctionnelles et chargement différé
- Formulaires et validation — en utilisant les normes modernes d’Angular
- Performance — vues différées et hydratation
- Tests modernes — Vitest et Playwright
- Migration — migrer des applications Angular anciennes vers Angular v21+
À la fin, vous vous sentirez à l’aise pour créer, tester et déployer des applications Angular modernes.
La grande transformation : Angular privilégie les signaux
La plus grande modification d’Angular v21+ est la suivante : Angular privilégie désormais les signaux.
Les signaux ne sont plus une expérience ou une fonctionnalité optionnelle. Ils constituent désormais la manière standard dont Angular s’attend à ce que vous gériez l’état de l’interface utilisateur. Plutôt que de dépendre de trucs magiques de détection des changements ou d’utiliser RxJS pour tout, Angular propose désormais une réactivité granulaire directement intégrée au framework.
const count = signal(0);
const doubled = computed(() => count() * 2);Cela rend les applications Angular plus faciles à comprendre, plus faciles à optimiser et bien plus simples à tester.
Flux de contrôle intégré (au revoir, repli *ngIf)
Une autre grande transformation concerne le fonctionnement des modèles.
Dans Angular v21, le flux de contrôle intégré est la norme. Les directives structurelles telles que *ngIf et *ngFor sont remplacées par les contrôles @if, @for et @switch dans les modèles.
@if (items().length) {
<app-list [items]="items()" />
} @else {
<p>No items</p>
}Le résultat est des modèles plus nets, de meilleures performances et une couverture de modèles plus précise dans les tests. Cette modification, à elle seule, est l’une des raisons pour lesquelles de nombreux développeurs remarquent des échecs de tests après la mise à jour vers la version 21 ou supérieure — et nous verrons comment gérer cela plus tard dans le cours.
Tests : Vitest est désormais le standard
Les tests constituent un autre domaine où Angular v21+ trace une ligne claire entre l’ancien Angular et le moderne.
Angular est désormais livré avec Vitest comme exécuteur de tests par défaut, remplaçant Jasmine et Karma. Cela signifie des tests plus rapides, une meilleure expérience pour le développeur et des outils modernes prêts à l’emploi.
Mais cela signifie aussi qu’Angular est plus exigeant sur la couverture des templates — en particulier lorsque vous utilisez la nouvelle syntaxe de flux de contrôle.
Pourquoi Angular v21+ paraît différent ?
En combinant tout cela — signaux, flux de contrôle intégré et tests modernes — Angular v21+ se distingue nettement des versions antérieures.
Vous écrivez moins de code répétitif. Vous raisonnez de manière plus explicite sur l’état. Et Angular devient plus prévisible plutôt que magique.
Pour les développeurs issus de React ou de Vue, cela donne généralement à Angular une apparence beaucoup plus familière — et beaucoup plus facile à comprendre.
Code source
Le code source complet du cours est disponible sur GitHub : loiane/modern-angular .
Prochaine étape
Dans la prochaine leçon, nous configurerons un environnement de développement Angular v21+ moderne et nous créerons notre première application — totalement autonome et prête pour les signaux.
