AngularJS 提供很好的依賴注入機制。以下5個核心組件用來作為依賴注入:
valuefactoryserviceproviderconstantdecorator (打醬油)定義常量用的,這貨定義的值當然就不能被改變,它可以被注入到任何地方,但是不能被裝飾器(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');這貨可以是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');它是一個可注入的構造器,在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';});它是一個可注入的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是他們的老大,上面的幾乎(除了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');});這個比較特殊,它不是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');});上述來源:(AngularJS中的Provider們:Service和Factory等的區別)https://segmentfault.com/a/1190000003096933
注入器負責從我們通過 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總是返回一個靜態值,它們不會通過注入器被調用,因此你不能在其中注入任何東西。
新聞熱點
疑難解答