Plusieurs façons d'injection de dépendances dans AngularJS

Cet article fait référence à AngularJsLe guide faisant autorité

Concepts

Injection de dépendances est un conception pattern, qui supprime le codage en dur des dépendances, permettant ainsi de modifier ou même de supprimer les dépendances au moment de l'exécution.

D'un point de vue fonctionnel, l'injection de dépendances trouvera automatiquement les dépendances à l'avance et informera la cible d'injection des ressources dépendantes, afin que les ressources puissent être injectées immédiatement lorsque la cible en a besoin.

AngularJS utilise $injetor (service d'injection) pour gérer les requêtes de dépendances et l'instanciation.

En fait, $injetor est responsable de l'instanciation de tous les composants dans AngularJS, y compris les modules d'application, les directives et les contrôleurs, etc.

Au moment de l'exécution, $injetor sera chargé d'instancier n'importe quel module au démarrage et de transmettre toutes les dépendances dont il a besoin.

---

Plusieurs méthodes d'injection de dépendances

1. Instruction d'injection inférentielle

S'il n'y a pas d'instruction explicite, AngularJS supposera que le nom du paramètre est dépendant. nom.

Veuillez noter que ce processus ne fonctionne que sur du code non compressé et non obscurci, car AngularJS nécessite la liste de paramètres d'origine non compressée pour l'analyse.

Exemple : (déclarer un module et un contrôleur)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

Quand AngularJS instancie ce module, il recherchera greeter et passera naturellement une référence à cela

2. Instruction d'injection explicite

AngularJS fournit une méthode explicite pour définir clairement une fonction lorsqu'elle est appelée Dépendances requises.

Déclarer les dépendances de cette manière peut toujours fonctionner normalement même si le code source est compressé et que les noms des paramètres changent.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

Les noms de paramètres que nous définissons pour notre fonction sont renommés$scope et renomméGreeter, puis nous utilisons

MyController.$inject=['$scope','greeter'];

plus tard pour ajouter explicitement les paramètres dont nous avons besoin Injection de dépendances dans la fonction MyController ;

Donc dans la fonction MyController, renommée

scope, MyController.

scope', 'greeter'] représente greeter

---

3. Instruction d'injection en ligne

La dernière instruction de mode d'injection fournie par AngularJS est l'instruction d'injection en ligne qui peut être utilisée à tout moment.

nous permet de transmettre des paramètres en ligne à partir de la définition de la fonction. De plus, cela évite l'utilisation de variables temporaires lors de la définition.

Cette méthode est en fait un sucre de syntaxe. Elle est exactement la même que la déclaration d'injection mentionnée précédemment via l'attribut $inject

Exemple : (Avec l'exemple ci-dessus. est le même, seule la partie js a été modifiée)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

L'effet de démonstration est toujours le même, aucune image n'est jointe

Puisque ce qui doit être traité est une liste de chaînes , les déclarations d'injection en ligne fonctionnent également correctement dans le code minifié.

Cet article fait référence au Guide définitif d'AngularJs

Concepts

L'injection de dépendances est un modèle de conception qui supprime le codage en dur des dépendances, permettant le changement ou même supprimer les dépendances au moment de l'exécution.

D'un point de vue fonctionnel, l'injection de dépendances trouvera automatiquement les dépendances à l'avance et informera la cible d'injection des ressources dépendantes, afin que les ressources puissent être injectées immédiatement lorsque la cible en a besoin.

AngularJS utilise $injetor (service d'injection) pour gérer les requêtes de dépendances et l'instanciation.

En fait, $injetor est responsable de l'instanciation de tous les composants dans AngularJS, y compris les modules d'application, les directives et les contrôleurs.

Au moment de l'exécution, $injetor sera chargé d'instancier n'importe quel module au démarrage et de transmettre toutes les dépendances dont il a besoin.

---

Plusieurs méthodes d'injection de dépendances

1. Instruction d'injection inférentielle

S'il n'y a pas d'instruction explicite, AngularJS supposera que le nom du paramètre est le nom de la dépendance.

Veuillez noter que ce processus ne fonctionne que sur du code non compressé et non obscurci, car AngularJS nécessite la liste de paramètres d'origine non compressée pour l'analyse.

Exemple : (déclarer un module et un contrôleur)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

Quand AngularJS instancie ce module, il recherchera greeter et passera naturellement une référence à cela

2. Déclaration d'injection explicite

AngularJS fournit une méthode explicite pour définir clairement les dépendances qu'une fonction doit utiliser lorsqu'elle est appelée.

Déclarer les dépendances de cette manière peut toujours fonctionner normalement même si le code source est compressé et que les noms des paramètres changent.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

Les noms de paramètres que nous définissons pour notre fonction sont renommés$scope et renomméGreeter, puis nous utilisons

MyController.$inject=['$scope','greeter'];

plus tard pour ajouter explicitement les paramètres dont nous avons besoin Injection de dépendances dans la fonction MyController ;

Donc dans la fonction MyController, renommée

scope, MyController.

scope', 'greeter'] représente greeter

---

3. Instruction d'injection en ligne

La dernière instruction de mode d'injection fournie par AngularJS est l'instruction d'injection en ligne qui peut être utilisée à tout moment.

nous permet de transmettre des paramètres en ligne à partir de la définition de la fonction. De plus, cela évite l'utilisation de variables temporaires lors de la définition.

Cette méthode est en fait un sucre de syntaxe. Elle est exactement la même que la déclaration d'injection mentionnée précédemment via l'attribut $inject

Exemple : (Avec le même que. dans l'exemple ci-dessus, seule la partie js est modifiée)

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

Puisque ce qui doit être traité est une liste de chaînes, les instructions d'injection en ligne peuvent également s'exécuter normalement dans le code compressé.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du processus de liaison de données de $watch, $apply et $digest

Html5 Utilisation de localStorage Explication détaillée

Connaissance inter-domaines AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!