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?

Answer 1

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

Answer 2

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

Answer 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

Answer 4

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

Answer 5

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

Answer 6

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