CODEWITHSUNDEEP
angularjsroutesangular-ui-router
Rutwick Gangurde
Rutwick Gangurde

Reputation: 4912

Angular UI Router - Compulsory URL parameter?

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?

Upvotes: 4

Views: 860

Answers (1)

Asik
Asik

Reputation: 7977

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.

Upvotes: 3

Related Questions