码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS篇 $resource使用笔记

时间:2014-12-07 22:55:49      阅读:723      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   for   

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使用笔记

标签:style   blog   http   io   ar   color   使用   sp   for   

原文地址:http://www.cnblogs.com/diydyq/p/4149955.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!