Extract URL query parameters with AngularUI

Question

I am using AngularUI library and want to extract the query parameters with from a URL (sample URL: #\books\:categoryID?publisher=xyz (#\books\value?publisher=xyz)).

The $stateParams extracts the data as {categoryId:value?publisher=xyz} but I need to get it as {categoryId:"value", publisher:"xyz"}.

Thanks in advance

Radim Köhler · Accepted Answer · 2014-06-17 05:24:08Z

1

Angular ui-router has direct support for passing parameters as a query string params. There is a doc

URL Parameters - Query Parameters

There is a link to an example, using this state definition:

  $stateProvider
    .state('books', {
      url : '/books/:categoryID?publisher',
      template: '<div> This is a state def: '+
      '<pre>{{toNiceJson(state)}}</pre>' +
      ' These are params sent to this state:' +
      '<pre>{{toNiceJson(params)}}</pre>'+ 
      ' </div>',
      controller: 'urlParamsCtrl', 
    })

And these could be links to get to that state

<a href="#/books/value?publisher=xyz">...
<a href="#/books/other?publisher=unknown%20publisher">...
<a ui-sref="books({categoryID:'value', publisher:'xyz'})">...
<a ui-sref="books({categoryID:'other', publisher:'unknown publisher'})">...

See more here

answered Jun 17, 2014 at 5:24

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pratap Over a year ago

Thanks!!! that worked. I had an old code snippet that was using $location for setting a new url and ui-router was not able to get the query parameters. After seeing your example I realized I should be using the state.go('myState', {state parameters}) and got it working. Thanks

Radim Köhler Over a year ago

Exactly! I would say that ui-router is most likely the best choice you can do ;)

mweathers · Accepted Answer · 2014-06-16 20:45:21Z

0

inject $routeParams and use:

$routeParams.categoryID

to get the value.

answered Jun 16, 2014 at 20:45

mweathers

9518 silver badges11 bronze badges

1 Comment

pratap Over a year ago

that returns {categoryId:value?publisher=xyz} ngRoute doesn't have enough support for query params and maintaining nested views that's when I switched to angular-ui.

Collectives™ on Stack Overflow

Extract URL query parameters with AngularUI

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related