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

WBOY
Libérer: 2016-05-16 15:11:11
original
1355 Les gens l'ont consulté

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);
};
Copier après la connexion

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!");
};
});
Copier après la connexion

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>
Copier après la connexion

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})
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal