Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Abhängigkeitsinjektion in Angularjs_AngularJS

Detaillierte Erläuterung der Abhängigkeitsinjektion in Angularjs_AngularJS

WBOY
Freigeben: 2016-05-16 15:11:11
Original
1352 Leute haben es durchsucht

Normalerweise gibt es drei Möglichkeiten für ein Objekt, die Kontrolle über seine Abhängigkeiten zu erlangen:

  • Abhängigkeiten intern erstellen
  • Referenziert durch globale Variablen
  • Parameter bei Bedarf übergeben

Abhängigkeitsinjektion wird über den dritten Weg implementiert. Zum Beispiel:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
Nach dem Login kopieren

SomeClass kann zur Laufzeit auf den internen Begrüßer zugreifen, es ist ihr jedoch egal, wie sie einen Verweis auf den Begrüßer erhält.
Um einen Verweis auf die Greeter-Instanz zu erhalten, ist der Ersteller von SomeClass dafür verantwortlich, seine Abhängigkeiten zu erstellen und sie zu übergeben.

Aus den oben genannten Gründen verwendet AngularJS $injetor (Injektordienst), um Abhängigkeitsabfragen und Instanziierung zu verwalten.
Tatsächlich ist $injetor für die Instanziierung aller Komponenten in AngularJS verantwortlich, einschließlich Anwendungsmodulen, Direktiven und Controllern.

Zum Beispiel der folgende Code. Dies ist eine einfache Anwendung, die ein Modul und einen Controller deklariert:

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

Wenn AngularJS dieses Modul instanziiert, sucht es nach einem Begrüßer und übergibt natürlich einen Verweis darauf:

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

Intern ist der Verarbeitungsprozess von AngularJS wie folgt:

// 使用注入器加载应用
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})
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass dieser Artikel für alle hilfreich ist, die AngularJS-Abhängigkeitsinjektion lernen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage