Les nouveautés d’angular 15

Nous proposons une formation complète de cinq jours sur Angular et Angular Avancé ! Une formation qui vous permettra de découvrir toutes les fonctionnalités du framework, de la conception au développement d’une nouvelle application en passant par l’explication de ses mécanismes avancés. Une formation idéale pour ceux qui souhaitent apprendre à créer vos propres composants réutilisables, tester complètement son application ou améliorer les performances de votre application Angular !

L’équipe d’AMBIENT IT

Installation de la version 15 d’angular

Afin d’installer Angular 15, vous devez ouvrir une nouvelle interface de ligne de commande et exécuter la commande suivante :

Désinstallez Angular CLI

npm uninstall -g @angular/cli

Installez la dernière version d’Angular CLI

npm install -g @angular/[email protected]

Créez un répertoire démo

mkdir demo

Entrez dans le répertoire crée

cd demo

Générez un nouveau projet que vous renommerez « angular starter » avec le choix manuel des options (mettre oui pour tout)

ng new angular-starter

Se positionner dans le nouveau projet

cd angular-starter

Exécutez le programme

npm run start

Testez l’application dans votre navigateur

localhost:4200

Les nouveautés de la version 15 d’ANGULAR

Cette nouvelle version d’Angular 15 propose de nouvelles fonctionnalités pour permettre à l’utilisateur de gagner du temps. En effet, la version offre moins de codes pour les utilisateurs, des API autonomes et stables sont inclus et des améliorations de performance ont été effectuées.

API de composition de directives

Cette fonctionnalité permet de composer facilement des directives et d’améliorer des éléments hôtes grâce à des stratégies. Cette nouveauté comble un manque ressenti par Angular, car son système de directive ne facilitait pas l’application d’une directive à un élément en particulier. Avec cette version d’Angular, il est désormais possible de le faire. Material fournit une MatTooltip directive pour appliquer un élément et afficher son infobulle, ou bien de rendre un élément déplaçable à l’aide d’une CdkDrag directive.

Amélioration de la cli

Les versions inférieures de NodeJS v14.20 et TypeScript v4.8.2 sont à actualiser, car elles ne sont plus supportées par l’application. Les importations SCSS avec un « tilde » au début sont devenus inutiles. C’est pourquoi il est important de supprimer ce tilde afin de faire fonctionner la ligne de commande, auquel cas, vous ferez face à ce type de message d’erreur.

'src/styles.scss' imports '~font-awesome/scss/font-awesome' with a tilde. Usage of '~' in imports is deprecated.

De plus, il est possible de générer un nouveau composant autonome grâce à la commande : ng g component –standalone pour introduire la prise en charge des API stables et autonomes. Par ailleurs, la suppression des commandes test.ts, polyfills.ts et environments permet la simplification de la sortie de ng new.

Meilleures traces de pile

Angular 15 facilite le débogage grâce aux nombreuses recherches effectuées avec les développeurs de Google Chrome dans l’objectif de présenter des traces de piles propres. Chrome DevTools a mis en place un système pour détourner les scripts venant de node_modules qui est l’annotation des cartes source via la CLI Angular. Une collaboration avec une API de marquage de pile asynchrone dans le but d’une concaténation des tâches asynchrones dans une seule trace de pile. Zone.js a été intégré à l’API afin de fournir des traces de pile liées.

api autonome

Introduits dans la version 14 d’Angular, les développeurs peuvent créer des applications sans utiliser des modules Ng. Les APIs autonomes sont graduées et les composants autonomes fonctionnent avec l’application. L’utilisation de composants autonomes octroie la possibilité de travailler en synchronisation avec du HTTP, Angular Elements et les routeurs clients. De plus, les API autonomes permettent la création d’applications multi-routes. Les bundlers peuvent supprimer les fonctionnalités inutilisées du routeur afin de réduire la taille du bundle.

Composants basés sur material design components

Conservation de la plupart des APIs TypeScript et des sélecteurs de directives/composants pour les nouveaux composants identiques à l’ancienne implémentation. Plusieurs projets Google ont migré, permettant de fluidifier le chemin de migration externe et de documenter la liste complète des modifications à apporter. Refactorisation des composants de matériaux angular fondées sur des composants de conception de matériaux pour le Web garantissant une meilleure accessibilité et une meilleure adhésion à la spécification Material Deisgn.

La directive image

La NgOptimizedImage direct est devenu stable. Il est désormais possible d’ajouter cette API ou NgModule pour réduire le temps de téléchargement des images. Cette directive garantit une image de taille appropriée en générant l’attribut srcset. Il existe un mode de remplissage pour que l’image remplisse son conteneur parent en supprimant l’obligation de déclarer la largeur et la hauteur de l’image. La directive empêche le changement de mise en page grâce à width et height ou avertir que le contenu d’une image est visuellement déformé.

Conclusion

Pour résumer, les nouveautés apportées sur Angular 15 tendent à faciliter le travail des développeurs avec moins de codes, en supprimant certaines fonctions qui peuvent être inutiles. De l’optimisation a été ajoutée afin d’être efficace dans sa programmation et pour simplifier le framework. Cette version cherche la stabilité de l’application, mais également à améliorer l’expérience et les performances des développeurs pour qu’elle soit accessible même aux débutants.