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?

Community · Accepted Answer · 2017-05-23 12:22:53Z

2

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

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 12, 2016 at 7:39

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Over a year ago

Wow, I never saw this mentioned in the docs. I think only ref should have a colon in the url.

rrd · Accepted Answer · 2016-09-12 07:32:04Z

0

You have another state with that url:

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

That should make your localhost:80/signup work as you require.

answered Sep 12, 2016 at 7:32

rrd

5,9873 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

ui-router of angularjs optional parameter

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related