AngularJS ui-router optional parameters

.state('home', {
    url: '/home/:id/:token',
    templateUrl: 'views/home.html',
    controller: 'homeController',
    params: {
        id: { squash: true, value: null },
        token: { squash: true, value: null }
    }
})

The code below allows for truly optional parameters, if you don't mind having a couple extra states.

I turned my original state into an abstract one by adding the abstract attribute, and then created two children states, one with a url that has params, one with a blank url that references the parent.

It works well on my dev site, and doesn't require a trailing slash, in fact, if you want the trailing slash, you'll have to add a state/when for it.

  .state('myState.search', {
    url:'/search',
    templateUrl: urlRoot + 'components/search/search.view.html',
    controller: 'searchCtrl',
    controllerAs: 'search',
    abstract: true,
  })
  .state('myState.search.withParams', {
    url:'/:type/:field/:operator/:value',
    controller: 'searchCtrl',//copy controller so $stateParams receives the params
    controllerAs: 'search'
  })
  .state('myState.search.noParams', {
    url:''
  });

To have an optional param - declare it as you did - but do not pass it. Here is an example. That all could work with one state (no root) or two (root and detail) as you like.

The definition mentioned in the question, is ready to handle these state calls:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

We do not have to use ? to mark parameter as optional. Just both url must be unique (e.g. /view/:id vs /view - where the second does not have trailing /)