AngularJS教程五—— 服務

AngularJS的service

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

現在我們開始看怎麼建立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()是一個非常不錯的選擇。

注意：factory()定義的服務不能注入到.config()中

service()

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

angular.module('myApp.services')
.service('User', function($http) { // injectables go here
  var self = this; // Save reference
  var backendUrl = "http://localhost:3000";

  this.user = {};

  this.setName = function(newName) {
    self.user['name'] = newName;
  }
  this.setEmail = function(newEmail) {
    self.user['email'] = newEmail;
  },
  save: function() {
    return $http.post(backendUrl + '/users', {
      user: service.user
    });
  }

});

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

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

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

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

注意：什麼時候適合使用service()定義的服務不能注入到.config()中

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) {// config()裡只能注入provider，注意名稱是服務名稱+Provider
  UserProvider.setBackendUrl("http://myApiBackend.com/api");
})

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

angular.module('myApp')
.controller('MainCtrl', function($scope, User) {// controller裡面注入服務，只能呼叫provider的get方法裡定義的內容
  $scope.saveUser = User.save;
});

什麼時候使用provider()方法

• 當我們希望在應用開始前對service進行配置的時候就需要使用到provider()。比如，我們需要配置services在不同的部署環境裡面（開發，演示，生產）使用不同的後端處理的時候就可以使用到了
• 當我們打算髮布開源provider()也是首選建立service的方法，這樣就可以使用配置的方式來配置services而不是將配置資料硬編碼寫到程式碼裡面。

轉載自http://my.oschina.net/tanweijie/blog/295067