AngularJS 定義服務(wù)的方法

服務(wù)本身是一個(gè)任意的對(duì)象。但是 ng 提供服務(wù)的過(guò)程涉及它的依賴注入機(jī)制。在這里呢，就要先介紹一下叫 provider 的東西。

簡(jiǎn)單來(lái)說(shuō)， provider 是被“注入控制器”使用的一個(gè)對(duì)象，注入機(jī)制通過(guò)調(diào)用一個(gè) provider 的 $get() 方法，把得到的東西作為參數(shù)進(jìn)行相關(guān)調(diào)用（比如把得到的服務(wù)作為一個(gè) Controller的參數(shù)）。

在這里“服務(wù)”的概念就比較不明確，對(duì)使用而言，服務(wù)僅指 $get() 方法返回的東西，但是在整體機(jī)制上，服務(wù)又要指提供了 $get() 方法的整個(gè)對(duì)象。

//這是一個(gè)provider
var pp = function(){
  this.$get = function(){
    return {'haha': '123'};
  }
}

//我在模塊的初始化過(guò)程當(dāng)中, 定義了一個(gè)叫 PP 的服務(wù)
var app = angular.module('Demo', [], function($provide){
  $provide.provider('PP', pp);
});

//PP服務(wù)實(shí)際上就是 pp 這個(gè) provider 的 $get() 方法返回的東西
app.controller('TestCtrl',
  function($scope, PP){
    console.log(PP);
  }
);

上面的代碼是一種定義服務(wù)的方法，當(dāng)然， ng 還有相關(guān)的 shortcut， ng 總有很多 shortcut 。

第一個(gè)是 factory 方法，由 $provide 提供， module 的 factory 是一個(gè)引用，作用一樣。這個(gè)方法直接把一個(gè)函數(shù)當(dāng)成是一個(gè)對(duì)象的 $get() 方法，這樣你就不用顯式地定義一個(gè) provider 了：

var app = angular.module('Demo', [], function($provide){
  $provide.factory('PP', function(){
    return {'hello': '123'};
  });
});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

在 module 中使用：

var app = angular.module('Demo', [], function(){ });
app.factory('PP', function(){return {'abc': '123'}});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

第二個(gè)是 service 方法，也是由 $provide 提供， module 中有對(duì)它的同名引用。 service 和 factory 的區(qū)別在于，前者是要求提供一個(gè)“構(gòu)造方法”，后者是要求提供 $get() 方法。意思就是，前者一定是得到一個(gè) object ，后者可以是一個(gè)數(shù)字或字符串。它們的關(guān)系大概是：

var app = angular.module('Demo', [], function(){ });
app.service = function(name, constructor){
  app.factory(name, function(){
    return (new constructor());
  });
}

這里插一句，js 中 new 的作用，以 new a() 為例，過(guò)程相當(dāng)于：

• 創(chuàng)建一個(gè)空對(duì)象 obj
• 把 obj 綁定到 a 函數(shù)的上下文當(dāng)中（即 a 中的 this 現(xiàn)在指向 obj ）
• 執(zhí)行 a 函數(shù)
• 返回 obj

service 方法的使用就很簡(jiǎn)單了：

var app = angular.module('Demo', [], function(){ });
app.service('PP', function(){
  this.abc = '123';
});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });