La dernière version d'Angular est sortie en novembre. Minko Gechev résume les nouvelles fonctionnalités les plus importantes dans son annonce de sortie.

Dans cet article, je partage des ressources qui vous apprendront comment fonctionnent ces nouvelles fonctionnalités angulaires :

• API autonomes (elles sont maintenant stables)
• API autonome arborescente de routeur et gardes de routeur fonctionnels
• API autonome arborescente HttpClient
• API de composition de directives
• Directive sur les images

API autonomes

L'équipe Angular a introduit les API autonomes dans Angular v14 en tant que fonctionnalité d'aperçu pour les développeurs. Dans Angular v15, ils ne sont plus dans l'aperçu du développeur et font partie de la surface stable de l'API.

Les composants, les directives et les canaux peuvent désormais être marqués comme autonomes : vrais. Les classes angulaires marquées comme autonomes n'ont pas besoin d'être déclarées dans un NgModule.

Le guide « Premiers pas avec les composants autonomes » de la documentation Angular explique comment créer et utiliser des composants autonomes.

API autonome arborescente de routeur et gardes de routeur fonctionnels

Andrew Scott explique comment nous pouvons créer des routeurs sans RouterModuleet comment utiliser des protections de routeur fonctionnelles :

Pour en savoir plus sur la façon de réduire la taille du bundle avec des routeurs et des composants autonomes, lisez l'article de Kevin Kreuzer :

API autonome arborescente HttpClient

Nous pouvons maintenant utiliser l'API client HTTP sans le HttpClientModule. Netanel Basal nous montre comment appliquer cette nouvelle fonctionnalité et il montre comment nous pouvons définir des intercepteurs dans des modules chargés paresseux :

API de composition de directives

De la documentation officielle:

Les directives angulaires offrent un excellent moyen d'encapsuler des comportements réutilisables - les directives peuvent appliquer des attributs, des classes CSS et des écouteurs d'événements à un élément.

L'API de composition de directives vous permet d'appliquer des directives à l'élément hôte d'un composant depuis le composant.

Cédric Exbrayat explique pourquoi nous avons besoin de cette nouvelle API :

Henrique Custódia illustre avec un bel exemple le fonctionnement de l'API de composition de Directive :

Angular 15 : Utilisation de l'API de composition de directives

Directive sur les images

Le guide « Premiers pas avec NgOptimizedImage » de la documentation angulaire explique comment la nouvelle NgOptimizedImagedirective autonome nous aide à adopter les meilleures pratiques d'optimisation des performances pour le chargement des images.

Fábio Englert Moutinho teste la NgOptimizedImagedirective dans un exemple d'application de commerce électronique, et il obtient jusqu'à 50 % de meilleurs scores Lighthouse :

➕ Avez-vous vu d'autres ressources que je devrais ajouter à ce guide d'étude Angular 15 ? N'hésitez pas à me l'envoyer pour que je puisse le mettre dans l'article !

‍À propos de l'auteur

Je m'appelle Gergely Szerovay , je travaille en tant que chef de chapitre du développement frontend. Enseigner (et apprendre) Angular est une de mes passions. Je consomme quotidiennement du contenu lié à Angular - articles, podcasts, conférences, etc.

Si vous êtes intéressé par ma collection mensuelle d'excellentes ressources Angular, abonnez-vous à ma publication intitulée Angular Addicts. Vous pouvez lire les numéros précédents ici .

Et si vous avez vu récemment un bon article, tweet ou autre ressource lié à Angular, faites-le moi savoir ici dans les commentaires ou envoyez-moi un DM sur Twitter ! Je pourrais le présenter dans le prochain numéro d'Angular Addicts !

Veuillez également me faire savoir quels autres sujets angulaires vous intéressent, j'ai de nombreux projets d'articles ici sur Medium en attente de publication.

Suivez-moi sur Medium , Twitter ou LinkedIn pour en savoir plus sur Angular !