UI Router: redirect to child state when navigating to abstract parent state
Found this question when I was looking for the same and then I found this on Angular UI-Router's FAQ page. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
How to: Set up a default/index child state
Make the parent state abstract.
$stateProvider .state('library', { url: '/library', abstract: true, template: '<ui-view></ui-view>' }) .state('library.albums', { url: '/albums', template: '<h1>Albums</h1>' });
Then if you give the child state an empty URL, it will match the exact parent's URL. However, if you want to keep a separate URL for the child, you can do this:
$urlRouterProvider.when('/library', '/library/albums');
Read the given GitHub WIKI URL if you need more information.
Unfortunately you can't use ui-sref
to link to an abstract state.
you could try something like:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
if(toState.name == 'library'){
event.preventDefault();
$state.go('library.albums', toParams);
}
}
Rather than hardcoding each state redirection though, you could do something like:
$stateProvider
.state('library', {
url: '/library',
data: {
redirect: 'library.albums'
}
})
.state('library.albums', {
url: '/albums',
data: {
redirect: false
}
});
$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
if(toState.data && toState.data.redirect){
event.preventDefault();
$state.go(toState.data.redirect, toParams);
}
}