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

Question

How do I extract query parameters using ui-router for AngularJS?

In AngularJS' own $location service I did:

($location.search()).uid

to extract the parameter uid from a URL. What is the corresponding code for ui-router?

Does this help http://stackoverflow.com/questions/11758079/how-to-get-the-url-parameters-using-angular-js — Gurpreet Singh, Sep 27 '13 at 15:04
Thanks, but no. That answer relates to Angular's built-in routing. I'm using ui-router (link above) for *nested* routing. — Per Quested Aronsson, Sep 27 '13 at 15:24

score 104 · Answer 1 · edited Mar 14 '16 at 13:25

104

See the query parameters section of the URL routing documentation.

You can also specify parameters as query parameters, following a '?':
url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

For this example, if the url is /contacts?myParam=value then the value of $state.params will be:

{ myParam: 'value' }

edited Mar 14 '16 at 13:25

martin

93,354
25
191
226

answered Nov 23 '13 at 16:58

thisgeek

3,396
4
24
26

11

For query parameters you really have to use `$state.params` as it is written in the answer. Not `$stateParams` which I used and didn't work. – daerin Nov 19 '14 at 13:52
4

@thisgeek when i used url: "/verifyMail?username" i got $state.params with empty value – Anusha Nilapu Jun 18 '15 at 12:29
same as @AnushaNilapu...this was working before, but its no longer working for me – Nate Jun 18 '15 at 17:18

Nate Abele · Accepted Answer · 2015-01-22T14:58:21.513

60

Unless you're binding to the query parameters (see the documentation), you don't access them directly through $state or $stateParams. Use the $location service.

EDIT: Per the docs, if you want to capture query parameters in $stateParams, you can append a ? to your url, and name each query parameter, separated by &, i.e. url: "/foo?bar&baz".

edited Jan 22 '15 at 14:58

answered Sep 27 '13 at 22:07

Nate Abele

5,771
32
27

Thanks for the clarification. I wasn't sure if that was the way to go. – Per Quested Aronsson Sep 29 '13 at 08:05
@Nate Abele how would you bind to the query parameters. In my case, i'm building a view that filters a table of records, so a users types in a value in a text field, this value should be a query parameter so that the filter results can be linked to. – Mark Evans Mar 27 '14 at 16:59
@mtpultz The docs only say what _to_ do, not what _not_ to do. – Nate Abele Jan 22 '15 at 14:58
1

@MarkAlanEvans Updated my answer to address your question. – Nate Abele Jan 22 '15 at 15:00
Now, what if I don't don't have a pattern for my query strings, but still want to harvest that data? Like if you had a URL with the same pattern of an OData call with filters and such? – EHorodyski Mar 06 '15 at 20:25

score 10 · Answer 3 · answered Dec 10 '15 at 01:13

ui-router does not differentiate between different types of parameters in a url like the $location service does.

In your controllers you can use the $stateParams service to get access to all the different types of parameters in your url.

below is an example from the ui-router wiki:

// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'

// Your $stateParams object would be
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

So in your case to find the uid param simply use:

$scope.uid = $stateParams.uid

fredtma · Answer 4 · 2016-01-07T14:07:10.160

9

You also need to define the query parameters in the $stateProvider e.g.

state('new-qs', {
  url: '/new?portfolioId&param1&param2',
  templateUrl: 'new.html',
  controller: function($scope, $stateParams) {
     $scope.portfolioId = $stateParams.portfolioId;
     $scope.param1 = $stateParams.param1;
     $scope.param2 = $stateParams.param2;
  }
})

as explain by benfoster.io

edited Jan 07 '16 at 14:07

answered Jan 07 '16 at 13:22

fredtma

1,007
2
17
27

Thanks for the answer! This fixed it for me :) – anbiniyar Mar 23 '16 at 08:56

score 3 · Answer 5 · answered May 23 '17 at 12:31

3

You can get it from $stateParams , but in that case you have to declare the query variable in the route as well.

declare in route like -

url: '/path?name'

for getting name in controller inject $stateParams , and use like -

$stateParams.name

answered May 23 '17 at 12:31

Partha Roy

1,575
15
16

score 0 · Answer 6 · answered Jan 17 '19 at 16:06

For recent versions of AngularJS and ui-router I think that you can just use $state to access the params:

$state.params[<PARAMETER_NAME>]

where in app.js you defined the state as follows:

.state('app.name', {
    url: '/:some_param_id',
    templateUrl: '/templates/home.html'
})

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

6 Answers6

Linked