AngularJS的初始加载微调器

Initial loading spinner for AngularJS

本文关键字：加载 AngularJS      更新时间：2023-09-26

我想在应用程序的第一次加载时显示一个旋转器，如: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，但我想显示应用程序启动的splash，这是不同的

如果你想在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>

下面是一个工作示例:

http://jsfiddle.net/kLtzm93x/

我不会尝试用拦截器这样做。使用Controller很容易做到这一点:

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>
相关文章：