認識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請求。這裏就不舉例了。