UI Router and query parameters

All we need is an easy explanation of the problem, so here it is.

I built a small search app using Angular, UI Router and Elasticsearch and I’m trying to get UI Router query parameters in the url on the results page.

I’m trying to achieve this

domain.com/search?user_search_terms

with this

.state('search', {
        url: '/search?q',

and I init searchTerms and $stateParams like this in my controller

vm.searchTerms = $stateParams.q || '';

and then in my search function in my controller I have this

 vm.search = function() {
          $state.go('search', {q: vm.searchTerms});
...

Everything works fine, until I try to implement the UI Route query parameters. I can still get search suggestions, transition from state to state but search breaks.

I thought I needed to implement Angular $http get params within a config {}, but then I realized I’m JUST trying to get query parameters using UI Router. It seems I have everything setup right with UI Router to get query parameters but … what am I doing wrong?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

For query parameters, you should use $state.params instead of $stateParams

STATE CONFIG:

stateProvider.state({
    name: 'search',
    url: '/search?q',
    //...
}

CONTROLLER FROM:

function fromCtrl ($state) {
    $state.go('search', {q: vm.searchTerms});
}

OR TEMPLATE/HTML LINK FROM:

<a ui-sref="search({q:'abc'})">my Link</a>

CONTROLLER TO:

function toCtrl ($state) {
    this.searchTerms = $state.params.q;
}

UPDATE: use $transition$ for new versions >= 1.0.0 (PLUNKER DEMO)

The code above is the same for both versions, only you need to change the toCtrl

function toCtrl ($transition$) {
  this.myParam = $transition$.params().q;
}

If your searchTerms is an object, you can use JSON.stringify() and JSON.parse()

Check these posts if you still have any doubts:

How to extract query parameters with ui-router for AngularJS?

AngularJS: Pass an object into a state using ui-router

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply