angularjs $resource restful api

AngularJS中的RESTful资源

palwo

发表于 2014-12-16 17:31:50

        $http服务提供了一个很是低级的实现，能够用来发送XHR请求，同时它还为你提供了很大的可控性和灵活性。可是，在大多数状况下，咱们须要处理对象，以及封装了特定属性和方法的对象模型，例如一个person对象（带有详细信息），或者一个信用卡对象。

        在这些状况下，若是咱们可以建立一个JS对象，并且它能够理解并表明这种对象模型，是否是会很棒？若是咱们仅仅编辑这个对象的属性，例如保存或者更新，那么这些状态会被持久化到服务端吗？

        $resource就是为这一功能而设计的。AngularJS中的resource(资源)容许咱们用描述性的方式来定义对象模型，它能够描述如下内容：

        1.资源在服务端的URL。

        2.经常使用的请求参数类型。

        3.一些附加的方法（你能够自动得到get、save、query、remove和delete方法），这些方法为对象模型包装了特定的功能和业务逻辑（例如信用卡对象的charge()方法）。

        4.指望得到的响应类型（一个数组或者一个对象）。

        5.协议头。

        使用Angular所提供的$resource对象，你能够根据各类需求查询服务器；除此以外，你还能够把服务端返回的对象当成已经持久好的数据模型，你能够修改它们，而且能够把它们持久化。

        ngResource是一个独立的、可选的模块。为了使用它，须要：

a.在加载的脚本文件中包含angular-resource.js

b.在模块依赖声明中包含ngResource（例如，angular.module('myModule', ['ngResource'])）。

c.在须要的地方使用注入的$resource服务。

        在学习如何使用ngResource方法建立资源以前，咱们先来看看使用基本的$http服务建立相似的东西须要作些什么事情。对于咱们的信用卡资源来讲，除了要可以对它进行"change"（收费）操做以外，咱们还要可以get（获取）、query（查询）以及save（保存）信用卡。

        如下是一种可能的实现：

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}});
}
};
}]);

        除了这种方式以外，还能够简单地建立一个Angular服务，这个服务将会经过如下方式来描述应用所提供的资源：

myAppModule.factory('CreditCard', ['$resource', function($resource) {
 return $resource('/usr/:userId/card/:cardId',
 {userId: 123, cardId: '@id'},
 {charge: {method: 'POST', params: {charge: true}, isArray: false});
}]);

        如今，只要向咱们AngularJS注射器请求一个CreditCard实例，咱们就能够获取一个Angular资源，它默认为咱们提供了一些基础的方法。下表列出了这些方法的内容以及它们的行为，有了这些信息你就知道应该如何配置服务端了。         下面咱们来看一个信用卡的实例，这会让咱们的思路更加清晰。

//假设CreditCard服务被注入到了这里

//咱们能够从服务端获取一个集合，请求的路径为GET:/user/123/card
var cards = CreditCard.query();

//咱们还能够在回调函数中获取并使用单张信用卡
CreditCard.get({cardId: 456}, function(card) {
//每一个实例都是CreditCard类型
 expect(card instanceof CreditCard).toEqual(true);
 card.name ="J.Smith";
//非GET型的方法被映射到了实例上
card.$save();

//咱们自定义的方法也被映射上去了
card.$charge({amount:9.99});
//发起一个POST请求：/user/123/card/456?amount=9.99&charge=true
 //发送请求时传递的数据为：{id:456, number: '1234', name: 'J.Smith'}
});

        这个例子涉及了比较多的内容，对于其中比较重要的内容依次介绍以下：

一.声明

        不管是自已定义$resource，仍是使用正确的参数来调用注入的$resource函数，操做都很是简单。

        $resource函数有一个必需的参数，便可用资源的URL地址，还有两个可选的参数，即默认参数以及你想配置在资源上的额外动做。

        请注意URL是参数化的（用:来标识参数。:userId表示userId将会被替换成对应的文本，:cardId表示将会被cardId实参的值替换掉）。若是没有传递参数，对应的标识符会被替换成空字符串。

        第二个参数负责处理每个请求中都会被发送的默认值。在当前这个例子中，咱们会把常量123传递给userId。参数cardId更加有趣，“cardId是"@id."”表示的是，若是咱们正在使用一个从服务端返回的对象，那么当调用这个对象上的任意方法时（例如调用对象的$save方法），对象上的id属性值就会被赋给cardId参数。

        第三个参数是另外一个函数，咱们但愿在自定义的资源上暴露这个函数。

 

二.自定义方法

        调用$resource时，传递的第三个参数是一个可选的。咱们但愿在自已的资源上暴露的方法。

        在前面的例子中，咱们指定了一个charge方法，能够经过传递一个对象来配置这个方法，对象中的key就是须要暴露的方法名称。配置项中须要指定的内容有：请求的类型（GET、POST等）、须要做为请求的一部分来传递的参数（在这个例子中就是charge=true），以及返回的结果是不是一个数组（在这个例子中不是）。一旦作完这些事情以后，你就能够自由地调用CreditCard.charge()了

        说明：这是一种很是灵活的编码风格，根据上面的代码，对于配置对象{charge: {method: 'POST', params: {charge: true}, isArray: false}，Angular会将其解析成一个方法，而后把这个方法绑定到返回的Restful对象上，上面的配置对象解释以后的方法为：

CreditCard.charge = function(charge, isArray) {
//这里是方法体
}

 

三.别用回调！（除非你真的须要它们）

        第三个须要注意的内容是调用资源时的返回值类型。请再看一下CreditCard.query()调用，咱们直接把信用卡对象赋值给了card变量，而并无在回调函数里面进和赋值。你可能会担忧在对服务器进行异步请求的状况下，这种代码能运行吗？

        你这种担忧是合理的。但事实上，这段代码彻底正确，而且可以运行。这里发生的事情是，AngularJS赋给了card对象一个引用（一个对象或者数组，具体是什么须要根据所指望的返回值类型而定），在将来的某个时间上，当对服务器的请求返回来以后，这个引用才会被真正赋值。在些期间，引用对象一直是空的。

        对于AngularJS应用来讲，最多见的处理流程是：到服务器上获取数据，而后把数据赋值给变量，再把数据显示到模板中。这种快捷方式是很是好用的。在控制器代码中，你惟一要作的事情就是发起对服务端的调用，把返回值赋给正确的做用域变量，而后让模板自动负责渲染它。因为card变量是使用{{}}这种数据绑定技术绑定到视图上的，因此一开始给它一个空值并无问题，等异步响应返回以后再把结果赋给它。这时候Angular的数据绑定机制会当即发现数据发生了变化，而后会自动通知视图进行刷新。从这里能够看到，使用Angular框架时，对异步调用的不少处理方式已经发生了细微的变化。

        若是你有一些须要依赖于返回值才能执行的业务逻辑，那么这种方法就不会奏效。在这种状况下，你就须要使用回调函数，这个回调函数会在调用CreditCard.get()的时候被使用。

 

四.简化服务端操做

        不管你使用返回值的快捷方式，仍是使用回调函数，都有一些关于返回对象的注意事项。返回值不是普通的JS对象，而是一个"resource"型的对象。这就意味着，除了服务端返回的数据以外，它上面还带有一些附加的行为（在这个例子中就是$save()和$charge()）。这样可让你更容易进行服务端调用，例如获取数据、修改数据，以及把修改的内容持久化到服务端（也就是在不少应用中都很常见的CRUD操做）。

 

五.什么时候可使用Angular资源

        只有服务端按照RESTful的方式工做的时候，你才可使用Angular资源。对于信用卡场景，它须要：

        1.一个到/user/123/card的GET请求，它会返回用户123的信用卡列表。

        2.一个到/user/123/card/15的GET请求，它会返回用户123的ID为15的信用卡。

        3.一个到/user/123/card的POST请求，在POST的数据中带有信用卡信息，它将会为用户123的ID建立一张新的信用卡。

        4.一个到/user/123/card/15的POST请求，POST的数据中带有信用卡信息，它将会更新用户123的ID为15的信用卡信息。

        5.一个到/user/123/card/15的DELETE请求，它将会删除用户123的ID为15的信用卡信息。