AngularJS Значок загрузки при использовании разрешения в routeprovider

Question

Я пытаюсь сделать что-то похожее на этот вопрос, но ни один из этих ответов, похоже, не работает. Все они используют контроллер, чтобы показать значок загрузки, который, если они прочитают документацию , они будут знать, что контроллер не инициализируется до тех пор, пока запрос не будет разрешен / отклонен, поэтому любой счетчик загрузки, поступающий от контроллера, не будет не будет работать.

Можно ли отобразить загрузочный счетчик в 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>