Maison >interface Web >js tutoriel >Explication détaillée de l'injection de dépendances dans Angularjs_AngularJS

Explication détaillée de l'injection de dépendances dans Angularjs_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
2016-05-16 15:11:111413parcourir

Il existe généralement trois façons pour un objet de prendre le contrôle de ses dépendances :

  • Créer des dépendances en interne
  • Référencé via des variables globales
  • Transmettez les paramètres si nécessaire

L'injection de dépendances est implémentée via la troisième voie. Par exemple :

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};

SomeClass peut accéder au greeter interne au moment de l'exécution, mais il ne se soucie pas de la façon d'obtenir une référence au greeter.
Afin d'obtenir une référence à l'instance greeter, le créateur de SomeClass est chargé de construire ses dépendances et de les transmettre.

Pour les raisons ci-dessus, AngularJS utilise $injetor (service d'injection) pour gérer les requêtes de dépendance 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.

Par exemple, le code suivant. Il s'agit d'une application simple qui déclare un module et un contrôleur :

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});

Lorsque AngularJS instancie ce module, il recherchera greeter et lui transmettra naturellement une référence :

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

En interne, le processus de traitement d'AngularJS est le suivant :

// 使用注入器加载应用
var injector = angular.injector(['ng', 'myApp']);
// 通过注入器加载$controller服务:var $controller = injector.get('$controller');
var scope = injector.get('$rootScope').$new();
// 加载控制器并传入一个作用域,同AngularJS在运行时做的一样
var MyController = $controller('MyController', {$scope: scope})

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article sera utile à tous ceux qui apprennent l'injection de dépendances Angularjs.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn