Avec Angular tu utilises probablement plusieurs services pour le traitement de tes données. Savais-tu que tu pouvais faire de la composition d’injection multi services pour gagner en lisibilité et en réutilisabilité? Cela est particulièrement utile quand tu crées de larges applications qui requièrent plusieurs services pour le traitement et la manipulation des données.
Une grande partie des demandes de support que je reçois concernent la manière de traiter et de manipuler les données. C’est une question récurrente et à chaque fois quand j’interviens, il ressort que l’utilisation des services Angular est dans l’ensemble bien comprise, mais l’optimisation de leurs utilisations pour la gestion au sein de grosses applications est souvent plus difficile et compliquée à mettre en place.
Je vais te montrer dans cet article comment organiser tes services Angular et utiliser l’injection multi services pour optimiser le traitement et la manipulation des données.
Le principe des services dans Angular
Pour bien comprendre ce que je vais te présenter, il faut vraiment être au clair avec ce qu’est un service Angular, pourquoi et comment les utiliser.
Donc pour rappel les services permettent d’englober des fonctionnalités dont une application à besoin pour traiter et manipuler les données qu’elle doit afficher ou interpréter.
Tu comprends alors que Angular propose de séparer le traitement des données et l’affichage dans une vue de composent. Cela permet notamment d’augmenter la modularité et la réutilisabilité des services et d’alléger les classes composants la vue de l’application. C’est le principe de base.
À partir de là on va utiliser ce principe à son maximum et tirer parti de cette fonctionnalité pour nous faciliter le travail.
Utiliser plusieurs services avec Angular
Angular permet de créer un nombre illimité de services pour permettre de traiter et manipuler les données dans une application.
Mais n’as pas tu remarqué que depuis le temps que tu codes, les tâches que tu es amené à faire pour traiter les données d’un projet sont quasiment toujours les mêmes? À part quelques exceptions liées aux spécificités métier de l’application, c’est toujours le même type d’actions que l’on fait:
- récupération d’un lot de donnée (requête AJAX; appel service natif, etc…)
- extraction des données désirées
- decodage des valeurs
- manipulation de formating
- assignation à un « state » pour être consommé par les composante de l’application
L’idée est alors de découper ses actions en plusieurs services pour enfin pouvoir « composer » avec eux les opérations nécessaires à la récupération et au traitement des données. Je vais vous montrer avec un exemple simple et réutilisable, comment faire.
Comment mettre un place un système d’injection multi services?
Dans l’exemple qui suit, je te montre un exemple qui compose plusieurs services pour construire l’objet de data désire. Ici on veut récupérer les informations d’un utilisateur et une liste d’articles qu’il a publié.
En premier je découpe la logique des opérations:
- récupérer l’ID de l’utilisateur
- faire une requête pour récupérer les informations de l’user
- faire une deuxième requête pour récupérer les posts de l’user
- manipuler les données pour les formater
- consommer les donnée dans un component
Et j’attaque la création des divers services dont j’ai besoin: DatasService, UsersService et PostsServices.
Pourquoi DatasService? C’est le service que je vais utiliser pour faire ma composition de sous services. Ainsi je pourrai si je le désire utiliser les services UsersService et PostsServices indépendamment l’une de l’autre.
Je t’ai préparé un exemple concret sur stackblitz. Regarde:
Tu remarques que le service DatasService est très épuré car il ne se contente que de formater les données récupérée par les autres services injectés via le constructeur.
Une autre chose très agréable c’est le component qui appelle le service. Il est complètement dénué de traitement de données. Il ne se contente que de gérer les interactions avec l’interface et de binder les données récupérées.
Astucieux non?
Conclusion
La composition de service permet vraiment d’accélérer le développement quand tu es amené à créer plusieurs features qui doivent effectuer du traitement de données. Un autre aspect avantageux s’est la testabilité. Comme la logique est découpée en plus petit bout, il est plus facile me mettre en place des tests unitaire et fonctionnel sur ce type de service. Donc n’hésite pas faire de la composition de service quand tu as de grosses opérations de traitement de données à faire.
J’espère que cet article t’a plu et t’aura appris de nouvelle chose. N’hésite pas à t’abonner à ma newsletter pour être notifié quand je publie un nouvel article. Tu peux aussi aller regarder sous la rubrique Angular les autres postes qui traitent du même sujet.
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.