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

Answer 1

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