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 stackoverflow.com/questions/11758079/…Gurpreet Singh– Gurpreet Singh2013-09-27 15:04:44 +00:00Commented Sep 27, 2013 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– Per Quested Aronsson2013-09-27 15:24:27 +00:00Commented Sep 27, 2013 at 15:24
Add a comment |
6 Answers
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' } 
3 Comments
daerin
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.
Anusha Nilapu
@thisgeek when i used url: "/verifyMail?username" i got $state.params with empty value
Nate
same as @AnushaNilapu...this was working before, but its no longer working for me
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".
5 Comments
Per Quested Aronsson
Thanks for the clarification. I wasn't sure if that was the way to go.
Mark Evans
@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.
Nate Abele
@mtpultz The docs only say what to do, not what not to do.
Nate Abele
@MarkAlanEvans Updated my answer to address your question.
EHorodyski
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?
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 
Comments
You also need to define the query parameters in the $stateProvider e.g.
state('new-qs', { url: '/new?portfolioId¶m1¶m2', templateUrl: 'new.html', controller: function($scope, $stateParams) { $scope.portfolioId = $stateParams.portfolioId; $scope.param1 = $stateParams.param1; $scope.param2 = $stateParams.param2; } }) as explain by benfoster.io
1 Comment
Anbin Muniandy
Thanks for the answer! This fixed it for me :)
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
Comments
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' }) 