AngularJS UI-Router optional url segment in the middle

Question

I want to have an optional url segment for the following example:

url: "/post/:category/:subcategory/:title/{id:int}",

In the above example subcategory is optional. For example it will accept:

url: "/post/sports/football/some-title/10",

and it will also accept:

url: "/post/sports/some-title/15",

which do not have subcategory. I can do that using to separate states but is there any rule for that? Please note only subcategory segment is optional. Others are mandatory.

Answer 1

.state('post', { url: '/post/:category/:subcategory/:title/:{id:int}', templateUrl: 'views/post.html', controller: 'postCtrl', params: { subcategory: { squash: true, value: null }, } })

For more info read the doc

Answer 2

Solution is in detail described here

Angular js - route-ui add default parmeter

and here is how we can define such parameter:

.state('state', {
    url: '/:category/{subcategory:(?:football|tennis|hokey)}/:title/:id',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: {subcategory : { squash : true, value: 'football' }}
})