Home » Angularjs » Conditional “otherwise” routing in Angular

Conditional “otherwise” routing in Angular

Posted by: admin January 30, 2018 Leave a comment

Questions:

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:

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

$urlRouterProvider.otherwise('/core/page1');

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!

Answers:

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');
   if(....)
     state.go('core');
   else(...)
     state.go('dashboard');
   ...
   return $location.path();
});

The doc:

$urlRouterProvider.otherwise(rule)

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.