AngularJS中serivce，factory，provider的區別

標籤：des   style   http   java   color   使用   os   strong   

一、service引導

剛開始學習Angular的時候，經常被誤解和被初學者問到的組件是 service(), factory(), 和 provide()這幾個方法之間的差別。This is where we‘ll start the twenty-five days of Angular calendar.

二、service

在Angular裡面，services作為單例對象在需要到的時候被建立，只有在應用生命週期結束的時候（關閉瀏覽器）才會被清除。而controllers在不需要的時候就會被銷毀了。

這就是為什麼使用controllers在應用裡面傳遞資料不可靠的原因，特別是使用routing的時候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application（就是說services在應用的controllers、 方法、資料之前起到了很關鍵的作用）

現在我們開始看怎麼建立service。每個方法我們都會看到下面兩個一樣的參數：

• name-我們要定義的service的名字

• function-service方法

他們都建立了相同的底層物件類型。執行個體化後，他們都建立了一個service，這些對象沒有什麼功能上的差別。

1、factory()

Angular裡面建立service最簡單的方式是使用factory()方法。

factory()讓我們通過返回一個包含service方法和資料的對象來定義一個service。在service方法裡面我們可以注入services，比如 $http 和 $q等。

angular.module(‘myApp.services‘).factory(‘User‘, function($http) { // injectables go here  var backendUrl = "http://localhost:3000";  var service = {    // our factory definition    user: {},    setName: function(newName) {       service.user[‘name‘] = newName;     },    setEmail: function(newEmail) {      service.user[‘email‘] = newEmail;    },    save: function() {      return $http.post(backendUrl + ‘/users‘, {        user: service.user      });    }  };  return service;});

• 在應用裡面使用factory()方法

在應用裡面可以很容易地使用factory ，需要到的時候簡單地注入就可以了

angular.module(‘myApp‘).controller(‘MainCtrl‘, function($scope, User) {  $scope.saveUser = User.save;});

• 什麼時候使用factory()方法

在service裡面當我們僅僅需要的是一個方法和資料的集合且不需要處理複雜的邏輯的時候，factory()是一個非常不錯的選擇。

注意：需要使用.config()來配置service的時候不能使用factory()方法

? 2、service()?

service()通過建構函式的方式讓我們建立service，我們可以使用原型模式替代javaScript原始的對象來定義service。

和factory()方法一樣我們也可以在函數的定義裡面看到服務的注入

angular.module(‘myApp.services‘).service(‘User‘, function($http) { // injectables go here  var self = this; // Save reference  this.user = {};  this.backendUrl = "http://localhost:3000";  this.setName = function(newName) {    self.user[‘name‘] = newName;  }  this.setEmail = function(newEmail) {    self.user[‘email‘] = newEmail;  }  this.save = function() {    return $http.post(self.backendUrl + ‘/users‘, {      user: self.user    })  }});

這裡的功能和使用factory()方法的方式一樣，service()方法會持有建構函式建立的對象。

• 在應用裡面使用service()方法

angular.module(‘myApp‘).controller(‘MainCtrl‘, function($scope, User) {  $scope.saveUser = User.save;});

• 什麼時候適合使用service()方法

service()方法很適合使用在功能控制比較多的service裡面

注意：需要使用.config()來配置service的時候不能使用service()方法

?

? 3、provider() ??

provider()是建立service最底層的方式，這也是唯一一個可以使用.config()方法配置建立service的方法

不像上面提到的方法那樣，我們在定義的this.$get()方法裡面進行依賴注入

angular.module(‘myApp.services‘).provider(‘User‘, function() {  this.backendUrl = "http://localhost:3000";  this.setBackendUrl = function(newUrl) {    if (url) this.backendUrl = newUrl;  }  this.$get = function($http) { // injectables go here    var self = this;    var service = {      user: {},      setName: function(newName) {        service.user[‘name‘] = newName;      },      setEmail: function(newEmail) {        service.user[‘email‘] = newEmail;      },      save: function() {        return $http.post(self.backendUrl + ‘/users‘, {          user: service.user        })      }    };    return service;  }});

• 在應用裡面使用provider()方法

為了給service進行配置，我們可以將provider注入到.config()方法裡面

angular.module(‘myApp‘).config(function(UserProvider) {  UserProvider.setBackendUrl("http://myApiBackend.com/api");})

這樣我們就可以和其他方式一樣在應用裡面使用這個service了

angular.module(‘myApp‘).controller(‘MainCtrl‘, function($scope, User) {  $scope.saveUser = User.save;});

• 什麼時候使用provider()方法

1. 當我們希望在應用開始前對service進行配置的時候就需要使用到provider()。比如，我們需要配置services在不同的部署環境裡面（開發，示範，生產）使用不同的後端處理的時候就可以使用到了

2. 當我們打算髮布開源provider()也是首選建立service的方法，這樣就可以使用配置的方式來配置services而不是將配置資料寫入程式碼寫到代碼裡面。

點擊查看完整的代碼：https://gist.github.com/auser/7743235