I'm creating a tab based page which shows some data. I'm using UI-Router in AngularJs to register states.
My aim is to have one default tab open on page load. Each tab have sub tabs, and I would like to have a default sub tab open when changing tabs.
I was testing with onEnter function and inside I'm using $state.go('mainstate.substate'); but it seems not to work due to loop effect issues (on state.go to substate it calls its parent state and so on, and it turns into a loop).
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'main.html',
onEnter: function($state) {
$state.go('main.street');
}
})
.state('main.street', {
url: '/street',
templateUrl: 'submenu.html',
params: {tabName: 'street'}
})
Here I created a plunker demo.
For now everything works, except that I don't have the default tab open and that's exactly what I need.
Thank you for your suggestions, opinions and ideas.
Update: 1.0 Onwards Supports redirectTo out of the box.
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto
I created an example here.
This solution comes from a nice "Comment" to an an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)
https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373
So firstly let's extend main with redirection setting:
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'main.html',
redirectTo: 'main.street',
})
And add only this few lines into run
app.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params, {location: 'replace'})
}
});
}]);
This way we can adjust any of our states with its default redirection...Check it here
EDIT: Added option from comment by @Alec to preserve the browser history.
In fact even if this solution proposed by Radim did exactly the job, I needed to remember every tab's sub tab (state).
So I found another solution which do the same thing but also remembers every tab substate.
I all have to do was to install ui-router-extras and use the deep state redirect feature:
$stateProvider
.state('main.street', {
url: '/main/street',
templateUrl: 'main.html',
deepStateRedirect: { default: { state: 'main.street.cloud' } },
});
Thank you!
As of version 1.0 of the ui-router it supports a redirectTo property. For example:
.state('A', {
redirectTo: 'A.B'
})