AngularJS 服務 demo

我們知道angular提供的标準服務元件有以下：

$http：用于處理 xmlhttprequest

$location：提供目前url的資訊

$q： 異步請求使用，promise/deferred子產品

$routeprovider：配置路由

$log：日志服務

$http有下面短方法：$http.get() $http.head() $http.post() $http.put() $http.delete() $http.jsonp()

字首$是表示 angular自己提供的服務名稱，如$scope或$provide等，為了防止沖突，最好避免命名自己開發的服務以為$開頭。

如果你檢查一個scope内部，你也可能會發現一些屬性開頭也是以 $開頭。這些特性被認為是私有的，并且不應該通路或修改。

下面這個代碼是将$window注入到自己的服務中：

angular.module('mymodule', [], function($provide) {  

  $provide.factory('notify', ['$window', function(win) {  

    var msgs = [];  

    return function(msg) {  

      msgs.push(msg);  

      if (msgs.length == 3) {  

        win.alert(msgs.join("\n"));  

        msgs = [];  

      }  

    };  

  }]);  

});  

這是一個通知服務，将消息發送到所有angular提供的window視窗中顯示。

在我們看怎樣用 ngresource 方法建立一個 resource 資源之前,我們先看一下怎樣用基本的$http 服務做類似的事情.比如我們的信用卡 resource,我們想能夠讀取、查詢、儲存信用卡資訊,另外還要能為信用卡還款.這兒是上述需求一個可能的實作:

myappmodule.factory('creditcard', ['$http', function($http) {  

    var baseurl = '/user/123/card';  

    return {  

       get: function(cardid) {  

           return $http.get(baseurl + '/' + cardid);  

       },  

       save: function(card) {  

           var url = card.id ? baseurl + '/' + card.id : baseurl;  

           return $http.post(url, card);  

       query: function() {  

           return $http.get(baseurl);  

       charge: function(card) {  

           return $http.post(baseurl + '/' + card.id, card, {params: {charge:true}});   

       }  

    };   

}]);  

$resource是一個依賴$http的服務元件，它建立了一個資源對象，讓你與restful伺服器端資料源實作互動的工廠。傳回的是資源對象，提供了高層次的行為，而不需要與低級别$ http服務互動操作方法。需要ngresource 安裝(<script src="lib/angular/angular-resource.js"></script>)。

對傳回的資料進行預設的如下操作：

{   

'get': {method:'get'},  

'save': {method:'post'},  

'query': {method:'get', isarray:true},  

'remove': {method:'delete'},  

'delete': {method:'delete'}   

};  

例如：

var user = $resource('/user/:userid', {userid:'@id'});  

var user = user.get({userid:123}, function() {  

user.abc = true;  

user.$save();   

user定義為資源$resource類型，小寫的user是其一個執行個體，實際是從伺服器抓取的根據id為123的一個user json數組，那麼我們下面可以對user這個執行個體使用上面幾個預設操作，比如user.$save();。可以輕松地執行crud操作（建立，讀取，更 新，删除）。

總結為：

 修改

app.factory('itemcategoryservice', ['$resource', function($resource) {  

  return $resource(  

    '../systemconfig/updatecategory/:id', {}, {edit: {method: 'put'}}  

  );  

var item = new itemcategoryservice;  

item.name = $scope.typedata.name;  

item.code = $scope.typedata.code;  

item.$edit({'id': $scope.typedata.id}, function(data) {  

  $location.url('/typelist');  

}, function(error) {  

删除

$resource('../systemconfig/delcategory/:id').remove({'id' : id});  

下面以phone舉例傳回清單：

var phonecatservices = angular.module('phonecatservices', ['ngresource']);  

phonecatservices.factory('phone', ['$resource',  

  function($resource){  

    return $resource('phones/:phoneid.json', {}, {  

      query: {method:'get', params:{phoneid:'phones'}, isarray:true}  

    });  

這是從背景傳回phone清單的$resource用法。節省了$http之類轉換。

angularjs提供了一個内置service $q，它提供了一種承諾/延後（promise/deferred），可以保證我們的調用代碼一定能夠拿到資料。當然，我們可以猜到，最後去伺服器取資料 的方式肯定是異步的。隻不過這個服務提供了表面上是同步通路的api，當資料擷取成功之後，自動将資料提供給調用的代碼。

1. 建立一個service，去伺服器讀取資料：

// $q 是内置服務，是以可以直接使用  

ngapp.factory('userinfo', ['$http', '$q', function ($http, $q) {  

  return {  

    query : function() {  

      var deferred = $q.defer(); // 聲明延後執行，表示要去監控後面的執行  

      $http({method: 'get', url: 'scripts/mine.json'}).  

      success(function(data, status, headers, config) {  

        deferred.resolve(data);  // 聲明執行成功，即http請求資料成功，可以傳回資料了  

      }).  

      error(function(data, status, headers, config) {  

        deferred.reject(data);   // 聲明執行失敗，即伺服器傳回錯誤  

      });  

      return deferred.promise;   // 傳回承諾，這裡并不是最終資料，而是通路最終資料的api  

    } // end query  

  };  

 2. 在controller上（以同步方式）使用這個service：指派

angular.module('ngapp')  

  .controller('mainctrl', ['$scope', 'userinfo', function ($scope, userinfo) { // 引用我們定義的userinfo服務  

    var promise = userinfo.query(); // 同步調用，獲得承諾接口  

    promise.then(function(data) {  // 調用承諾api擷取資料 .resolve  

        $scope.user = data;  

    }, function(data) {  // 處理錯誤 .reject  

        $scope.user = {error: '使用者不存在！'};