詳解Angularjs中的依賴注入

更新時間：2016年03月11日 14:04:40 作者：彼岸花在開

這篇文章主要為大家詳細(xì)介紹了Angularjs中的依賴注入，AngularJS提供了一個至高無上的依賴注入機制，感興趣的小伙伴們可以參考一下

一個對象通常有三種方式可以獲得對其依賴的控制權(quán)：

在內(nèi)部創(chuàng)建依賴；
通過全局變量進行引用；
在需要的地方通過參數(shù)進行傳遞

依賴注入是通過第三種方式實現(xiàn)的。比如：

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

SomeClass能夠在運行時訪問到內(nèi)部的greeter，但它并不關(guān)心如何獲得對greeter的引用。
為了獲得對greeter實例的引用，SomeClass的創(chuàng)建者會負(fù)責(zé)構(gòu)造其依賴關(guān)系并傳遞進去。

基于以上原因，AngularJS使用$injetor（注入器服務(wù)）來管理依賴關(guān)系的查詢和實例化。
事實上，$injetor負(fù)責(zé)實例化AngularJS中所有的組件，包括應(yīng)用的模塊、指令和控制器等。

例如下面這段代碼。這是一個簡單的應(yīng)用，聲明了一個模塊和一個控制器：

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

當(dāng)AngularJS實例化這個模塊時，會查找greeter并自然而然地把對它的引用傳遞進去：

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

而在內(nèi)部，AngularJS的處理過程是下面這樣的：

// 使用注入器加載應(yīng)用
var injector = angular.injector(['ng', 'myApp']);
// 通過注入器加載$controller服務(wù)：var $controller = injector.get('$controller');
var scope = injector.get('$rootScope').$new();
// 加載控制器并傳入一個作用域，同AngularJS在運行時做的一樣
var MyController = $controller('MyController', {$scope: scope})

以上就是本文的全部內(nèi)容，希望本文對大家學(xué)習(xí)Angularjs依賴注入有所幫助。

您可能感興趣的文章:

相關(guān)文章

妙用Angularjs實現(xiàn)表格按指定列排序
使用AngularJS的過濾器，可以很容易的實現(xiàn)在表格中，點擊某一列標(biāo)題進行排序，實現(xiàn)代碼也很簡單，下面小編給大家分享angularjs實現(xiàn)表格按指定列排序的實現(xiàn)代碼，需要的的朋友參考下吧
2017-06-06
Angular2使用Angular CLI快速搭建工程（一）
這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
利用angular.copy取消變量的雙向綁定與解析
眾所周知AngularJS的雙向綁定在表單應(yīng)用中強大又方便，但是偶爾會遇到需要解除對象變量的雙向綁定。Angular提供的angular.copy的方法可以實現(xiàn)解除雙向綁定。所以這篇文章就來給大家詳細(xì)的介紹下angular.copy，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-11-11
在Angular中實現(xiàn)懶加載的示例代碼
在Angular中,懶加載技術(shù)通過路由配置實現(xiàn)模塊的按需加載,可優(yōu)化應(yīng)用啟動時間和減少初始加載代碼量,首先創(chuàng)建獨立模塊,在模板中使用<router-outlet>插入懶加載組件,并可采用預(yù)加載策略如PreloadAllModules,以提前加載所有懶加載模塊,優(yōu)化加載性能
2024-10-10
AngularJS使用指令增強標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強標(biāo)準(zhǔn)表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗證表單等，感興趣的小伙伴們可以參考一下
2016-07-07
angular-ngSanitize模塊-$sanitize服務(wù)詳解
本篇文章主要介紹了angular-ngSanitize模塊-$sanitize服務(wù)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動有兩種方式，一種是綁定初始化，自動加載，另外一種是手動初始化，文中介紹的很詳細(xì)，需要的朋友可以參考下。
2017-03-03
AngularJS實現(xiàn)按鈕提示與點擊變色效果
這篇文章給大家介紹了如何利用AngularJS實現(xiàn)按鈕提示與點擊變色的效果，文中提供了實例代碼，對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價值，下面來一起看看吧。
2016-09-09
詳解AngularJS實現(xiàn)表單驗證
這篇文章主要介紹了AngularJS實現(xiàn)表單驗證，客戶端表單驗證是AngularJS里面最酷的功能之一。AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單，對AngularJS表單驗證感興趣的小伙伴們可以參考一下
2015-12-12
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-07-07