我想在我的应用程序的第一次加载时显示一个微调器,如:
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>
这是一个工作示例: