Angular ui-router default state for no url states
We have a couple of states for one page, so states don't have a url assigned to them. Is there a way to specify the default state for URL free states? Perhaps it looks like $urlRouterProvider.otherwise('/');
.
I tried to navigate to the state in an Angular statement run
or inside a controller, but that throws an error transition superseded
that is probably due to $state
not being initialized.
Below is a short example. I would like to start right at stateA
.
angular
.module('myModule')
.config([
'$stateProvider',
function($stateProvider) {
$stateProvider
.state('stateA', {
controller: function () {
// Do some magic related to state A
}
})
.state('stateB', {
controller: function () {
// Do some magic related to state B
}
});
}
])
.controller(['$state', '$timeout', function($state, $timeout){
// My global controller
// To set a default state I could do:
// $timout(function () {
// $state.go('stateA');
// }, 0);
// But that doesn't feel right to me.
}]);
Update : Thanks to this answer, I figured out what I need to wrap $state.go
in $timeout
to avoid the error transition superseded
.
source to share
This will trigger a custom rule that goes to its default state without interfering with the URL.
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('stateA');
});`
source to share