How to retry route request on $stateNotFound event in AngularUI Router

Question

I have a large AngularJS application which is split into different functional modules. It is currently bundled into single JavaScript file and thus all the modules are loaded on initial page load. I want to split the bundle by functional areas and load parts of the application on demand as the user reaches some specific points (views).

I have the bundling and lazy loading sorted out with help of RequireJS and ocLazyLoad. There is last thing left to address though. Each module defines its own routes so if I won't load it at the initial load, the routes for it will be undefined until the user reaches the point that triggers loading of the module.

The issue is that the missing route can be reached directly by simply pasting its URL, in that case AngularUI Router will emit $stateNotFound event. I have a handler for it that will check the requested URL and load appropriate module (along with missing routes). The last missing piece is to, after the module and routes have been loaded, retry the route. Does anyone know how to achieve that ? There is a section in AngularUI Router's FAQ that is meant to explain that but it's not filled in.

score 1 · Accepted Answer · answered Jun 21 '14 at 08:38

You should probably use the "when" function of the $urlRouterProvider instead of catching a $stateNotFound event:

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

Delay the $state.transitionTo until you want (after preloading the modules for example).

But if you really want to use the $stateNotFound you can do this:

$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);
})

How to retry route request on $stateNotFound event in AngularUI Router

1 Answers1