iT邦幫忙

DAY 25
0

我在前端 ng 時系列 第 25

瞭解重要的 Providers

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 中一定要存在的一環。

Providers 的特性:

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


上一篇
模組化 - Modularity
下一篇
Service,Factory 傻傻分不清楚
系列文
我在前端 ng 時30

尚未有邦友留言

立即登入留言