Quoi de neuf dans Angular v16 ?

Angular, maintenu par Google, est un framework open-source largement utilisé pour le développement d’applications web. Il vous offre une boîte à outils robuste et une gamme de fonctionnalités qui vous permettent de créer des applications web dynamiques, réactives et évolutives.

Le lancement récent de la version 16 d’Angular introduit des mises à jour et des améliorations passionnantes de l’expérience de développement, ainsi que de meilleures performances et une plus grande stabilité des applications.

1. Signaux Angular

Angular Signals est une bibliothèque qui permet de définir des valeurs réactives et d’établir des dépendances entre elles. Voici un exemple simple d’utilisation d’Angular Signals au sein d’une application Angular :

L’extrait de code ci-dessus crée une valeur calculée appelée fullName, qui s’appuie sur les signaux firstName et lastName. En outre, il définit un effet, une fonction de rappel qui s’exécute chaque fois que la valeur des signaux qu’elle lit change.

Dans ce cas, la valeur de fullName dépend de firstName et de lastName, de sorte que la modification de l’un ou l’autre déclenche l’effet. Lorsque la valeur de firstName est définie sur John, le navigateur enregistre le message suivant dans la console :

2. Standalone Ng New Collection

À partir d’Angular v16, vous pouvez créer de nouveaux projets autonomes dès le début ! Pour essayer l’aperçu développeur des schémas autonomes, assurez-vous que vous avez installé Angular CLI v16 et exécutez la commande suivante :

Voir aussi :  Comment convertir des données JSON en une feuille de calcul Excel avec Angular

En faisant cela, vous obtiendrez une structure de projet plus simple sans aucun NgModules. En outre, tous les générateurs du projet produiront des directives, des composants et des tuyaux autonomes !

3. Mappage automatique des paramètres de l’itinéraire

Considérons une configuration de routage comme suit :

Avant Angular 16, il fallait injecter le service ActivatedRoute pour récupérer les paramètres d’URL, les paramètres de requête ou les données associées pour une URL particulière.

Voici un exemple de la façon dont vous deviez procéder :

Avec Angular 16, vous n’avez plus besoin d’injecter le service ActivatedRoute pour récupérer les différents paramètres de route car vous pouvez les lier directement aux entrées des composants.

Pour activer cette fonctionnalité dans une application qui utilise le système de modules, définissez la valeur correspondante dans les options de RouterModule :

Pour une application autonome, vous devez plutôt appeler une fonction :

Une fois cette fonctionnalité activée, le composant devient beaucoup plus simple :

4. Entrée requise

Une fonctionnalité très attendue par la communauté Angular est la possibilité de marquer certaines entrées comme obligatoires. Jusqu’à présent, vous deviez utiliser diverses solutions de contournement pour y parvenir, comme lever une erreur dans le cycle de vie NgOnInit si la variable n’était pas définie ou modifier le sélecteur du composant pour inclure les entrées obligatoires.

Voir aussi :  Comment rendre votre site Web réactif et interactif avec CSS et JavaScript

Cependant, ces deux solutions avaient leurs avantages et leurs inconvénients. À partir de la version 16, rendre une entrée obligatoire est aussi simple que de fournir un objet de configuration dans les métadonnées de l’annotation d’entrée :

5. Vite comme serveur de développement

Angular 14 a introduit un nouveau bundler JavaScript appelé EsBuild, qui a considérablement amélioré les temps de construction d’environ 40 %. Cependant, vous ne pouviez réaliser ce gain de performance que pendant la phase de construction et non pendant le développement avec le serveur dev.

Dans la prochaine version d’Angular, l’outil de construction Vite permet d’utiliser EsBuild pendant le développement également.

Pour activer cette fonctionnalité, mettez à jour la configuration du constructeur dans le fichier angular.json comme suit :

Veuillez noter que cette fonctionnalité est encore expérimentale.

Amélioration de l’expérience de développement et des performances

La version 16 d’Angular apporte des mises à jour passionnantes comme Angular Signals pour la gestion des données, la création de projets autonomes, le mappage automatique des paramètres de route, les entrées requises et l’intégration de Vite pour améliorer le développement. Ces améliorations améliorent l’expérience de développement et augmentent les performances de l’application.

S’abonner à notre newsletter

Quelles sont les nouveautés d’Angular 16 ?

Angular 16 s’accompagne de deux grandes innovations : les signaux et l’hydratation non destructive. De nombreuses autres améliorations simplifient le travail avec le framework. Angular 16 apporte deux grandes innovations : les signaux et l’hydratation non destructive. De nombreuses améliorations simplifient également le travail avec le framework.

Voir aussi :  Comment relever le défi FizzBuzz dans 5 langages de programmation

Quelles sont les nouveautés d’Angular 15 jusqu’à présent ?

Les nouvelles fonctionnalités d’Angular 15 comprennent : Des API autonomes stables. Introduction d’un nouveau système d’API. Débogage facilité avec des traces de pile améliorées.

Quelles sont les nouveautés de la version d’Angular ?

En outre, Angular peut désormais utiliser des fonctionnalités modernes du navigateur telles que les variables CSS et les animations web via des API web natives grâce à ces améliorations. Les apps se chargeront plus rapidement grâce à l’API améliorée et à l’absence de polyfills spécifiques à IE. Cela élimine également la nécessité d’un chargement différentiel.

Quelles sont les nouveautés d’Angular V14 ?

Diagnostics de modèles améliorés La dernière version d’Angular 14 est livrée avec de meilleurs diagnostics de modèles, permettant aux développeurs Angular d’être protégés contre les erreurs courantes par le compilateur, de la même manière que le code TypeScript est protégé. Le compilateur ne génère aucun avertissement dans la version précédente, Angular 13 et les versions antérieures.

  • 00:39 Repenser la réactivité
  • 01:17Signal Angular
  • 02:29Rendu côté serveur
  • 02:57Amélioration de l’hydratation
  • 04:16Test d’unité
  • 05:16Signaux angulaires
  • 06:13Rxs et Probabilité
  • 06:44Rendu côté serveur et amélioration de l’hydratation
Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *