In my application, I want to implement a feature where hitting the same level of the URL will lead to either the baz state or the biz state with a parameter.
angular.module('foo')
.config(function($stateProvider){
$stateProvider
.state('baz', {
url: '/baz',
templateUrl: '/templates/baz.html'
})
.state('biz', {
url: '/:biz',
templateUrl: '/templates/biz.html',
resolve: {
biz: function($stateParams){
// resolve whatever $stateParams.biz should be
}
}
})
})
The issue I'm facing is that ui-router always hits the biz state and sees "baz" as a parameter for that state. Is there an elegant way to make sure anything that hits "/baz" resolves to the baz state?
I am aware that I can use $stateChangeStart and do something like this:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
if (toParams.biz === "baz"){
event.preventDefault();
$state.go('baz');
}
})
However, this approach doesn't feel elegant and seems more like a workaround.