Angular UI Router - Compulsory URL parameter?

Question

I have a couple of states the use the same controller. Some of these do not require a URL parameter while some do. How do I avoid a state from being accessible if the URL parameter is not provided?

Example:

I have 2 views or states, list and single. They both share the same controller. I have the routes mapped as follows:

state: app.list
url: /list
controller: appCtrl

state: app.single
url: /single/:id
controller: appCtrl

Now, I want single to be accessed only if the id is specified, other wise redirect to some other page. How is that possible using the same controller?

Asik · Accepted Answer · 2014-11-19 12:04:24Z

3

Approach 1

You can use $urlRouterProvider with when() for redirection.

app.config(function($urlRouterProvider){
    // when there is an single route without param, redirect to /list
      $urlRouterProvider.when('/single/:id', ['$match', '$state', function($match, $state) {
          if($match.id === ""){
             $state.transitionTo("app.list");
          }
       }
      ]);
});

Working demo: http://plnkr.co/edit/sEoUGGCEge0XbKp3nQnc?p=preview

Approach 2

You can check the param in controller side and redirect it to specific page

myApp.controller('MainCtrl', function($state, $stateParams) {
  if($state.current.name == 'app.single' && $stateParams.id === ""){
    $state.transitionTo("app.list");
  }
});

Working demo: http://plnkr.co/edit/QNF1RHy4Prde4CRhNLFa?p=preview

Note: In the above demos, redirection works when your current state should not be app.single. Means, State will not change if you are in app.single state and trying without param. So go to main page, then click the link without param of single state. it will redirect to list state.

edited Nov 19, 2014 at 12:04

answered Nov 19, 2014 at 8:03

Asik

7,9674 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rutwick Gangurde Over a year ago

I tried this, but it seems the function is never called!

Collectives™ on Stack Overflow

Angular UI Router - Compulsory URL parameter?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related