隐藏空模板，直到使用Restangular和UI Router加载数据

Hiding empty templates until the data is loaded with Restangular and UI-Router

本文关键字：Restangular UI Router 数据 加载 隐藏      更新时间：2024-03-30

我使用ocLazyLoad进行依赖注入并加载CSS&JS点播。在数据加载之前，我不会更改UI路由器state。我还使用Restangular来连接API。

现在如何从解析状态调用Restangular函数？这是我的路线：

.state('admin.users',{
    url: "/users",
    templateUrl: "user/views/users.html",
    controller:'UserListCtrl',
    resolve: {
        dep: ['$ocLazyLoad',
            function( $ocLazyLoad ){
                return $ocLazyLoad.load(['UserService.js']).then(
                    function(){
                        return $ocLazyLoad.load(['UserListCtrl.js']);
                    }
                );
            }],
       resolvedItems: userlist()
    }
})

我的UserListCtrl是：

app.controller('UserListCtrl',function($scope,UserService){  
    /*
     * Get all users
     */
    userlist = function(){
        UserService.list().then(function(data){
             $scope.users = data;
             $scope.pagination = $scope.users.metadata;
             $scope.maxSize = 5;
        });
    }
})

我的UserService是：

angular.module('app').service('UserService', function($rootScope, Restangular) {
    /*
     * Build collection /user
     */
    var _userService = Restangular.all('user');

    /*
     * Get list of users
     */
    this.list = function() {
        // GET /api/user
        return _userService.getList();
    };
})

您不能在配置组件中从控制器调用函数。为了等待打开页面的后端响应，您应该使用ui路由器的解析功能。

您已经定义了resolvedItems，所以在其中发出userList请求并像这样解决响应。。。

resolve: {
    dep: ['$ocLazyLoad',
        function( $ocLazyLoad ){
            return $ocLazyLoad.load(['UserService.js']).then(
                function(){
                    return $ocLazyLoad.load(['UserListCtrl.js']);
                }
            );
        }],
   resolvedItems: ['UserService', function(UserService){
            return UserService.list().then(function(response){
                return response;
            })
        }]
}

之后，您应该在控制器上注入resolvedItems，然后页面将不会显示，直到您的请求完成。。。

相关文章：