AngularJS中service，factory，provider的區別

1、service引導

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

2、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，這些對象沒有什麼功能上的差異。

一、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()方法

‍二、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()方法

‍

‍三、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而不是將配置數據硬編碼寫到代碼裏面。

還能夠看看這篇翻譯：http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make

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