首页 > 代码库 > AngularJS篇 $resource使用笔记
AngularJS篇 $resource使用笔记
AngularJS文档中：
$http是针对与server通信的XmlHttpRequest的封装，获取数据可以在controller中通过promise的then函数来赋值，$http新添加了success和error函数，如：
// Service: $http way.$http.get("serverData/caseList.json").success(function(data){ console.log("$http: ", arguments); $scope.testList = data;});
通过$resource以一种新的方式来赋值数据，封装了$http返回的promise为属性$promise，数据对象或者数组则就是本身Resource：
// 封装Resource
var modService = angular.module("reportService", ["ngResource"]);modService.factory("SvcFileRead", ["$resource", function($resource){ // 返回get|save|query|remove|delete(本身就有的)和新的方法：getCaseList|getTestConf.
return $resource("serverData/:file.json", {}, {
// 封装其他的方法 getCaseList: { method: "GET", params: { file: "caseList" }, isArray: true }, getTestConf: { method: "GET", params: { file: "testConf" } } });}]);
// 使用Resource
modController.controller("reportList", ["SvcFileRead", function(SvcFileRead){
// controller中赋值数据，其实返回一个Resource，封装了返回的数据；
$scope.caseList = SvcFileRead.getCaseList();
}]);
因为上面返回的Resource，真正数据是在promise被resolve后赋值的，因此等待resolve之后才能处理，所以通过$promise属性来等待：($q.all等待一个promise数组)
$q.all([$scope.caseList.$promise, $scope.testConf.$promise]).then(function(defDataList){
// 业务逻辑... var list = getTestList(defDataList);
// 赋值到$scope上 $scope.testList = list;
});
当然也可以以新的Resource来封装业务逻辑，最后返回：
modService.factory("SvcTestUtil", ["$q", "SvcFileRead", function($q, SvcFileRead){ return { getCaseList: function(){ var defCaseList = SvcFileRead.getCaseList(); var defTestCase = SvcFileRead.getTestConf(); var def = $q.all([defCaseList.$promise, defTestCase.$promise]).then(function(defDataList) {var list = getTestList(defDataList); list.forEach(function(v){ // 待resolve后，填充数据；
ret.push(v); });
// 没有抛异常，代表resolve，否则reject return list; }); // 返回针对资源的封装：$promise var ret = []; ret.$promise = def; return ret; } };}]);
// controller中使用同上：
modController.controller("reportList", ["SvcTestUtil", function(SvcTestUtil){
$scope.caseList = SvcTestUtil.getCaseList();
}]);
如果在promise的then函数中仍然还有延迟性的处理逻辑，有相应的两种方式：
// Way1.setTimeout(function(){ $scope.testList = list; $scope.$digest();}, 2000);// Way2. true代表invokeApply$timeout(function(){ $scope.testList = list;}, 2000, true);
相关链接：
1. $resource https://docs.angularjs.org/api/ngResource/service/$resource
2. $http https://docs.angularjs.org/api/ng/service/$http
3. $q https://docs.angularjs.org/api/ng/service/$http
4. $timeout https://docs.angularjs.org/api/ng/service/$timeout
AngularJS篇 $resource使用笔记