首頁 > web前端 > js教程 > 詳解Angularjs中的依賴注入_AngularJS

詳解Angularjs中的依賴注入_AngularJS

WBOY
發布: 2016-05-16 15:11:11
原創
1362 人瀏覽過

一個物件通常有三種方式可以獲得對其依賴的控制權:

  • 在內部建立依賴關係;
  • 透過全域變數進行引用;
  • 在需要的地方透過參數傳遞

依賴注入是透過第三種方式實現的。如:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
登入後複製

SomeClass能夠在運作時存取到內部的greeter,但它並不關心如何獲得對greeter的引用。
為了獲得對greeter實例的引用,SomeClass的創建者會負責建構其依賴關係並傳遞進去。

基於上述原因,AngularJS使用$injetor(注入器服務)來管理依賴關係的查詢和實例化。
事實上,$injetor負責實例化AngularJS中所有的元件,包括應用的模組、指令和控制器等。

例如下面這段程式碼。這是一個簡單的應用,聲明了一個模組和一個控制器:

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

當AngularJS實例化這個模組時,會尋找greeter並自然而然地把對它的引用傳遞進去:

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>
登入後複製

而在內部,AngularJS的處理過程是下面這樣的:

// 使用注入器加载应用
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})
登入後複製

以上就是本文的全部內容,希望本文對大家學習Angularjs依賴注入有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板