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: '用户不存在！'};