我想在我的应用程序的第一次加载时显示一个微调器,如：
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.
有人可以帮忙吗？澄清这是INITIAL app加载！而不是在后续请求中显示微调器.我用它来做到这一点：https://github.com/chieffancypants/angular-loading-bar但我想展示应用启动的不同之处.
解决方法
如果您想在AngularJS加载时隐藏您的应用程序,则默认您的微调器使用纯HTML显示,并使用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/