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

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?

Solution 1:

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' }

Solution 2:

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

Solution 3:

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