Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Conditional "otherwise" routing in Angular

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!

like image 393
Jonathan Avatar asked Jun 24 '15 11:06

Jonathan


People also ask

What is urlRouterProvider otherwise?

The otherwise with $urlRouterProvider will redirect all the other routes to the home page. In practical, you will show an 404 template for this one. You can replace template by tempateUrl if you want to separate the HTML template. // app.jsapp.config(function($stateProvider, $urlRouterProvider){

What is default routing in Angular?

Default is "/" (the root path). The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'. By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match.

What is $state in AngularJS?

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.


1 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.

like image 127
Radim Köhler Avatar answered Sep 26 '22 20:09

Radim Köhler