How to define defaults for query params in AngularJS UI-Router?

Question

I have a route:

.state('list', {
  url:'/list?query',
  templateUrl: '/views/list.html',
  controller: 'ListCtrl as vm'
})

Is there a way to ensure a default value for the query?

I don't want to do it in the controller, as I use the same controller for other routes, and the controller has certain behaviour if the query is undefined.

What I want is this particular route to default that query.

In the old angular route I have done this sort of thing...

.when('/list', 
  templateUrl: '/views/list.html',
  controller: 'ListCtrl'
  controllerAs:true,
  redirectTo:function(routeParams, path, search) {
    if(!search.query) {
      return "list?query=defaultSearch";   
    }
  }
})

Community · Accepted Answer · 2017-05-23 12:24:11Z

2

We can use a setting called params. There is a working plunker

.state('list', {
  url:'/list?query',
  templateUrl: 'views/list.html',
  controller: 'ListCtrl as vm',
  params: { query: 'DEFAULT VALUE' }, // here the default
})

and these links will work as expected

<a href="#/list?"> - with default 'query' value 
<a href="#/list?query=someParam">
<a ui-sref="list({query:'theParam'})">

Check it in action here

The details are discussed here:

Angular ui router passing data between states without URL

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Mar 10, 2016 at 6:46

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Matt Bryson Over a year ago

awesome, this looks like the perfect answer. To date I've been doing this, which is a bit hacky....

resolve: {updateParams: ['$stateParams', function($stateParams){       if(!$stateParams.query) { $stateParams.query="DEFAULT VALUE"; }     }]}

henrikmerlander · Accepted Answer · 2016-03-09 15:22:54Z

2

You could use the onEnter method to execute logic before your controller loads.

From the ui-router wiki https://github.com/angular-ui/ui-router/wiki:

$stateProvider.state("contacts", {
  template: '<h1>{{title}}</h1>',
  resolve: { title: 'My Contacts' },
  controller: function($scope, title){
    $scope.title = title;
  },
  onEnter: function($location){
    if($location){ ... do something ... }
  }
})

edited Mar 9, 2016 at 15:22

answered Mar 9, 2016 at 12:09

henrikmerlander

1,58413 silver badges20 bronze badges

Comments

Umair Farooq · Accepted Answer · 2016-03-09 11:39:34Z

0

If I am getting you right, you need to go to a state if the user requested state does not match any of the states defined.

If this is the requirement, then try using "otherwise" method of $urlRouterProvider

like,

$urlRouterProvider.otherwise("/default-state");

answered Mar 9, 2016 at 11:39

Umair Farooq

1,7022 gold badges14 silver badges25 bronze badges

1 Comment

Matt Bryson Over a year ago

I tried this, but it appears that query params are optional, so the route matches if it defined or not.

Collectives™ on Stack Overflow

How to define defaults for query params in AngularJS UI-Router?

3 Answers 3

Angular ui router passing data between states without URL

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Related