AngularJS如何實現依賴注入

小編給大家分享一下AngularJS如何實現依賴注入，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

簡介：

首先我們需要理解什么是依賴注入？
控制反轉和依賴注入有什么區別？
假定：應用程序A，需要訪問外部資源C。這里使用了容器B(是指用來實現 IOC/DI 功能的一個框架程序)。
A需要訪問C
B獲取C然后返回給A
IOC inversion of control 控制反轉：站在容器角度。B控制A，由B反向的向A注入C。即容器控制應用程序，由容器反向的向應用程序注入應用程序所需要的外部資源。
DI Dependency Injection 依賴注入：站在應用程序的角度。A依賴B獲取C，B將C注入A。即應用程序依賴容器創建并注入它所需要的外部資源。

AngularJS依賴注入

Provider服務（$provide）

AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作為依賴注入：

value
factory
service
provider
constant
decorator (打醬油)

Constant

定義常量用的，這貨定義的值當然就不能被改變，它可以被注入到任何地方，但是不能被裝飾器(decorator)裝飾

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.constant('movieTitle', 'The Matrix');
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 語法糖：
app.constant('movieTitle', 'The Matrix');

Value

這貨可以是string,number甚至function,它和constant的不同之處在于，它可以被修改，不能被注入到config中，但是它可以被decorator裝飾

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 語法糖：
app.value('movieTitle', 'The Matrix');

Service

它是一個可注入的構造器，在AngularJS中它是單例的，用它在Controller中通信或者共享數據都很合適。

var app = angular.module('app' ,[]);
app.config(function ($provide) {
 $provide.service('movie', function () {
  this.title = 'The Matrix';
 });
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 語法糖：
app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

它是一個可注入的function，它和service的區別就是：factory是普通function，而service是一個構造器(constructor)，這樣Angular在調用service時會用new關鍵字，而調用factory時只是調用普通的function，所以factory可以返回任何東西，而service可以不返回(可查閱new關鍵字的作用)。

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.factory('movie', function () {
  return {
   title: 'The Matrix';
  }
 });
}); 
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 語法糖
app.factory('movie', function () {
 return {
  title: 'The Matrix';
 }
});

Provider

provider是他們的老大，上面的幾乎(除了constant)都是provider的封裝，provider必須有一個$get方法，當然也可以說provider是一個可配置的factory。

var app = angular.module('app', []);
app.provider('movie', function () {
 var version;
 return {
  setVersion: function (value) {
   version = value;
  },
  $get: function () {
   return {
     title: 'The Matrix' + ' ' + version
   }
  }
 }
});
app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

Decorator

這個比較特殊，它不是provider,它是用來裝飾其他provider的，而前面也說過，他不能裝飾Constant，因為實際上Constant不是通過provider()方法創建的。

var app = angular.module('app', []);
app.value('movieTitle', 'The Matrix');
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
  return $delegate + ' - starring Keanu Reeves';
 });
});
app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

總結：

所有的供應商都只被實例化一次，也就說他們都是單例的
除了constant，所有的供應商都可以被裝飾器(decorator)裝飾
value就是一個簡單的可注入的值
service是一個可注入的構造器
factory是一個可注入的方法
decorator可以修改或封裝其他的供應商，當然除了constant
provider是一個可配置的factory

上述來源：(AngularJS中的Provider們：Service和Factory等的區別)https://segmentfault.com/a/1190000003096933

注入器（$injector）

注入器負責從我們通過 provide 創建的服務中創建注入的實例。只要你編寫了一個帶有可注入性的參數，你都能看到注入器是如何運行的。每一個 AngularJS 應用都有唯一一個 injector，當應用啟動的時候它被創造出來，你可以通過將 injector 注入到任何可注入函數中來得到它（$injector 知道如何注入它自己！）。
一旦你擁有了 injector，你可以動過調用 get 函數來獲得任何一個已經被定義過的服務的實例。

var movie = $injector.get('movie');
expect(movie.title).toEqual('The Matrix Reloaded');

注入器同樣也負責將服務注入到函數中；例如，你可以魔法般的將服務注入到任何函數中，只要你使用了注入器的 invoke 方法：

var myFunction = function(movie) {
 return movie.title;
};
$injector.invoke(myFunction);

如果注入器只是創建一個服務的實例一次的話，那么它也沒什么了不起的。它的厲害之處在于，他能夠通過服務名稱緩存從一個 provider 中返回的任何東西，當你下一次再使用這個服務時，你將會得到同一個對象。
因此，你可以通過調用 injector.invike 將服務注入到任何函數中也是合情合理的了。包括：

• 控制器定義函數

• 指令定義函數

• 過濾器定義函數

• provider中的$get方法（也就是factory函數）
  

由于constant和value總是返回一個靜態值，它們不會通過注入器被調用，因此你不能在其中注入任何東西。

以上是“AngularJS如何實現依賴注入”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！