AngularJS的初始加载微调器
AngularJS的初始加载微调器
提问于 2014-08-18 20:56:23
我想在应用程序的第一次加载时显示一个微调器，如：https://devart.withgoogle.com/
我尝试过通过Services模块来实现这一点，如下所示：
angular.module('InitialLoad', [])
.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('myHttpInterceptor');
var spinnerFunction = function (data, headersGetter) {
$('#loading').fadeIn();
return data;
};
$httpProvider.defaults.transformRequest.push(spinnerFunction);
})
.factory('myHttpInterceptor', function ($q, $window) {
return function (promise) {
return promise.then(function (response) {
$('#loading').fadeOut(function(){
$(this).remove();
});
return response;
}, function (response) {
$('#loading').fadeOut(function(){
$(this).remove();
});
return $q.reject(response);
});
};
});但这样做有很多地方不对劲...首先，它不会监听每个请求所监听的第一个加载。它也不会像在DevArt上那样优雅地显示和隐藏加载，而且我使用jQuery而不是Angular Animate来隐藏和显示加载微调器。
有人能帮上忙吗？要澄清的是，这是针对应用程序的初始加载！而不是用于在后续请求上显示微调控件。我使用了这个：https://github.com/chieffancypants/angular-loading-bar，但我想展示一下应用程序启动时的启动画面，这是不同的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-19 22:56:30
如果你想在AngularJS加载时隐藏你的应用程序，那么默认你的微调控件使用普通的超文本标记语言来显示，并使用ng-cloak来隐藏应用程序的角度部分。
https://docs.angularjs.org/api/ng/directive/ngCloak
加载应用程序后，可以使用ng-hide/ng-show关闭微调器。
<div ng-controller="TopController">
<div class="spinner" ng-hide="appLoaded"/>
<div ng-cloak ng-view>
... All Angular view giblets go here...
</div>
</div>下面是一个有效的示例：
http://jsfiddle.net/kLtzm93x/
Stack Overflow用户
发布于 2014-08-19 01:36:30
我不会用拦截器来做这件事。使用控制器可以很容易地做到这一点：
app.controller("TopController", [ "$scope", "SomeService", function($scope, SomeService) {
$scope.showAppLoader = false;
$scope.loadApp = function() {
$scope.showAppLoader = true;
SomeService.doSomething().success( function(result) {
$scope.showAppLoader = false;
});
};
$scope.loadApp();
}]);然后是视图：
<div ng-controller="TopController">
<div class="spinner" ng-show="showAppLoader"></div>
<div ng-hide="showAppLoader" ng-view"></div>
</div>剩下的只是CSS中的一个练习。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25363854
复制相关文章
相似问题
腾讯云开发者
