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窗口中显示。

要注意的是所有AngularJS服务都是单例的。这意味着在每一个注入器中都只有一个需要的服务的实例。因为AngularJS极度讨厌全局的东西，这是符合面向对象ＯＯ。

 

$resource服务与ＲＥＳＴ

在我们看怎样用 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: '用户不存在！'};
    });
  }]);

 欢迎讨论和交流AngularJS及前端开发