认识angualrJS的resource服务

这段时间公司有个项目要用到angularJS，于是就在网上开始各种找学习资料。

一开始下了一本《angularJS权威教程》，看了10章，实在看不下去了，只能说这本书对于才接触javascript和nodejs的新手来说，写的太难了（例子太少）

然后又在网上找了一些视频教程，我看的是慕课网的，反正新手看视频比看书要容易接受的多。

---

看完视频以后，我就找了一个小项目来练练手了，项目地址

点我

我对$resource的理解也是根据这个项目来的

---

angularJS据说是javascript框架中最难的最难的一个，我才接触JS，其实也不是很了解，但之前也看过一点jquery，只能说angularJS的确比jquery要难很多，下面来介绍下angularJS的编程习惯：

• angularJS的程序分为控制器和服务，通常所有控制器放在一个文件夹下比如controller，服务放在server文件下；
• 当有多个控制器，且有些控制器有共同部分时，可以将共同部分成一个程服务；

本文主要讲解$resource服务：

使用场合：$resource服务可以创建一个资源对象，我们可以用它非常方便的同支持RESTFUL服务端数据源进行交互，当同支持RESTful的数据模型一起工作时，这个服务就派上用场了。

安装：要使用这个服务，当然要先有支持这个服务，这里说安装，不如说是引入，想要使用需要去官网下载相应的库文件，并加入到引导界面文档文件里面，如下（下面是以jade模版举例）：

script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js')
script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js')

使用方法：$resource本身包含有5种常用的方法（实际上是4种方法），4种方法的作用都不一样。

 例如我们创建一个下面的服务，该服务可以在上面的项目地址找到：

angular.module('pollServices', ['ngResource']).
          factory('Poll', function($resource) {
            return $resource('polls/:pollId', {}, {
              query: { method: 'GET', params: { pollId: 'polls' }, isArray: true }
            })
          });

　　上面定定义了一个名为pollServices的服务，该服务的url为polls/：pollId（其中pollId为参数，必要时可以省略这个参数），这个服务重定义了方法query，该方法是向服务器发送get请求，相当于GET /polls/polls  HTTP/1.1（注意，在query方法中，将polls复制给了pollId），该方法返回一个数组。

　　下面来分别接收这几种方法，由于我改写的项目代码不在这台电脑上面，所以路由的处理函数没办法上传，大家可以去看我上传到github上的代码：

　　1.get方法：发送一个get请求，并期望返回一个JSON类型的响应。例如：

function PollItemCtrl($scope, $routeParams, Poll) {
          $scope.poll = Poll.get({pollId: $routeParams.pollId});
          $scope.vote = function() {};
        }

　　这里相当于向服务器发送get的请求：GET  /polls/具体的pollId  HTTP/1.1，我们只需要使用get的方法，$resource会为我们做get请求需要的所有工作。是不是很方便，很好用。当然，后端接收到这个请求之后，需要做出响应，这个就要写/polls/具体的pollId路由的处理函数了，项目中有。

　　2.query方法：该方法被重定义。

function PollListCtrl($scope, Poll) {
          $scope.polls = Poll.query();
        }

　　相当于向服务器发送 GET /polls/polls HTTP/1.1 请求，后端需要有针对 /polls/polls的处理函数。

　　3.save方法：向指定的url发送一个post请求，并用数据体来生成请求体。

 $scope.createPoll = function() {
            var poll = $scope.poll;
            if(poll.question.length > 0) {
              var choiceCount = 0;
              for(var i = 0, ln = poll.choices.length; i < ln; i++) {
                var choice = poll.choices[i];        
                if(choice.text.length > 0) {
                  choiceCount++
                }
              }    
              if(choiceCount > 1) {
                var newPoll = new Poll(poll);       
                newPoll.$save(function(p, resp) {
                  if(!p.error) { 
                    $location.path('polls');
                  } else {
                    alert('Could not create poll');
                  }
                });
              } else {
                alert('You must enter at least two choices');
              }
            } else {
              alert('You must enter a question');
            }
          };

　　这里重新生成了一个实例（var newPoll = new Poll(poll)），所以使用$resource的方式时要加上$符号，如：newPoll.$save(function(p, resp)

　　这里的save方法相当于：POST /polls HTTP/1.1，后端需要有针对 /polls的处理函数。

　　4.delete方法和remove方法，这两个方法的作用完全一样，只是早起浏览器的不兼容造成的，现在应该没有这个问题了，所以用哪个都可以，这两个方法的作用就是向服务器发送一个delete请求。这里就不举例了。