效果扒裙

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  9 随笔 :: 0 文章 :: 0 评论 :: 0 引用

公告

在看AngularJS的一本教材时,某章忽然遇到了$q服务的使用。也许是书的编排问题——将成网状互相依赖的模块用线性顺序书写——总之我是始终搞不明白为何要这么用,用了有什么好处。

没有后端的前端如同空中楼阁。我用node.js和mongodb搞了一个简单的restful服务,前端用AngularJS。经过一遍遍的排错,最终差不多理解了$q的用法和优点。

不使用$q

服务

app.factory('BokanWork', ['$resource', function($resource){
    return $resource('api/bokanwork/:id', {});
}]);

控制器,注入服务BokanWork

app.controller('BokanWorkListCntl', ['$scope', 'BokanWork', function($scope, BokanWork){
    $scope.bokanWorkList = BokanWork.query();    
}]);

显示问题:

路由跳转后才进行数据库访问,数据区域会出现短暂空白。

使用$q

服务

注入服务$q和BokanWork,创建promise服务MultiBokanWorkLoader。

{id: '@_id'}的意思是说,在POST/DELETE等请求时,将对象里的_id字段(mongodb的ObjectId)提取出来,填补在url对应的id里。

顺便一提,Node.JS某本教材上是用PUT请求进行更新……这里我给改成POST咯……

services.factory('BokanWork', ['$resource', function($resource){
    return $resource('api/bokanwork/:id', {id: '@_id'});
}]);

services.factory('MultiBokanWorkLoader', ['BokanWork', '$q', function(BokanWork, $q){
    return function() {
        var delay = $q.defer();
        BokanWork.query(function(works){
            delay.resolve(works);
        }, function(){
            delay.reject('Unable to fetch BokanWork lists');
        });
        return delay.promise;
    };
}]);

路由配置。

resolve配置在promise解决后要注入的参数bokanWorkList

when('/bokanwork', {
    templateUrl: 'tpl/bokanwork_list.html',
    controller: 'BokanWorkListCntl',
    resolve: {
        bokanWorkList: function(MultiBokanWorkLoader) {
            return MultiBokanWorkLoader();
        }
    }
})

控制器,注意参数bokanWorkList,是在路由配置注入的。

controllers.controller('BokanWorkListCntl', ['$scope', 'bokanWorkList', function($scope, bokanWorkList){
    $scope.bokanWorkList = bokanWorkList;
    $scope.remove = function(index){
        $scope.bokanWorkList[index].$remove(function(){
            $scope.bokanWorkList.splice(index, 1);
        });
    };
}]);

优势:在数据获取之后(即promise resolve之后)才进行路由跳转,数据区域不会空白。

posted on 2013-12-13 09:27 效果扒裙 阅读(...) 评论(...) 编辑 收藏