使用Angular Resources 封装Rest API

使用$http直接访问接口

$http是angular提供的http调用的基础服务。

基本用法为：

$http(config);

config对象主要包含对诸如请求地址url,请求方法method,查询参数参数param.以及post对应的data等。 对于某些特定的http服务如oauth等需要在http头信息中包含一些特定的数据，这些都可以在config中进行配置，配置详情请参考官方文档。

除此之外$http还提供了一些快捷方法如下所示：

$http.get(url, [config])
$http.head(url, [config])
$http.post(url, data, [config])
$http.put(url, data, [config])
$http.delete(url, [config])
$http.jsonp(url, [config])

示例：

$http({method: 'GET', url: '/someUrl'}).
    success(function(data, status, headers, config) {
      // this callback will be called asynchronously
      // when the response is available
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

除此之外$http还提供了请求拦截机制 Interceptors 可以对api请求进行统一的错误处理等功能。

---

$http结合Factory封装访问接口

factory 是 Angular 中 $provide 注册组件的方法之一（常用的其他方法还包括provider, value, service），这里可以简单理解为一个对象工厂，通过注册一个factory我们可以将后端程序提供的API接口进行统一的封装。

示例：

定义工厂：

angular.module('someApp')
    .factory('FactoryName', ['$http', function(){
        return {
            get: function(){ return $http.get('someUrl'); },
            query: function(){ return $http.get('someUrl'); },
            update: function(){ return $http.put('someUrl'); },
            delete: function(){ return $http.del('someUrl'); },
            otherAction: function(){ return $http.del('someUrl'); }
        }
    }]);

在controllrt中使用：

angular.module('someApp')
    .controller('MainCtrl', function ($scope, FactoryName) {
            FactoryName.query().success().error();
        });

---

使用 $resource 封装Rest接口

如上所示 $http 基本可以满足对API接口调用的所有需求，$http 提供的是一个非常低级的实现，但是具有非常好的灵活性。对于REST类型的API接口还提供了一个独立的可选模块 ngResource。 该模块容许我们定义一个资源描述对象来代表响应的REST资源，通过面向对象的方式来操作响应的REST API接口。

使用 $resource 服务需要导入单独的 angular-reources.js 文件

用法：

$resource(url, [paramDefaults], [actions]);

resource 描述资源对象主要包含:资源URL地址 (url);请求的方法 (method);默认的参数，以及附属的其他方法，返回值是数组或者对象等信息（isArray）。

示例：

var SomeResources = $resource('/api/resourfes/:id', null, {
   action1: {
     method: 'GET',
     url: 'someOtherUrl',
     isArray: true  
   }
});

如上所定义的 SomeResources 对象包含 resource 提供的默认方法 get(), save(), query(), remove(), delete() 等默认方法，以及自定义的 action1 方法。

在调用过程中的映射关系如下：（$resources并未提供默认的put方法）

资源函数	方法	地址	返回结果
SomeResources.get({id: id})	GET	http /api/resources/:id	JSON对象
SomeResources.save({}, res)	POST	http POST api/resources data=data	JSON对象
SomeResources.query()	GET	http /api/resources	JSON数组
SomeResources.remove({id:id})	DELETE	http DELETE /api/resources/:id	JSON对象

示例：

angular.module('someApp')
    .factory('FactoryName', ['$resource', function($resource){
       return $resource('someUrl', null, {
           action1: {
             method: 'GET',
             url: 'someOtherUrl',
             isArray: true  
           }
       });
    }]);

---

原文链接

https://github.com/yunlzheng/workspace/wiki/%E4%BD%BF%E7%94%A8Angular-Resources-%E5%B0%81%E8%A3%85Rest-API