Question

我正在使用带有ui-router的angularjs。

我想使用resolve-object加载一些异步内容，只在加载所有内容时显示最终页面。

这很好但是如何向用户显示“加载”页面？

 $stateProvider
        .state(model.constants.RouteStates.MAIN, {
            url: "/main",
            templateUrl: "modules/main.html",
            controller: "mainctrl",
            controllerAs: "currentCtrl",
            resolve: {
                app: function($q) {
                    var deferred = $q.defer();
                    //do some asyc stuff...

                    //display a "please-wait"-page for the user while requesting asyc-stuff...

                    return deferred.promise;
                }
         }

Answer 1

你可以在你的控制器中做这样的事情。

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.name="your_resolve_state") {
        $scope.showSpinner = true;
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.name="your_resolve_state") {
        $scope.showSpinner = false;
    }
});

或在您的控制器中完成决心后，您可以致电

$scope.showSpinner = false;

开头

Answer 2

我用另一种方式来显示加载页面。

我有一个全局变量，其承诺将在全局初始化完成时触发。

var deferred = $q.defer();
mymodule.globalVars.PromiseInit = deferred.promise;

在我的构造函数中（我使用的是typescript）我可以说

export class Test
{

    initialized: boolean = false;

    constructor()
    {
        mymodule.globalVars.PromiseInit.then(()=>{
            //everything global is loaded so I can start with my controller-stuff
             this.initialized=true;
        })

    }

    isInitialized(){
        return this.initialized;
    }

在我的html页面上，我使用了以下内容：

<div ng-show="!currentCtrl.isInitialized()">
    <div ng-include="'modules/_wait.html'"></div><!--this is my loading-spinner -->
</div>

<div class="container-fluid" ng-show="currentCtrl.isInitialized()">
...

方法isInitialized只检查我在加载所有内容时设置的属性。

加载页面的角度解析

2 个答案: