Javascript （角度ui路由器）在解析过程中显示加载动画

这是一个由两部分组成的问题：

我正在使用$stateProvider.state（）中的resolve属性在加载控制器之前获取某些服务器数据。在此过程中，我将如何获取要显示的加载动画

我有子州也使用resolve属性。问题是ui路由器似乎想在加载任何控制器之前完成所有的解决方案。是否有任何方法可以让父控制器在解析后加载，而不必等待所有子解析？对此的答案可能也会解决第一个问题

---

我使用动画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>

---

我希望这有帮助

将内容添加到div中，在属性解析后由ui路由器填充，怎么样

在您的

index.html

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

加载。。。。

---

在解析属性时，用户现在将看到“正在加载…”。一旦一切就绪，内容将由ui router替换为您的应用程序内容。

编辑：这里有一个更简单的解决方案，经过测试，运行良好：

在我的主控制器中，我只需要

$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();
    }
});

这将显示微调器，无论何时我们将要转到有任何问题要解决的状态，并在状态更改完成时隐藏它。您可能希望添加一些检查状态层次结构（即，如果正在加载的父状态解决了某些问题，也会显示微调器），但是这个解决方案对我来说很好

以下是我的老建议，供参考和选择：

在应用程序控制器中，收听

stateChangeStart

事件，并检查是否要切换到要在解析期间显示微调器的状态（请参阅）

当最终调用控制器时，可以隐藏微调器

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

您还可能希望通过侦听

$stateChangeError

事件并在处理错误时隐藏动画来检查解析过程中可能发生的任何错误

---

在控制器之间分配微调器的逻辑时，这不是完全干净的，但这是一种方法。希望能有所帮助。

我开发了以下非常适合我的解决方案

1。添加以下应用程序。运行

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视图”添加到ui视图分区。

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

注意：

A.当角度应用程序第一次加载时，上述代码将在两种情况下显示加载指示器1），2）当视图更改时

B.如果您不想在angular应用程序首次加载时（在加载任何视图之前）显示指示器，请将hidden类添加到加载div，如下所示

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

正在加载。。。

我发现，由于网络访问的原因，在长时间解析中，使用状态图非常有效。

我的想法是在

$stateChangeStart

上的转换状态之间遍历状态图路径，并收集所有涉及的视图。然后，每个

ui视图

指令都会监视相应的视图是否涉及转换，并在其元素上添加

'ui-resolving'

类

---

演示引入了两个根状态：

第一个

和

第二个

，后者有两个子状态

second.sub1

和

second.sub2

。state

second.sub2

还针对属于其祖辈的

footer

视图。

我更喜欢使用指令匹配任何加载活动，主要是为了保持代码库干净

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

angular.module（“$utilityElements”，[]）
.directive（'loader'，['$timeout'，'$rootScope'，函数（$timeout，$rootScope）{
返回{
限制：“A”，
模板：“正在加载…”，
替换：正确，
编译：函数（范围、元素、属性）{
$timeout（函数（）{
$rootScope
.$on（“$stateChangeStart”，
函数（事件、toState、TopParams、fromState、fromParams）{
$（“#oneloader”）.removeClass（“hiddenload”）；
});
$rootScope
.$on（“$stateChangeSuccess”，
函数（事件、toState、TopParams、fromState、fromParams）{
//再加一点延迟
$timeout（函数（）{
$（“#oneloader”）.addClass（“hiddenload”）；
},500)
});
}, 0);
}
}
}]);

如果有人正在使用

ngRoute

，在加载下一个视图之前等待

解析

，并对ui使用

角度引导ui

，您可以执行以下操作：

app.config([
“$routeProvider”，“$locationProvider”，函数（$routeProvider，$locationProvider）{
返回$routeProvider.when（“/seasons/：seasonId”{
templateUrl:“季节管理.html”，
控制器：“控制器”，
决心：{
季节：[
“$route”、“$q”、“$http”、“$modal”、函数（$route、$q、$http、$modal）{
var模态、承诺、季节ID；
modal=$modal.open({
背景：“静态”，
模板：“\n\n\n正在加载…\n\n\n\n\n\n\n”，
键盘：错，
尺寸：“lg”
});
promise=$q.defer（）；
季节ID=$route.current.params.季节ID；
$http.get（“/api/match/seasures/”+seasureid）.success（函数（数据）{
modal.close（）；
承诺.解决（数据）；
}).错误（函数（数据）{
modal.close（）；
承诺、拒绝（数据）；
});
return-pro
<div class="page-loading hidden">Loading...</div>

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);

//edit index.html file 
<ion-nav-view>
    <div ng-show="loadder" class="loddingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// css file

.loddingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// edit app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = true;
            });

        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = false;
            });

});

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

<div ng-show="preloader">Loading...</div>

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

.controller('parentController',['$transitions',function($transitions){...}]);