Home » Angularjs » Conditional “otherwise” routing in Angular

Conditional “otherwise” routing in Angular

Posted by: admin January 30, 2018 Leave a comment


I’m familiar with the "$urlRouterProvider.otherwise('{route here}')" syntax in angular to use as catch all in Angular UI-Router.

What I’m wondering is – is there a way to do conditional “otherwise” routing based on the parent state of when the route is entered incorrectly?

For instance, suppose that I have the following configuration:

.state('core', {configuration here})
.state('core.page1', {configuration here...})
.state('dashboard', {configuration here})
.state('dashboard.page1', {configuration here})


What I’d like to have happen is that anytime a route is entered in that has "/core/{route here}",
if it doesn’t match any of the current states, to route back to ‘/core/page1’,
and anytime a route is entered that has "/dashboard/{route here}" that doesn’t match any of the current states, to route back to "/dashboard/page1".

Anyone have experience doing this, or an idea of how I could accomplish it? Is there anything built in to Angular that allows for this type of behavior?

Thanks in advance!


As shown here

How not to change url when show 404 error page with ui-router

The .otherwise() does not have to be a string (url)… it could be a smart decision maker:

$urlRouterProvider.otherwise(function($injector, $location){
   var state = $injector.get('$state');
   return $location.path();

The doc:


Defines a path that is used when an invalid route is requested.

string – The url path you want to redirect to or a function rule that returns the url path.
The function version is passed two params: $injector and $location services, and must return a url string.