Блог

У меня есть большое приложение AngularJS, которое разделено на разные функциональные модули. В настоящее время он объединен в один файл JavaScript, и, таким образом, все модули загружаются при начальной загрузке страницы. Я хочу разделить пакет по функциональным областям и загружать части приложения по требованию, когда пользователь достигает определенных точек (просмотров).

Я разобрался с объединением и отложенной загрузкой с помощью RequireJS и ocLazyLoad. Однако осталось решить последнюю проблему. Каждый модуль определяет свои собственные маршруты, поэтому, если я не загружу его при начальной загрузке, маршруты для него будут неопределенными, пока пользователь не достигнет точки, которая запускает загрузку модуля.

Проблема в том, что недостающий маршрут можно получить напрямую, просто вставив его URL, в этом случае маршрутизатор AngularUI выдаст событие $stateNotFound. У меня есть обработчик для него, который проверит запрошенный URL и загрузит соответствующий модуль (вместе с отсутствующими маршрутами). Последняя недостающая часть — после загрузки модуля и маршрутов повторить маршрут. Кто-нибудь знает, как этого добиться? В часто задаваемых вопросах маршрутизатора AngularUI есть раздел, который призван объяснить это, но он не заполнен.

Вероятно, вам следует использовать функцию «when» в $urlRouterProvider вместо того, чтобы перехватывать событие $ stateNotFound:

 $urlRouterProvider.when('/myUrl', ['$match', '$state', function($match, $state) {
    // do something, check for module loaded for example
    // ... and then transitionTo
    $state.transitionTo(state, $match);
}]);
  

Отложите $state.transitionTo до тех пор, пока не захотите (например, после предварительной загрузки модулей).

Но если вы действительно хотите использовать $stateNotFound, вы можете сделать это:

 $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ 
    event.preventDefault()
    // do your module load
    // ... and then transitionTo
    $state.transitionTo(unfoundState.to, unfoundState.toParams, unfoundState.options);
})