How to add search parameter to the URL using AngularJS UI Router .go()?

Question

Is there a way to add a search parameter to the URL when using UI-Router's $state.go()? I would like to use a defined state with additional info in the URL instead of defining a new route with the same configuration.

I have a simple view defined:

.when('page-with-form', {
    template: 'views/page-with-form.html',
    url: '/page-with-form'
})

I want the route to work as normal when someone navigates to /page-with-form but when I have something else in the application that would redirect the user to that route with some additional information /page-with-form?error=true something like this perhaps:

$state.go('page-with-form', '?error=true');

The additional information can be passed as second parameter to go as an object hash {}, you can then get it later using $stateParams. See docs github.com/angular-ui/ui-router/wiki/… — Chandermani
– Chandermani, Commented Feb 21, 2014 at 3:22
I know about that, the problem I was trying to solve was not making them state parameters but search elements of the URI. So, instead of page-with-form/error/true I want page-with-form?error=true. Does that make sense. — kalisjoshua
– kalisjoshua, Commented Feb 21, 2014 at 13:24

Radim Köhler · Accepted Answer · 2014-09-02 09:47:39Z

46

+50

This would be solution with ui-router - working example

  $stateProvider
    .state('MyState', {
      url: '/page-with-form?error',
      templateUrl: 'view.page-with-form.html',
      controller: 'MyCtrl',
    })

The navigation to this state could be like this:

  // href
  <a href="#/page-with-form">
  <a href="#/page-with-form?error=true">
  <a href="#/page-with-form?error=false">

  //ui-sref
  <a ui-sref="MyState({error:null})">
  <a ui-sref="MyState({error:true})">
  <a ui-sref="MyState({error:false})">

  // state.go() - in fact very similar to ui-sref directive
  $state.go('MyState', {error: null})
  $state.go('MyState', {error: true})
  $state.go('MyState', {error:false})

The documentation to url params:

Query Parameters (small cite)

You can also specify parameters as query parameters, following a '?':

url: "/contacts?myParam"
// will match to url of "/contacts?myParam=value"

Test it in action here

edited Sep 2, 2014 at 9:47

answered Sep 2, 2014 at 9:31

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

kalisjoshua Over a year ago

Thanks. That seems like exactly what I was looking for. I think that I eventually found it in what I was working on but didn't come back here to post the answer. So thank you for sharing with everyone.

Radim Köhler Over a year ago

Great to see that! Enjoy amazing ui-router lib ;)

Khanh TO · Accepted Answer · 2014-09-02 09:30:20Z

6

As I understand, you're looking for optional query parameters. Fortunately, query parameters are optional by default. Just try: url: '/page-with-form?error'

.when('page-with-form', {
    template: 'views/page-with-form.html',
    url: '/page-with-form?error'
});

And use $state.go('page-with-form', {error:true});

answered Sep 2, 2014 at 9:30

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Collectives™ on Stack Overflow

How to add search parameter to the URL using AngularJS UI Router .go()?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related