Injection de dépendances dans AngularJS avec exemple

Table des matières:

Anonim

Qu'est-ce que l'injection de dépendances dans AngularJS?

L'injection de dépendances est un modèle de conception logicielle qui implémente l'inversion de contrôle pour résoudre les dépendances.

Inversion de contrôle : cela signifie que les objets ne créent pas d'autres objets sur lesquels ils s'appuient pour faire leur travail. Au lieu de cela, ils obtiennent ces objets d'une source extérieure. Ceci constitue la base de l'injection de dépendance dans laquelle si un objet dépend d'un autre; l'objet principal n'assume pas la responsabilité de créer l'objet dépendant et d'utiliser ensuite ses méthodes. Au lieu de cela, une source externe (qui dans AngularJS, est le framework AngularJS lui-même) crée l'objet dépendant et le donne à l'objet source pour une utilisation ultérieure.

Alors, comprenons d'abord ce qu'est une dépendance.

Le diagramme ci-dessus montre un exemple simple d'un rituel quotidien dans la programmation de bases de données.

  • La boîte «Modèle» représente la «classe de modèle» qui est normalement créée pour interagir avec la base de données. Alors maintenant, la base de données est une dépendance pour que la "classe Model" fonctionne.
  • Par injection de dépendances, nous créons un service pour récupérer toutes les informations de la base de données et entrer dans la classe de modèle.

Dans le reste de ce didacticiel, nous examinerons plus en détail l'injection de dépendances et la façon dont cela est accompli dans AngularJS.

Dans ce didacticiel, vous apprendrez-

  • Quel composant peut être injecté en tant que dépendance dans AngularJS
  • Exemple d'injection de dépendance
    • Composant de valeur
    • Un service

Quel composant peut être injecté en tant que dépendance dans AngularJS

Dans Angular.JS, les dépendances sont injectées en utilisant une "méthode d'usine injectable" ou une "fonction constructeur".

Ces composants peuvent être injectés avec des composants «service» et «value» en tant que dépendances. Nous l'avons vu dans une rubrique précédente avec le service $ http.

Nous avons déjà vu que le service $ http peut être utilisé dans AngularJS pour obtenir des données d'une base de données MySQL ou MS SQL Server via une application Web PHP.

Le service $ http est normalement défini à partir du contrôleur de la manière suivante.

 sampleApp.controller ('AngularJSController', function ($scope, $http)

Maintenant, lorsque le service $ http est défini dans le contrôleur comme indiqué ci-dessus. Cela signifie que le contrôleur a maintenant une dépendance sur le service $ http.

Ainsi, lorsque le code ci-dessus est exécuté, AngularJS effectuera les étapes suivantes;

  1. Vérifiez si le "service $ http" a été instancié. Puisque notre "contrôleur" dépend maintenant du "service $ http", un objet de ce service doit être mis à la disposition de notre contrôleur.
  2. Si AngularJS découvre que le service $ http n'est pas instancié, AngularJS utilise la fonction 'factory' pour construire un objet $ http.
  3. L'injecteur dans Angular.JS fournit ensuite une instance du service $ http à notre contrôleur pour un traitement ultérieur.

Maintenant que la dépendance est injectée dans notre contrôleur, nous pouvons maintenant invoquer les fonctions nécessaires dans le service $ http pour un traitement ultérieur.

Exemple d'injection de dépendance

L'injection de dépendances peut être implémentée de 2 manières

  1. La première consiste à utiliser le "composant de valeur"
  2. Un autre est à travers un "Service"

Examinons plus en détail la mise en œuvre des deux méthodes.

1) Composante de valeur

Ce concept est basé sur le fait de créer un objet JavaScript simple et de le transmettre au contrôleur pour un traitement ultérieur.

Ceci est mis en œuvre en utilisant les deux étapes ci-dessous

Étape 1) Créez un objet JavaScript en utilisant le composant de valeur et attachez-le à votre module principal AngularJS.JS.

La composante valeur prend deux paramètres; l'un est la clé et l'autre la valeur de l'objet javascript qui est créé.

Étape 2) Accédez à l'objet JavaScript à partir du contrôleur Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

Dans l'exemple de code ci-dessus, les étapes principales ci-dessous sont en cours d'exécution

  1. sampleApp.value ("TutorialID", 5);

La fonction de valeur du module Angular.JS JS est utilisée pour créer une paire clé-valeur appelée "TutorialID" et la valeur "5".

  1. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

La variable TutorialID devient désormais accessible au contrôleur en tant que paramètre de fonction.

  1.  $scope.ID =TutorialID;

La valeur de TutorialID, qui est 5, est maintenant affectée à une autre variable appelée ID dans l'objet $ scope. Ceci est fait pour que la valeur de 5 puisse être transmise du contrôleur à la vue.

  1. {{IDENTIFIANT}}

Le paramètre ID est affiché dans la vue en tant qu'expression. Ainsi, la sortie de «5» sera affichée sur la page.

Lorsque le code ci-dessus est exécuté, la sortie sera affichée comme ci-dessous

2) Service

Le service est défini comme un objet JavaScript singleton composé d'un ensemble de fonctions que vous souhaitez exposer et injecter dans votre contrôleur.

Par exemple, le "$ http" est un service dans Angular.JS qui, lorsqu'il est injecté dans vos contrôleurs fournit les fonctions nécessaires de

(get (), query (), save (), remove (), delete ()).

Ces fonctions peuvent ensuite être appelées à partir de votre contrôleur en conséquence.

Regardons un exemple simple de la façon dont vous pouvez créer votre propre service. Nous allons créer un service d'addition simple qui ajoute deux nombres.

Event Registration

Guru99 Global Event




Result: {{result}}

Dans l'exemple ci-dessus, les étapes suivantes sont effectuées

  1.  mainApp.service('AdditionService', function()

Ici, nous créons un nouveau service appelé 'AdditionService' en utilisant le paramètre de service de notre module principal AngularJS JS.

  1.  this.Addition = function(a,b)

Ici, nous créons une nouvelle fonction appelée Addition au sein de notre service. Cela signifie que lorsque AngularJS instancie notre AdditionService à l'intérieur de notre contrôleur, nous pourrions alors accéder à la fonction «Addition». Dans cette définition de fonction, nous disons que cette fonction accepte deux paramètres, a et b.

  1.  return a+b;

Ici, nous définissons le corps de notre fonction Addition qui ajoute simplement les paramètres et renvoie la valeur ajoutée.

  1.  mainApp.controller('DemoController', function($scope, AdditionService)

C'est la principale étape qui implique l'injection de dépendances. Dans notre définition de contrôleur, nous référençons maintenant notre service «AdditionService». Quand AngularJS verra cela, il instanciera un objet de type «AdditionService».

  1.  $scope.result = AdditionService.Addition(5,6);

Nous accédons maintenant à la fonction 'Addition' qui est définie dans notre service et l'attribuons à l'objet $ scope du contrôleur.

Voici donc un exemple simple de la façon dont nous pouvons définir notre service et injecter la fonctionnalité de ce service à l'intérieur de notre contrôleur.

Résumé:

  • L'injection de dépendances, comme son nom l'indique, est le processus d'injection de fonctionnalités dépendantes dans les modules au moment de l'exécution.
  • L'utilisation de l'injection de dépendances permet d'avoir un code plus réutilisable. Si vous aviez une fonctionnalité commune utilisée dans plusieurs modules d'application, le meilleur moyen est de définir un service central avec cette fonctionnalité, puis d'injecter ce service en tant que dépendance dans vos modules d'application.
  • L'objet de valeur d'AngularJS peut être utilisé pour injecter des objets JavaScript simples dans votre contrôleur.
  • Le module de service peut être utilisé pour définir vos services personnalisés qui peuvent être réutilisés dans plusieurs modules AngularJS.