javascript – AngularJS的初始加载微调器

我想在我的应用程序的第一次加载时显示一个微调器,如： 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/