AngularJS Resource實(shí)例

ngResource 要舉一個(gè)實(shí)例是比較麻煩的事。因?yàn)樗仨氁粋€(gè)后端來支持，這里如果我用 Python 寫一個(gè)簡單的后端，估計(jì)要讓這個(gè)后端跑起來對很多人來說都是問題。所以，我在幾套公共服務(wù)的 API 中糾結(jié)考察了一番，最后使用 www.rememberthemilk.com 的 API 來做了一個(gè)簡單的，可用的例子。

例子見： http://zouyesheng.com/demo/ng-resource-demo.html (可以直接下載看源碼)

先說一下 API 的情況。這里的請求調(diào)用全是跨域的，所以交互上全部是使用了 JSONP 的形式。 API 的使用有使用簽名認(rèn)證機(jī)制，嗯， js 中直接算 md5 是可行的，我用了一個(gè)現(xiàn)成的庫（但是好像不能處理中文吧）。

這個(gè)例子中的 LoginCtrl 大家就不用太關(guān)心了，參見官方的文檔，走完流程拿到 token 完事。與 ngResource 相關(guān)的是 MainCtrl 中的東西。

其實(shí)從這個(gè)例子中就可以看出，目前 ngResource 的機(jī)制對于服務(wù)端返回的數(shù)據(jù)的格式是嚴(yán)重依賴的，同時(shí)也可以反映出 $http 對一些場景根本無法應(yīng)對的局限。所以，我現(xiàn)在的想法是理解 ngResource 的思想，真正需要的人自己使用 jQuery 重新實(shí)現(xiàn)一遍也許更好。這應(yīng)該也花不了多少時(shí)間， ngResource 的代碼本來不多。

我為什么說 $http 在一些場景中有局限呢。在這個(gè)例子當(dāng)中，所有的請求都需要帶一個(gè)簽名，簽名值是由請求中帶的參數(shù)根據(jù)規(guī)則使用 md5 方法計(jì)算出的值。我找不到一個(gè) hook 可以讓我在請求出去之前修改這個(gè)請求（添加上簽名）。所以在這個(gè)例子當(dāng)中，我的做法是根據(jù) ngResource 的請求最后會使用 $httpBackend 這個(gè)底層服務(wù)，在 module 定義時(shí)我自己復(fù)制官方的相關(guān)代碼，重新定義 $httpBackend 服務(wù)，在需要的地方做我自己的修改：

script.src = sign_url(url);

不錯(cuò)，我就改了這一句，但我不得不復(fù)制了 50 行官方源碼到我的例子中。

另外一個(gè)需要說的是對返回?cái)?shù)據(jù)的處理。因?yàn)?nbsp;ngResource 會使用返回的數(shù)據(jù)直接填充實(shí)例，所以這個(gè)數(shù)據(jù)格式就很重要。

首先，我們可以使用 $http.defaults.transformResponse 來統(tǒng)一處理一下返回的數(shù)據(jù)，但是這并不能解決所有問題，可目前 ngResource 并不提供對每一個(gè) action 的單獨(dú)的后處理回調(diào)函數(shù)項(xiàng)。除非你的服務(wù)端是經(jīng)過專門的適應(yīng)性設(shè)計(jì)的，否則你用 ngResource 不可能爽。例子中，我為了獲取當(dāng)前列表的結(jié)果，我不得不自己去封裝結(jié)果：

var list_list = List.getList(function(){
  var res = list_list[1];
  while(list_list.length > 0){list_list.pop()};
  angular.forEach(res.list, function(v){
    list_list.push(new List({list: v}));
  });
  $scope.list_list = list_list;
  $scope.show_add = true;
  return;
});