我想在我的应用程序第一次加载时显示一个微调器,例如:https://devart.withgoogle.com/
我试过像这样通过服务模块来做到这一点:
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但我想为应用程序启动显示不同的启动画面。
最佳答案
如果你想在 AngularJS 加载时隐藏你的应用程序,那么默认你的微调器使用纯 HTML 显示,并使用 ng-cloak 隐藏应用程序的 Angular 部分。
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>
这是一个工作示例:
关于javascript - AngularJS 的初始加载微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25363854/