Sélectionner une page

Formation > Blog > Langage > Les nouveautés d’Angular 17

angular 17

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-app

La 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 !

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp