current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 37 down vote favorite
8

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?

share|improve this question
    
Does this help stackoverflow.com/questions/11758079/… – 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
up vote 33 down vote accepted

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".

share|improve this answer
    
Thanks for the clarification. I wasn't sure if that was the way to go. – Per Quested Aronsson Sep 29 '13 at 8: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 Alan Evans Mar 27 '14 at 16:59
    
Where does it say in the docs not to use $state.params? – mtpultz Nov 11 '14 at 23:34
    
@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
up vote 64 down vote

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' }
share|improve this answer
6  
+1 This has solved my problem. – Luke101 May 16 '14 at 15:51
7  
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
    
This should be accepted as response. – Jobsamuel Apr 2 '15 at 17:38
3  
@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
up vote 2 down vote

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
share|improve this answer
up vote 0 down vote

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

share|improve this answer
    
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – ElGavilan Jan 7 at 13:53
    
Thanks for the answer! This fixed it for me :) – anbiniyar Mar 23 at 8:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.