Composants d'injection de dépendances AngularJS

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.

⚠️ Note de version : La prise en charge d'AngularJS a pris fin en janvier 2022., sans correctifs de sécurité. Angular moderne injecte via des fournisseurs @Injectable et injecter()Le code ci-dessous reste historique.

Alors commençons par comprendre ce qu'est une dépendance.

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.

• La case « Modèle » représente 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 la suite de ce tutoriel, nous examinerons plus en détail l'injection de dépendances et la manière dont elle est mise en œuvre. AngularJS.

Quel composant peut être injecté comme dépendance dans AngularJS ?

Dans AngularJS, les dépendances sont injectées à l'aide d'une « méthode de fabrique 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.

Un AngularJS module enregistre les objets injectables à travers cinq recettes.

Nous avons déjà vu que le service $http peut être utilisé dans AngularJS pour obtenir des données d'un 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 de la manière suivante.

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 les étapes suivantes :

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 au sein d'AngularJS fournit ensuite une instance du service $http à notre contrôleur pour un traitement ultérieur.

Formes d'annotation : Annotation implicite La minification interrompt le fonctionnement du code en lisant les noms des paramètres. En revanche, la notation de tableau en ligne et `$inject` y résistent ; `ng-strict-di` sur `ng-app` rejette les annotations implicites.

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 la création d'un simple Javascénario objet et le transmettre au contrôleur pour traitement ultérieur.

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

Étape 1) Créer un JavaCréez un objet script en utilisant le composant valeur et associez-le à votre module AngularJS principal.

Le composant valeur prend deux paramètres : la clé et la valeur de la clé. JavaObjet script créé.

Étape 2) Consultez la JavaObjet de script de la Contrôleur AngularJS

<! 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>

Le code ci-dessus effectue les étapes suivantes

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

   La fonction value du module AngularJS est utilisée pour créer une paire clé-valeur appelée « TutorialID » et la valeur « 5 ».

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

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

3.  $scope.ID =TutorialID;

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

4. {{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

2) Service

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

Par exemple, « $http » est un service d'AngularJS 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 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, les étapes suivantes sont effectuées

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

   Nous créons ici un nouveau service appelé « AdditionService » en utilisant le paramètre de service de notre module AngularJS principal.

2.  this.ADDITION = function(a,b)

   Nous créons ici une nouvelle fonction appelée ADDITION au sein de notre service. Ainsi, lorsqu'AngularJS instanciera notre service AdditionService dans notre contrôleur, nous pourrons accéder à la fonction 'ADDITION'. Dans sa définition, cette fonction accepte deux paramètres : a et b.

3.  return a+b;

   Nous définissons ici le corps de notre fonction ADDITION qui additionne simplement les paramètres et renvoie la valeur ajoutée.

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

   Il s'agit de l'étape principale qui implique l'injection de dépendances. Dans la définition de notre contrôleur, nous faisons maintenant référence à notre service « AdditionService ». Lorsqu'AngularJS détecte cette référence, il instancie un objet de type « AdditionService ».

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

   Nous accédons maintenant à la fonction « ADDITION » définie dans notre service et nous l'assignons à 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.

FAQ