javascript - 在routeprovider中使用resolve时AngularJS加载图标

Question

我正在尝试做类似this的事情问题，但这些答案似乎都不起作用。他们都使用 Controller 来显示加载图标，如果他们读到 documentation ，他们会知道在请求被解析/拒绝之前 Controller 不会初始化，因此来自 Controller 的任何加载旋转器都不会工作。

是否可以在this中显示加载旋转器jsfiddle 这样我们就可以知道请求正在进行中，而不是仅仅将页面留空直到它得到解决？

我想做这样的事情:

    $routeProvider.when('/', {

        controller: 'AppCtrl',
        resolve: {
            app: function ($q, $timeout) { 
                //show a spinner
                //do something
                //no more spinner
        }
     });

Answer 1

也许，这段代码会有用。

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {

    $routeProvider.when('/', {

      template: '<h1 class="panel">This is my app</h1>',
      controller: 'AppCtrl',

      resolve: {
        app: function($q, $timeout, $rootScope) {
          $rootScope.rootState.routeLoading = true;
          var defer = $q.defer();

          $timeout(function() {
            $rootScope.rootState.routeLoading = false;
            defer.resolve();
          }, 2000);
          return defer.promise;
        }
      }
    });
  })
  .controller('AppCtrl', function() {
    console.log('This is the app controller');
  })
  .run(function($rootScope) {
    $rootScope.rootState = {
      routeLoading: false
    }
  });
  
  angular.bootstrap(document.body, ['myApp']);

body {
  position: relative;
}

.custom-preloader {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1001;
  background-color: #999;
  display: none;
}

.custom-preloader h2 {
  text-align: center;
  margin: auto;
}

.custom-preloader_visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<div class="custom-preloader" ng-class="{'custom-preloader_visible': rootState.routeLoading }">
  <h2>
    Loading...
  </h2>
</div>
<ng-view></ng-view>