(Angular-ui-router)在解析过程中显示加载动画

Question

这是一个两部分问题:

1. 我在$ stateProvider.state()中使用resolve属性来在加载控制器之前获取某些服务器数据.如何在此过程中显示加载动画？

2. 我有子状态也使用resolve属性.问题是ui-router似乎想要在加载任何控制器之前完成所有解析.有没有什么办法可以让他们在解析后解析父控制器,而不必等待所有的子解析？对此的答案也可能解决第一个问题.

Answer 1

编辑:这是一个更简单的解决方案,测试和工作很好:

在我的主控制器中,我只是

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

当状态更改完成时,无论何时我们要进入有任何需要解决的状态并隐藏它,都会显示微调器.您可能想要添加一些检查状态层次结构(即,如果正在加载的父状态解析某些内容,也会显示微调器),但此解决方案对我来说很好.

这是我的旧建议供参考,作为替代方案:

1. 在应用程序控制器中,监听stateChangeStart事件并检查是否要在解析期间切换到要显示微调器的状态(请参阅https://github.com/angular-ui/ui-router/wiki/Quick - 参考#wiki-events-1)

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
       if (toState.name == 'state.with.resolve') {
           $scope.showSpinner();  //this is a function you created to show the loading animation
       }
   })
   

2. 当你最终调用控制器时,你可以隐藏微调器

   .controller('StateWithResolveCtrl', function($scope) {
       $scope.hideSpinner();
   })
   

您还可能希望通过侦听$stateChangeError事件并在处理错误时隐藏动画来检查解析期间可能发生的任何错误.

当你在控制器之间分配微调器的逻辑时,这并不完全干净,但这是一种方式.希望能帮助到你.

Answer 2

我开发了以下解决方案,它对我来说非常有效.

1.添加以下app.run

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2.将加载指示器放在ui视图的正上方.将id ="ui-view"添加到ui-view div.

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3.将以下内容添加到您的CSS中

.hidden {
  display: none !important;
  visibility: hidden !important;
}

注意:

A.以上代码将在两种情况下显示加载指示器1)当第一次加载角应用时2)当视图改变时.

B.如果您不希望在角度应用第一次加载时(在加载任何视图之前)显示指标,则将隐藏的类添加到加载div中,如下所示

<div class="page-loading hidden">Loading...</div>

Answer 3

我发现由于网络访问,使用角度加载条非常适合长时间的解析.

Answer 4

如果属性已解决,如何将内容添加到将由ui-router填充的div中？

在你的 index.html

<div ui-view class="container">
    Loading....
</div>

现在,用户将在解析属性时看到"正在加载...".一切准备就绪后,内容将由ui-router替换为您的应用内容.

Answer 5

我使用的动画gif只在$http有待处理的请求时显示.

在我的基页模板中,我有一个导航栏和导航栏控制器.控制器的相关部分如下所示:

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

我的html中的相应代码是:

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

我希望有所帮助!