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

angular-ui-router, angularjs, javascript

Solution

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

Problem

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

Original source