（Angular-ui-router）在parsing过程中显示加载animation
这是一个两部分问题：
-
我正在使用$ stateProvider.state（）中的resolve属性在加载控制器之前获取某些服务器数据。 在这个过程中，我将如何获得加载animation？
-
我有孩子国家，也利用决心财产。 问题是，ui路由器似乎要加载任何控制器之前最终确定所有解决scheme。 有没有办法让父控制器加载一旦他们的决议已经解决，而不必等待所有的孩子的决议？ 对此的回答也可能解决第一个问题。
编辑：这是一个更简单的解决scheme，testing和工作很好：
在我的主要控制器，我只是有
$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(); } }); 当状态改变完成时，当我们即将进入一个有任何解决和隐藏状态的状态时，这将显示微调。 你可能想要添加一些检查状态层次结构（即也显示微调，如果父状态正在加载解决的东西），但这个解决scheme对我来说工作正常。
这是我的旧build议供参考和作为替代：
-
在您的应用程序控制器中，监听
stateChangeStart事件，并检查是否要切换到您要在parsing期间显示微调器的状态（请参阅https://github.com/angular-ui/ui-router/wiki/快速参考＃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 } }) -
当你的控制器最终被调用时，你可以隐藏微调器
.controller('StateWithResolveCtrl', function($scope) { $scope.hideSpinner(); })
您也可能想要在处理错误时通过侦听$stateChangeError事件并隐藏animation来检查parsing期间可能发生的任何错误。
这是不完全干净的，因为你分配控制器之间的微调的逻辑，但这是一种方式。 希望能帮助到你。
我开发了以下解决scheme，完全适合我。
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; }
注意：
答：上述代码将在两种情况下显示加载指示器： 1）第一次加载angular度应用程序时2）更改视图时。
B.如果你不想在angular度应用第一次加载时（加载视图之前）显示指标，那么将隐藏类添加到下面的加载div
<div class="page-loading hidden">Loading...</div>
我发现使用angular加载栏工作得很好，因为networking访问的长期解决。
一旦属性解决了，将内容添加到将由ui-router填充的div的内容如何？
在你的index.html
<div ui-view class="container"> Loading.... </div>
用户现在将看到“正在加载…”，而属性被parsing。 一切准备就绪后，内容将被你的应用程序内容replace为ui-router。
我使用一个animationgif，只有当$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>
我希望有帮助！
我的想法是在$stateChangeStart上的状态图之间转换状态之间的path，并收集所有涉及的意见。 然后，每个ui-view指令都会ui-view相应的视图是否涉及转换，并在其元素上添加'ui-resolving'类。
plunker演示介绍两个根状态： first和second ，后者有两个子状态second.sub1和second.sub2 。 状态second.sub2也瞄准属于它的祖父母的footer视图。
这是全球加载页面之间的任何状态（任何页面）之间导航，放在app.js
.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; }) } ])
在html中：
<div ng-show="preloader">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); } } }]);
我的想法使用视图，而在路由器中使用resole它工作真棒。 尝试这个。
//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; }); });
如果有人正在使用ngRoute ，请在加载下一个视图之前等待resolve ，并使用angular-bootstrap-ui for ui，可以执行以下操作 ：
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; } ] } }); } ]);
