optional parameters in ui.router url

Question

I am trying to show the same view regardless of whether the :id parameter is set in the url. I have this but the /cases route doesn't seem to work without the :id.

.state 'messages',
  url: '/cases',
  views:
    '':
      templateUrl: 'views/messages.html',
      controller: 'MessagesCtrl'
    'ticketList@messages':
      templateUrl: 'views/messages/list.html'
    'ticketComments@messages' :
      templateUrl: '/views/messages/comments.html'
    'ticketDetail@messages' :
      templateUrl: '/views/messages/detail.html',
.state 'messages.id',
  url: '/cases/:id',
  views:
    '':
      templateUrl: 'views/messages.html',
      controller: 'MessagesCtrl'
    'ticketList@messages':
      templateUrl: 'views/messages/list.html'
    'ticketComments@messages' :
      templateUrl: '/views/messages/comments.html'
    'ticketDetail@messages' :
      templateUrl: '/views/messages/detail.html',

Answer 1

You are almost there - just child inherits url from its parent. So to make just cases working, we should do:

.state 'messages',
  url: '/cases',
  ....
.state 'messages.id',
  // url: '/cases/:id', // instead of this
  url: '/:id',          // we need this

And we can do even more, e.g. use params :{} to define more precise settings. Check these for example:

• Angular ui router passing data between states without URL
• Angular js - route-ui add default parmeter
• Prepend optional attribute in angular ui-router URL
• Angular UI-Router more Optional Parameters in one State