Как воспользоваться функцией разрешения AngularJS $routeprovider и обеспечить хорошую загрузку пользователя

Я прочитал несколько статей о функции разрешения $routeprovider. Основная идея исходит из этого репозитория, созданного моим любимым разработчиком AngularJS Тоддом Мотто. https://github.com/toddmotto/angularjs-styleguide#controllers

// avoid
function MainCtrl (SomeService) {
  var _this = this;
  // unresolved
  _this.something;
  // resolved asynchronously
  SomeService.doSomething().then(function (response) {
    _this.something = response;
  });
}
angular
  .module('app')
  .controller('MainCtrl', MainCtrl);

// recommended
function config ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    resolve: {
      // resolve here
    }
  });
}
angular
  .module('app')
  .config(config);

Мне очень нравится, как маршрут разрешает все зависимости контроллера перед загрузкой контроллера. Это сохраняет код очень чистым. Однако если процесс разрешения займет значительное время, страница зависнет без визуальной обратной связи, пока все не завершит загрузку.

Прежде чем я переключился на использование разрешения $routeprovider, я помещал все в контроллер, а затем создавал директиву представления асинхронной загрузки. Директива будет отображать индикатор выполнения загрузки, пока все запросы $http загружают данные. Мне интересно, есть ли способ сохранить визуальную обратную связь, а также поместить все шаги разрешения в поставщика маршрутов.

Спасибо!


person zeroliu    schedule 15.09.2014    source источник
comment
Обратите внимание, что это ничем не отличается от статического веб-сайта, где ничего не происходит, пока не придет ответ с сервера. Единственная разница — встроенная обратная связь браузера. Я использую перехватчик HTTP, который делает видимым значок счетчика, если запрос AJAX занимает более 500 миллисекунд. code.angularjs.org/1.2.20/docs /апи/нг/сервис/   -  person JB Nizet    schedule 16.09.2014
comment
Вы также можете использовать события маршрутизатора, чтобы сделать то же самое.   -  person JB Nizet    schedule 16.09.2014
comment
Привет JB Nizet, хотя использование перехватчика HTTP может решить проблему, но я не хочу отслеживать все HTTP-запросы. Ответ Тодда более прост, поскольку он напрямую атакует изменение маршрута. Спасибо большое!   -  person zeroliu    schedule 17.09.2014


Ответы (1)


Когда разрешения начинаются, вы можете подключиться к событиям $routeChangeStart и $routeChangeSuccess. Эти события вы слушаете и можете отображать или скрывать счетчики ajax/загрузку сообщений в зависимости от типа события.

Подробнее здесь!

person Todd Motto    schedule 16.09.2014
comment
@zeroliu :P heyyyyyyyyyy! Надеюсь, это все равно помогло, удачного кодирования. - person Todd Motto; 18.09.2014