AngularJS 提供的 Providers 有,Factory、Service、Value、Constant 跟 Provider。
就算學習 AngularJS 已經一陣子了,還是覺得 Providers 是個摸不清楚頭緒的東西。
尤其是 Service 跟 Factory 覺得根本是一樣的東西套上不同的名字吧。
Provider 更是沒有用過...
想說藉由寫鐵人賽文章來好好研究 Providers ~
AngularJS 是由很多 objects 所組成的,這些 objects 都是需要被 $injector service 建構跟連接在一起。
Providers 所扮演的角色就是在教導 $injector 如何建構這些 object 。
記得假如我們 DI 一個不存在的 service,AngularJS 會因找不到 myService 丟出錯誤訊息:
Error:unpr Unknown Provider
Unknown provider: myServiceProvider <- myService
錯誤訊息不是跟你說,某某 service 不存在。
而是提醒你說某某 service 的 providers 找不到。
可見 providers 是建構 object 中一定要存在的一環。
1. 都是 singletons
整個 APP 只會被初始化一次。
2. 可以是 object 或 primitive type
範例:http://plnkr.co/edit/GILobFvpIM7hyj2iOOZS
// primitive
angular.module('myExample').factory('myPrimitive', function () {
return '我要變成海賊王!';
})
// object
angular.module('myExample').factory('myObject', function () {
return {
name: '我要成為海賊王!'
}
})
3. 底層是 Provider
Providers 雖然有很多種,可是最終底層都會呼叫 Provider,
其他 (Factory, Service, Value, Constant) 都只是呼叫 Provider 的 syntax suger。
Value 跟 Constant 都是拿來存 static value 的地方。
這兩個是很像的東西,除了 Value 不可以被 injector 進 config phase 之外。
範例:http://plnkr.co/edit/YHLHLN2kVkglrHZvPvkE
var app = angular.module('myExample', [])
.controller('myCtrl', function($scope, luffy, sozo) {
$scope.luffy = luffy;
$scope.sozo = sozo;
// 可更新 value 跟 constant 裡頭的值
luffy.word = '我還是要成為海賊王!';
});
app.config(function (sozo) {
// 只有 constant 可以 injector 進 config
console.log('sozo', sozo);
});
// value
app.value('luffy', {
name: '魯夫',
id: 1,
word: '我要變成海賊王!'
})
// constant
app.constant('sozo', {
name: '索隆',
id: 2,
word: '我要變成大劍豪!'
})
再來是最讓人覺得搞混的 Factory、Service、Provider。明天待續!
參考資料:
AngularJS document - Providers