Angular 17 est enfin disponible et avec un nouveau logo ! Sortie le 8 novembre 2023, plusieurs changements ont été effectués et de nouvelles fonctionnalités ont fait leur apparition telle qu’une nouvelle syntaxe pour le flux de contrôle, le chargement différé des parties de page et un meilleur support pour le rendu côté client. Découvrez ce que vous réserve cette nouvelle version.
Avant de se lancer
Vous avez la possibilité de suivre notre formation Angular durant laquelle vous apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.
Si vous avez déjà de l’expérience sur Angular, nous vous proposons notre formation Angular Avancé. Vous apprendrez à résoudre des problèmes d’orchestration sur RxJS, l’amélioration des performances de votre site Web ou développer et gérer des composants Angular.
L’équipe Ambient IT
Nouvelle syntaxe pour le Control flow dans les templates
Depuis ses débuts, Angular utilise des directives structurelles telles que *ngIf ou *ngFor pour le flux de contrôle. Comme le flux de contrôle doit être revu de toute façon pour permettre une détection des changements fine et éventuellement sans zone, l’équipe Angular a décidé de le remanier.
Le résultat est le nouveau flux de contrôle intégré, qui se distingue nettement du balisage rendu :
@for (Personne de personnes(); track personne.id) {
<div class="card">
<h2 class="card-title">{{personne.nomPersonne}}</h2>
[…]
</div>
}
@empty {
<p class="text-lg">Aucune personne trouvée !</p>
}
À noter ici le nouveau bloc @empty qu’Angular rend lorsque la collection itérée est vide.
Bien que les signaux aient été un moteur pour cette nouvelle syntaxe, ils ne sont pas une condition préalable à son utilisation. Les nouveaux blocs de flux de contrôle peuvent également être utilisés avec des variables classiques ou avec des observables en conjonction avec le pipe asynchrone.
Autres variables
En plus de $index, les autres valeurs connues de *ngFor sont également disponibles via des pseudo-variables : $count, $first, $last, $even, $odd. Si nécessaire, leurs valeurs peuvent également être stockées dans des variables de modèle :
@for (groupe de groupes(); track $index; let isLast = $last) {
<a (click)="groupeSélectionné(groupe)">{{groupe}}</a>
@if (!isLast) {
<span class="mr-5 ml-5">|</span>
}
}
La nouvelle directive @if simplifie la formulation des branches else/if :
@if (produit().prixRéduit && produit().quantitéMinRéduction) {
[…]
}
@else if (produit().prixRéduit && !produit().quantitéMinRéduction) {
[…]
}
@else {
[…]
}
De plus, différents cas peuvent également être distingués à l’aide d’un @switch :
@switch (mode) {
@case ('complet') {
[…]
}
@case ('petit') {
[…]
}
@default {
[…]
}
}
La nouvelle syntaxe de flux de contrôle réduit la nécessité d’utiliser des directives structurelles, qui sont puissantes mais parfois inutilement complexes. Néanmoins, le framework continuera de prendre en charge les directives structurelles. D’une part, il y a des cas d’utilisation valides et d’autre part, malgré les nombreuses innovations passionnantes, le framework doit rester rétrocompatible.
Une nouvelle expérience de documentation
Une refonte complète de l’expérience d’apprentissage avec le lancement d’une nouvelle plateforme de documentation sur angular.dev.
Dites adieu aux tutoriels obsolètes ; la nouvelle documentation offre un accès facile aux points clés d’une application Angular moderne, accompagnée de tutoriels avec un IDE intégré et d’un Playground pour des tests en temps réel du framework.
Le chargement différé dans vos templates
Le chargement différé ou « Lazy loading » pourra être exploité en utilisant le mot clé @defer.
Chargez uniquement les parties nécessaires de vos modèles lors d’événements spécifiques, améliorant ainsi les performances.
Testez le nouveau application builder
Adieu WebPack, Angular 17 intègre désormais par défaut des outils plus rapides :
- ESBuild
- Vite
Ces outils offrent des builds jusqu’à 4 fois plus rapides. Une mise à jour majeure pour les développeurs en quête de rapidité.
SSR Angular
Angular 17 fait un pas de plus dans le monde du rendu côté serveur (SSR) en l’activant par défaut.
Désormais quand vous allez lancer :
ng new my-appLa CLI d’Angular vous demandera désormais si vous souhaitez utiliser le SSR et SSG/Prerendering.
Avec Angular 17, lorsque vous lancez « ng serve« , l’application ira directement côté serveur si vous avez choisir l’option SSR.
Signals Angular
Les signals Angular sont maintenant stables dans la nouvelle version 17 ! Pas d’inquiétude, utilisez-les sans problème.
Les Signals fonctionnement uniquement de manière immuable. De plus quand vous utiliserez les Signals dans vos composants OnPush, le framework marquera seulement le composant « dirty ».
À l’instar d’avant où tous les composants parents étaient marqués comme « dirty ».
Ce qu’il faut retenir
Angular 17 frappe très fort en cette fin d’année, malgré des problèmes que certains utilisateurs ont déjà reproché (DX à améliorer, learning curve trop raide, performance mitigée pour certains…), Angular ne pourra qu’améliorer ses fonctionnalités actuelles et en proposer des meilleures !
