Injection de dépendances AngularJS : quels composants injectés

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

Injection de dépendance dans AngularJS est un modèle de conception logicielle qui implémente l'inversion du contrôle pour résoudre les dépendances. Il décide de la manière dont les composants conservent leurs dépendances. Il peut être utilisé lors de la définition des composants ou en fournissant des blocs d'exécution et de configuration du module. Il vous permet de rendre les composants réutilisables, testables et maintenables.

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 auprès d’une source extérieure. Ceci constitue la base de l'injection de dépendance AngularJS dans laquelle si un objet dépend d'un autre ; l'objet principal ne prend 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 commençons par comprendre ce qu'est une dépendance.

Injection de dépendances dans AngularJS

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

  • Le modèle' box décrit la « classe 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 modèle » 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 accéder à la classe modèle.

Dans le reste de ce didacticiel, nous examinerons davantage l'injection de dépendances et la manière dont cela est réalisé dans AngularJS.

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

Dans Angular.JS, les dépendances sont injectées à l'aide d'une « méthode d'usine injectable » ou d'une « fonction constructeur ».

Ces composants peuvent être injectés avec des composants « service » et « valeur » en tant que dépendances. Nous avons vu cela 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 depuis MySQL ou MS. SQL Base de données du serveur via un PHP application Web.

Le service $http est normalement défini depuis le contrôleur dans la suitewing manière.

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

Désormais, lorsque le service $http est défini dans le contrôleur, comme indiqué ci-dessus. Cela signifie que le contrôleur dépend désormais du service $http.

Ainsi, lorsque le code ci-dessus sera exécuté, AngularJS effectuera la procédure suivantewing pas;

  1. Vérifiez si le « service $http » a été instancié. Puisque notre « contrôleur » dépend désormais 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 désormais appeler les fonctions nécessaires au sein du service $http pour un traitement ultérieur.

Exemple d'injection de dépendances

Dans cet exemple, nous apprendrons comment utiliser l'injection de dépendances dans AngularJS.

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

  1. La première passe par le « composant de valeur »
  2. Une autre solution consiste à utiliser un « Service »

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

1) Composante valeur

Ce concept repose sur le fait de créer un simple JavaScript objet et le transmettre au responsable du traitement pour un traitement ultérieur.

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

Étape 1) Créez un objet JavaScript à l'aide du composant value et attachez-le à votre module AngularJS.JS principal.

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

Étape 2) Accédez à l'objet JavaScript depuis le Contrôleur angulaire.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

Dans l'exemple de code ci-dessus, les principales étapes 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 5 puisse être transmise du contrôleur à la vue.

  1. {{ID}}

Le paramètre ID est affiché dans la vue sous forme d'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

Composant de valeur dans l'injection de dépendances

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, une fois injecté dans vos contrôleurs, fournit les fonctions nécessaires de

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

Ces fonctions peuvent ensuite être invoquées depuis votre contrôleur en conséquence.

Examinons 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.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

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

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Dans l'exemple ci-dessus, le suiviwing les étapes 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 pourrons 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;

Nous définissons ici 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)

Il s’agit de l’étape principale qui implique l’injection de dépendances. Dans notre définition de contrôleur, nous faisons désormais référence à notre service « AdditionService ». Lorsque AngularJS voit cela, il instancie 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.

Ceci est donc un exemple simple de la façon dont nous pouvons définir notre service et injecter les fonctionnalités 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 disposez de fonctionnalités communes utilisées dans plusieurs modules d'application, le meilleur moyen consiste à définir un service central avec cette fonctionnalité, puis à injecter ce service en tant que dépendance dans vos modules d'application.
  • L'objet valeur d'AngularJS peut être utilisé pour injecter des objets JavaScript simples dans votre contrôleur en utilisant $inject in AngularJS.
  • Le module de service peut être utilisé pour définir vos services personnalisés qui peuvent être réutilisés dans plusieurs modules AngularJS.