Guide pratique de l'injection angulaire: services et dépendances

Apprenez à utiliser les services et l'injection de dépendances pour améliorer votre développement Angular en le rendant modulaire, extensible et à couplage lâche.

Angular est un cadre de création d'applications dynamiques côté client utilisant HTML, CSS et JavaScript. Il dispose d'un bel outil CLI qui aide à la productivité du développeur et à la génération de code qui suit le guide de conception angulaire recommandé afin que vous puissiez créer des applications rapides, réactives et modulaires. Dans cet article, j'écris sur les services et l'injection de dépendances dans Angular.

Si vous voulez continuer à lire, vous devez déjà avoir une compréhension des composants, des directives, des modules et des liaisons de données dans Angular. J'utiliserai la CLI angulaire pour générer les fichiers nécessaires, donc une compréhension de l'utilisation de la CLI angulaire est également nécessaire. Cependant, si vous ne savez pas ces choses, vous êtes en bonne compagnie parce que j'ai écrit à leur sujet ?.

Voici les liens vers les articles que j'ai écrits sur ces sujets:

1. Un guide pratique de Angular: environnement et configuration de projet
2. Un guide pratique de Angular: composants et modules
3. Un guide pratique To Angular: Data Binding & Directives

L'exemple d'application que nous allons construire ensemble pendant que vous parcourez l'article s'appuie sur l'exemple d'application des articles que j'ai énumérés ci-dessus. Si vous avez lu et travaillé avec moi sur ces articles, vous devriez avoir le code complet. Sinon, vous pouvez télécharger le projet sur GitHub . Lorsque vous le téléchargez, vous devez ensuite copier le contenu du dossier src-part-3 dans le dossier src si vous souhaitez coder pendant que vous lisez.

Services [19659010] Les services sont un terme large utilisé dans diverses méthodologies de développement pour désigner une fonction ou un groupe de fonctions conçu pour faire quelque chose de spécifique. Vous le verrez utilisé dans l'architecture de microservices, l'architecture orientée services, la conception pilotée par domaine et bien d'autres.

Par exemple, supposons que vous ayez une classe qui représente un compte bancaire. Cette classe a des fonctions pour vous dire le solde, déduire et ajouter de l'argent au compte. Mais, si vous souhaitez transférer des fonds d'un compte à un autre, vous avez besoin d'une fonction qui déduira d'un compte et créditera un autre compte. Cette fonctionnalité appartient à un service. Il peut être dans une classe avec plusieurs autres fonctions qui ne rentrent pas dans la classe de compte mais doivent manipuler le compte. En travaillant avec Angular et TypeScript, un service est généralement une classe avec un objectif bien défini.

Pour créer une application à couplage lâche et réutiliser du code, il est préférable de concevoir vos composants pour être maigre et efficace. Cela signifie que le travail du composant doit être de se concentrer sur l'expérience utilisateur et rien de plus. Un composant doit contenir des propriétés et des méthodes de liaison de données et déléguer des tâches telles que la récupération de données et la validation d'entrée à une autre classe (un service). En procédant ainsi, nous pouvons également réutiliser ce code ou ce service dans d'autres composants.

Nous allons mettre la logique de récupération des données dans un service. Ajoutez un nouveau fichier dans le dossier src / app / dépenses appelé dépenses.service.ts et mettez-y le code ci-dessous.

 importez IExpense depuis "./expense";

classe d'exportation ExpenseService {
  getExpenses (): IExpense [] {
    retour [
      {
        description: "First shopping for the month",
        amount: 20,
        date: "2019-08-12"
      },
      {
        description: "Bicycle for Amy",
        amount: 10,
        date: "2019-08-08"
      },
      {
        description: "First shopping for the month",
        amount: 14,
        date: "2019-08-21"
      }
    ];
  }
}

Il s'agit d'un service que nous utiliserons dans les endroits où nous devons récupérer les dépenses. Nous l'utiliserons dans le composant home. Ouvrez src / app / home / home.component.ts et après la ligne 2, ajoutez la déclaration ci-dessous:

 import {ExpenseService} de "../expenses/expense.service";

Déclarez ensuite une variable avec la classe de service comme type et mettez à jour le constructeur.

 _expenseService privé: ExpenseService;
  constructeur () {
    this._expenseService = new ExpenseService ();
    this.expenses = this._expenseService.getExpenses ();
  }

  dépenses: IExpense [];

Nous avons initialisé la classe de service et appelé getExpenses () en affectant la valeur retournée à la propriété dépenses . Nous avons supprimé la valeur par défaut pour dépenses et défini la valeur à l'aide de la classe de service, comme vous pouvez le voir dans le constructeur. C'est ainsi que nous déplaçons la logique de récupération des données vers un service, et nous pouvons réutiliser cette fonction entre les composants.

Injection de dépendance

L'injection de dépendance (DI) est un modèle de conception par lequel des dépendances ou des services sont passés à des objets ou les clients qui en ont besoin. L'idée derrière ce modèle est qu'un objet séparé crée la dépendance requise et la transmette au client. Cela fait qu'une classe ou un module se concentre sur la tâche pour laquelle il est conçu et empêche les effets secondaires lors du remplacement de cette dépendance. Par exemple, la classe du composant home dépend du service ExpenseService pour récupérer des données. Nous ne voulons pas qu'il se préoccupe de la façon de créer cette dépendance, nous le déléguons donc à un conteneur DI qui sait comment créer des services et les transmettre aux clients qui en ont besoin. L'utilisation de ce modèle permet d'obtenir un couplage lâche et augmente la modularité d'une application logicielle, la rendant ainsi extensible.

DI est également au cœur d'Angular et peut être utilisé pour fournir aux composants les dépendances dont ils ont besoin. Vous devrez enregistrer le service auprès du système Angular DI afin qu'il sache comment l'injecter dans les composants qui en ont besoin. Un injecteur est responsable de la création des dépendances et gère un conteneur d'instances de dépendances qu'il réutilise si nécessaire. L'injecteur sait comment trouver et créer des dépendances via un objet appelé le fournisseur . Pendant le processus d'amorçage de l'application, Angular crée les injecteurs nécessaires pour que vous n'ayez pas à les créer.

Pour rendre un service injectable, vous devez l'enregistrer auprès d'un fournisseur . Vous pouvez procéder de trois manières:

1. Enregistrez le service au niveau du composant. Pour ce faire, vous ajoutez le service à la valeur du tableau de l'option provider dans les métadonnées @Component () . En utilisant cette approche, chaque fois que le composant est créé, une nouvelle instance du service est créée et y est injectée.
       

    @Component ({
     sélecteur: "et-home",
     templateUrl: "./home.component.html",
     styleUrls: ["./home.component.css"],
     fournisseurs: [ ExpenseService ]
   })
   

2. Enregistrez le service au niveau du module. Cela signifie que vous enregistrez le service avec un NgModule spécifique en le spécifiant dans l'option fournisseurs de la métadonnée @NgModule () . Avec cette approche, une seule instance du service est injectée aux clients qui en ont besoin. Par exemple, si les composants home et briefing-cards ont besoin du même service et que ce service est enregistré au niveau du module, la même instance de ce service est injectée dans l'instance de home et briefing-cards .
       

    @NgModule ({
     fournisseurs: [ ExpenseService ],
    ...
   })
   

3. Enregistrez le service au niveau racine. Cela signifie qu'une seule instance du service est partagée dans l'application. Pour ce faire, vous enregistrez le service à l'aide du décorateur @Injectable () dans la définition de ce service.
       

    @Injectable ({
    providedIn: 'root',
   })
   

Vous pouvez utiliser la CLI pour générer des services. L'utilisation de l'interface CLI créera une classe de service et l'enregistrera à l'aide du fournisseur racine par défaut. Pour utiliser l'interface CLI, vous exécutez la commande ng generate service . Par exemple, nous aurions pu ng générer des dépenses / dépenses de service pour générer le ExpenseService enregistré auprès du fournisseur racine.

Vous allez enregistrer le ExpenseService que vous avez créé plus tôt, avec le fournisseur racine.

Ouvrez le fichier de service et ajoutez l'instruction ci-dessous

 import {Injectable} de '@ angular / core';

@Injectable ({
 providedIn: 'root',
})
classe d'exportation ExpenseService {
  .......
}

Avec ce code, vous avez référencé @Injectable et utilisé le décorateur sur la définition de classe.

Pour que ce service soit injecté dans le composant, vous le spécifiez comme paramètre dans le constructeur du composant. Angular détermine les dépendances dont un composant a besoin en examinant les types de paramètres du constructeur. Nous mettrons à jour le constructeur du composant home afin que le service ExpenseService soit créé et injecté dans le composant.

Ouvrez src / app / home / home.component .ts et mettre à jour la définition du constructeur comme suit:

 constructeur (dépensesService: ExpenseService) {
    this._expenseService = dépensesService;
    this.expenses = this._expenseService.getExpenses ();
  }

Lorsque le composant doit être créé et Angular découvre que le composant a une dépendance à l'égard d'un service, il vérifie d'abord si l'injecteur a des instances existantes de ce service. Si une instance de ce service n'existe pas encore, l'injecteur en crée une à l'aide du fournisseur enregistré, puis l'ajoute à l'injecteur avant de le renvoyer. Si une instance du service existe déjà dans l'injecteur, cette instance est renvoyée. Le composant est ensuite initialisé à l'aide de l'instance de service renvoyée par l'injecteur.

Testez votre travail!

Nous sommes arrivés assez loin pour que nous devions maintenant exécuter l'application et voir que le code que nous avons ajouté fonctionne. Ouvrez la ligne de commande et exécutez ng serve -o . Cela devrait démarrer l'application et l'ouvrir dans le navigateur.

Conclusion

Dans cet article, vous avez découvert l'injection de dépendances en tant que modèle et comment l'utiliser. en angulaire. Nous avons parcouru un exemple en créant un service et en faisant savoir à la classe du composant comment créer ce service. Ensuite, je vous ai présenté l'injection de dépendance, qui est l'une des façons dont Angular peut rendre votre application modulaire, extensible et faiblement couplée. Avec lui, vous concentrez votre composant sur la vue et sur la façon de rendre les données. Nous avons déplacé du code qui sait comment récupérer des données et manipuler les données loin de la logique du composant, dans un service, puis utilisé l'injection de dépendances pour permettre à Angular de transmettre ce service au composant. Avec cette approche, nous avons atteint une séparation des préoccupations où:

• Le composant se concentre sur la vue et ne change que lorsque les exigences de vue changent.
• L'injecteur dans Angular sait comment injecter des services en fonction de la façon dont nous avons configuré le service pour qu'il soit injectable.

Dans l'article suivant, vous apprendrez comment effectuer des requêtes HTTP dans Angular. Restez à l'écoute! ?

Le code de cet article peut être téléchargé à partir de GitHub . Il est contenu dans le dossier src-part-4 . Si vous avez des questions, n'hésitez pas à laisser un commentaire ou à me contacter sur Twitter .