current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 26 down vote favorite
2

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');
share|improve this question
    
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 Feb 21 '14 at 3:22
1  
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 Feb 21 '14 at 13:24
up vote 34 down vote accepted
+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:

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

share|improve this answer
    
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. – kalisjoshua Sep 3 '14 at 12:27
    
Great to see that! Enjoy amazing ui-router lib ;) – Radim Köhler Sep 3 '14 at 12:28
up vote 6 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.