AngularJS中的RESTful资源

        $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的信用卡信息。

 

文章来源：《用AngularJS开发下一代Web应用》