zoukankan html css js c++ java

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);