LinkedSignal, nouvelle API HTTP…
Découvrez les nouvelles fonctionnalités d’Angular 19
- 5 février 2025
- Envoyé par : LaetitiaB
- Catégorie: Technologie
Après avoir exploré les avantages de l’hydratation incrémentale dans notre précédent article, nous vous proposons d’explorer les autres nouveautés qu’Angular 19 apporte.
Depuis l’introduction des signaux dans Angular 16, cette fonctionnalité a rapidement gagné en popularité parmi les développeurs. Les signaux offrent une manière réactive et efficace de gérer l’état et les données dans les applications Angular. Avec la sortie d’Angular 19, cette tendance est renforcée par l’ajout de la fonction `linkedSignal()`, qui apporte une nouvelle dimension à la gestion des signaux.
Mais ce n’est pas tout. Angular 19 introduit également une nouvelle API pour charger les ressources, offrant une gestion plus fine des requêtes HTTP et une intégration plus poussée avec les signaux. Enfin, plusieurs améliorations mineures mais significatives viennent compléter cette mise à jour, rendant le développement avec Angular encore plus fluide et performant.
Dans cet article, nous allons explorer en détail ces nouvelles fonctionnalités et découvrir comment elles peuvent transformer vos projets Angular.
1.Les LinkedSignal() : une nouvelle dimension pour la gestion des signaux
Depuis l’introduction des signaux dans Angular 16, cette fonctionnalité a rapidement gagné en popularité parmi les développeurs. Les signaux offrent une manière réactive et efficace de gérer l’état et les données dans les applications Angular. Avec la sortie d’Angular 19, cette tendance est renforcée par l’ajout de la fonction `linkedSignal()`, qui apporte une nouvelle dimension à la gestion des signaux.
a) Qu’est-ce que `linkedSignal()` ?
La fonction `linkedSignal()` permet de lier un signal source à un signal calculé.
En d’autres termes, elle permet de créer une relation directe entre deux signaux, où une modification dans le signal source entraîne automatiquement une mise à jour dans le signal calculé.
Cette fonctionnalité est particulièrement utile pour gérer des dépendances complexes entre différentes parties de l’état de l’application.
b) Exemple pratique : la mise à jour de `selectUser` et réinitialisation de `itemsPerPage`
Prenons un exemple concret pour illustrer l’utilité de `linkedSignal()`. Supposons que vous avez une application de gestion d’utilisateurs où vous pouvez sélectionner un utilisateur (`selectUser`) et afficher un certain nombre d’éléments par page (`itemsPerPage`). Vous souhaitez que chaque fois que vous mettez à jour `selectUser`, `itemsPerPage` soit réinitialisé à une valeur par défaut.
Voici comment vous pouvez utiliser `linkedSignal()` pour accomplir cela :
Dans cet exemple :
- Déclaration des signaux : nous déclarons deux signaux, `selectUser` et `itemsPerPage`. `selectUser` est un signal source qui contient l’ID de l’utilisateur sélectionné, tandis que `itemsPerPage` est un signal calculé qui dépend de `selectUser`.
- Utilisation de `linkedSignal()`: nous utilisons `linkedSignal()` pour lier `itemsPerPage` à `selectUser`. Chaque fois que `selectUser` est mis à jour, `itemsPerPage` est réinitialisé à 10.
- Mise à jour du signal source : la méthode `updateUser` met à jour `selectUser`, ce qui déclenche automatiquement la réinitialisation de `itemsPerPage`.
c) Avantages de `linkedSignal()`
- Réactivité améliorée :`linkedSignal()` permet de créer des relations réactives entre les signaux, ce qui simplifie la gestion des dépendances et améliore la réactivité de l’application.
- Code plus propre : en utilisant `linkedSignal()`, vous pouvez réduire la quantité de code nécessaire pour gérer les dépendances entre les signaux, rendant votre code plus propre et plus maintenable.
- Performance optimisée : les signaux et `linkedSignal()` sont conçus pour être performants, minimisant les recalculs inutiles et optimisant les performances de l’application.
La fonction `linkedSignal()` introduite dans Angular 19 est une avancée significative pour la gestion des signaux. Elle permet de créer des relations réactives entre les signaux, simplifiant ainsi la gestion des dépendances et améliorant la réactivité de l’application. En adoptant cette fonctionnalité, vous pouvez rendre votre code plus propre, plus maintenable et plus performant.
2.Nouvelle API pour charger les ressources dans Angular 19: une avancée dans la gestion des requêtes HTTP
Avec la sortie d’Angular 19, les développeurs bénéficient d’une nouvelle API pour la gestion des requêtes HTTP, qui va bien au-delà des capacités de la classe `HttpClient`.
Cette nouvelle API introduit des fonctionnalités avancées pour suivre le statut des requêtes, gérer les erreurs et intégrer les signaux directement dans les composants.
Cette innovation représente une avancée majeure pour les développeurs Angular, offrant une meilleure réactivité et une gestion plus fine des interactions asynchrones.
a) Pourquoi une nouvelle API ?
La classe `HttpClient` d’Angular a longtemps été le pilier des requêtes HTTP dans les applications Angular.
Cependant, avec l’évolution des besoins des développeurs et des utilisateurs, il est devenu évident que des fonctionnalités supplémentaires étaient nécessaires pour gérer efficacement les requêtes asynchrones.
La nouvelle API pour charger les ressources dans Angular 19 répond à ces besoins en offrant une gestion plus granulaire et réactive des requêtes HTTP.
b) Suivi du statut des requêtes
L’une des fonctionnalités les plus intéressantes de la nouvelle API est la capacité de suivre le statut des requêtes en temps réel.
Contrairement à `HttpClient`, qui se contente de renvoyer des observables pour les réponses, la nouvelle API permet de suivre l’état de chaque requête à travers différentes phases :
- Chargement : vous pouvez détecter quand une requête est en cours de chargement.
- Succès : vous pouvez être informé lorsque la requête a réussi et que les données sont disponibles.
- Erreurs : vous pouvez gérer les erreurs de manière plus fine, en identifiant précisément ce qui a échoué et pourquoi.
Cette granularité permet de créer des interfaces utilisateur plus réactives et informatives. Par exemple, vous pouvez afficher des indicateurs de chargement, des messages de succès ou des notifications d’erreur en fonction de l’état actuel de la requête.
c) Gestion des signaux
La nouvelle API pour charger les ressources s’intègre parfaitement avec les signaux, une fonctionnalité introduite dans Angular 16 et améliorée dans Angular 19.
Les signaux permettent de gérer l’état de manière réactive et déclarative, ce qui simplifie considérablement la gestion des données asynchrones.
Avec la nouvelle API, vous pouvez utiliser des signaux pour suivre le statut des requêtes directement dans vos composants. Exemple :
Dans cet exemple :
- Déclaration des signaux : nous déclarons trois signaux : `data` pour stocker les données récupérées, `loading` pour suivre l’état de chargement, et `error` pour gérer les messages d’erreur.
- Chargement des données : la méthode `loadData` utilise la nouvelle API `HttpResource` pour effectuer une requête GET. Les méthodes `onLoading`, `onSuccess` et `onError` permettent de gérer les différents états de la requête et de mettre à jour les signaux en conséquence.
- Mise à jour des signaux : les signaux sont mis à jour en fonction de l’état de la requête, permettant de réagir de manière réactive dans le template du composant.
d) Avantages de la nouvelle API
- Réactivité améliorée : cette nouvelle API permet de créer des interfaces utilisateur plus réactives en suivant le statut des requêtes en temps réel.
- Gestion fine des erreurs : vous pouvez gérer les erreurs de manière plus granulaire, en identifiant précisément ce qui a échoué et en fournissant des messages d’erreur plus informatifs.
- Intégration avec les signaux : l’intégration avec les signaux permet de gérer l’état de manière réactive et déclarative, simplifiant la gestion des données asynchrones.
- Code plus propre : en utilisant la nouvelle API, vous pouvez réduire la quantité de code nécessaire pour gérer les requêtes HTTP, rendant votre code plus propre et plus maintenable.
La nouvelle API offre donc une gestion plus fine des requêtes HTTP et en s’intégrant parfaitement avec les signaux, cette API permet de créer des applications plus réactives et plus performantes.
3.Autres améliorations
Angular 19 apporte également une série d’améliorations qui, bien que moins spectaculaires que celles précédemment citées, ont un impact significatif sur le développement quotidien et la maintenance des applications Angular.
a) Possibilité d’enlever le mode Standalone
L’une des améliorations les plus attendues est la possibilité de configurer votre application pour fonctionner sans le mode standalone.
Cette flexibilité permet aux développeurs de choisir l’architecture qui convient le mieux à leurs besoins spécifiques. Que vous préfériez une approche modulaire traditionnelle ou une configuration standalone, Angular 19 vous offre désormais la liberté de choisir.
b) Avertissements pour les imports non-utilisés
Désormais, si vous ajoutez des imports dans votre code qui ne sont pas utilisés, Angular affichera des avertissements.
Cette fonctionnalité aide à maintenir un code propre et à éviter les imports inutiles, ce qui peut améliorer les performances et réduire les risques d’erreurs.
c) Migration vers les signaux
Avec l’introduction des signaux dans Angular 16 et leur adoption croissante, Angular 19 facilite la migration vers cette nouvelle approche de gestion de l’état.
Vous pouvez maintenant convertir les `inputs/outputs`, `content`, et `viewChildren` en signaux et effectuer cette migration directement dans le dossier courant.
Cette fonctionnalité simplifie le processus de migration et permet aux développeurs de tirer parti des avantages des signaux sans avoir à réécrire entièrement leur code.
d) RouterOutletData
Cette fonctionnalité permet de passer des données à un composant enfant de manière plus fluide et plus intuitive.
En utilisant `routerOutletData`, vous pouvez facilement transmettre des informations entre les composants, améliorant ainsi la communication et la cohérence au sein de votre application.
Conclusion
En conclusion, Angular 19 apporte une multitude de nouvelles fonctionnalités et améliorations qui rendent le développement d’applications web plus performant et sécurisé. Que vous soyez un développeur chevronné ou un débutant, ces nouveautés offrent de nouvelles possibilités pour créer des applications modernes et efficaces.