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注入到自己的服务中：

Java代码  

1. angular.module('myModule', [], function($provide) {  
2.   $provide.factory('notify', ['$window', function(win) {  
3.     var msgs = [];  
4.     return function(msg) {  
5.       msgs.push(msg);  
6.       if (msgs.length == 3) {  
7.         win.alert(msgs.join("\n"));  
8.         msgs = [];  
9.       }  
10.     };  
11.   }]);  
12. });  

这是一个通知服务，将消息发送到所有Angular提供的window窗口中显示。

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

$resource服务与ＲＥＳＴ

在我们看怎样用 ngResource 方法创建一个 resource 资源之前,我们先看一下怎样用基本的$http 服务做类似的事情.比如我们的信用卡 resource,我们想能够读取、查询、保存信用卡信息,另外还要能为信用卡还款.这儿是上述需求一个可能的实现:

Java代码  

1. myAppModule.factory('CreditCard', ['$http', function($http) {  
2.     var baseUrl = '/user/123/card';  
3.     return {  
4.        get: function(cardId) {  
5.            return $http.get(baseUrl + '/' + cardId);  
6.        },  
7.        save: function(card) {  
8.            var url = card.id ? baseUrl + '/' + card.id : baseUrl;  
9.            return $http.post(url, card);  
10.        },  
11.        query: function() {  
12.            return $http.get(baseUrl);  
13.        },  
14.        charge: function(card) {  
15.            return $http.post(baseUrl + '/' + card.id, card, {params: {charge:true}});   
16.        }  
17.     };   
18. }]);  

$resource是一个依赖$Http的服务组件，它创建了一个资源对象，让你与RESTful服务器端数据源实现交互的工厂。返回的是资源对象，提供了高层次的行为，而不需要与低级别$ HTTP服务交互操作方法。需要ngResource 安装(<script src="lib/angular/angular-resource.js"></script>)。

对返回的数据进行默认的如下操作：

Java代码  

1. {   
2. 'get': {method:'GET'},  
3. 'save': {method:'POST'},  
4. 'query': {method:'GET', isArray:true},  
5. 'remove': {method:'DELETE'},  
6. 'delete': {method:'DELETE'}   
7. };  

例如：

Java代码  

1. var User = $resource('/user/:userId', {userId:'@id'});  
2. var user = User.get({userId:123}, function() {  
3. user.abc = true;  
4. user.$save();   
5. });  

User定义为资源$resource类型，小写的user是其一个实例，实际是从服务器抓取的根据id为123的一个User Json数组，那么我们下面可以对user这个实例使用上面几个默认操作，比如user.$save();。可以轻松地执行CRUD操作（创建，读取，更 新，删除）。

总结为：

 修改

Java代码  

1. app.factory('itemCategoryService', ['$resource', function($resource) {  
2.   return $resource(  
3.     '../systemConfig/updateCategory/:id', {}, {edit: {method: 'put'}}  
4.   );  
5. }]);  
6. var item = new itemCategoryService;  
7. item.name = $scope.typeData.name;  
8. item.code = $scope.typeData.code;  
9. item.$edit({'id': $scope.typeData.id}, function(data) {  
10.   $location.url('/typeList');  
11. }, function(error) {  
12. });  

删除

Java代码  

1. $resource('../systemConfig/delCategory/:id').remove({'id' : id});  

下面以phone举例返回列表：

Java代码  

1. var phonecatServices = angular.module('phonecatServices', ['ngResource']);  
2.    
3. phonecatServices.factory('Phone', ['$resource',  
4.   function($resource){  
5.     return $resource('phones/:phoneId.json', {}, {  
6.       query: {method:'GET', params:{phoneId:'phones'}, isArray:true}  
7.     });  
8.   }]);  

这是从后台返回phone列表的$resource用法。节省了$http之类转换。

AngularJS提供了一个内置Service $q，它提供了一种承诺/延后（promise/deferred），可以保证我们的调用代码一定能够拿到数据。当然，我们可以猜到，最后去服务器取数据 的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API，当数据获取成功之后，自动将数据提供给调用的代码。

1. 创建一个Service，去服务器读取数据：

Java代码  

1. // $q 是内置服务，所以可以直接使用  
2. ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) {  
3.   return {  
4.     query : function() {  
5.       var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行  
6.       $http({method: 'GET', url: 'scripts/mine.json'}).  
7.       success(function(data, status, headers, config) {  
8.         deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了  
9.       }).  
10.       error(function(data, status, headers, config) {  
11.         deferred.reject(data);   // 声明执行失败，即服务器返回错误  
12.       });  
13.       return deferred.promise;   // 返回承诺，这里并不是最终数据，而是访问最终数据的API  
14.     } // end query  
15.   };  
16. }]);  

 2. 在Controller上（以同步方式）使用这个Service：赋值

Java代码  

1. angular.module('ngApp')  
2.   .controller('MainCtrl', ['$scope', 'UserInfo', function ($scope, UserInfo) { // 引用我们定义的UserInfo服务  
3.     var promise = UserInfo.query(); // 同步调用，获得承诺接口  
4.     promise.then(function(data) {  // 调用承诺API获取数据 .resolve  
5.         $scope.user = data;  
6.     }, function(data) {  // 处理错误 .reject  
7.         $scope.user = {error: '用户不存在！'};  
8.     });  
9.   }]);  

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