AngularJS 的初始加载微调器

Question

我想在我的应用程序第一次加载时显示一个微调器，例如：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，但我想为应用程序启动显示一个不同的启动画面。

Answer 1

如果您想在加载 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/

Answer 2

我不会尝试使用拦截器来执行此操作。使用控制器很容易做到这一点：

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 练习。