ui-router of angularjs optional parameter

Question

.state('signup', {
        url:'/app/signup/:ref',
        templateUrl: 'partials/signup.html',
      })

Above is my route config using ui-route. It works when I visit localhost:80/signup/something

but I also want it to work when I visit just localhost:80/signup, how do I do that?

Answer 1

Your configuration is right, the parameters could be optional.

You can also use squash:

.state('signup', {
    url: '/app/signup/:ref',
    templateUrl: 'partials/signup.html',
    params: {
        ref: {squash: true, value: null}
    }
})

squash configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value

see more here: Angular ui.router, Creating an Optional First Path Param