UI-Router optional url parameter preceeding static part

Question

I'm using the 1.x version of UI-Router. I have a site that is broken up by location, each location has identical layouts and content for its pages:

mysite.com
mysite.com/location1
mysite.com/location1/about
mysite.com/location1/contact

mysite.com/location2
mysite.com/location2/about
mysite.com/location2/contact

I'd like to use the same templates/components for the pages (about, contact) etc, but change the API queries I make based on the parameter. I'm setting up my states with a location URL parameter like so:

.state('about', {
    url: '/:location/about',
    params: {
      location: 'default'
    }
})

What I'd really like to be able to do is instead of providing some sort of default location parameter, I'd like it to be completely optional - as in the following urls would work:

mysite.com/about
mysite.com/contact

And it would provide the default (but not show in the URL). I'd like the other directives like ui-sref to work the same way. I should be able to use:

ui-sref="about({location: something})"

and if something was null or falsy it would show the shortened url. Other directives like ui-sref-active should be smart enough to recognize the defaults as well.

Something like that possible? Thanks in advance!

Think for advanced things with UI router url matching you just want to make some sort of custom URLMatcher function github.com/angular-ui/ui-router/wiki/… — shaunhusain
– shaunhusain, Commented Jul 19, 2016 at 21:51

Community · Accepted Answer · 2017-05-23 12:08:16Z

1

There is a more detailed description:

Angular js - route-ui add default parmeter

The point is - the parameter must be precisely defined, to make it clear for UI-Router to decide: "Is it parameter? or is it next part (e.g. /about)"

A snippet from the above link:

.state('root', {
    url: '/{lang:(?:en|he|cs)}',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: {lang : { squash : true, value: 'en' }}
})

so, values of lang parameter are easy to distinguish for UI-Router from other values. Some more magic is added with squash option. see more here

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 20, 2016 at 5:11

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

jhummel Over a year ago

Perfect! Thanks so much

Collectives™ on Stack Overflow

UI-Router optional url parameter preceeding static part

1 Answer 1

Angular js - route-ui add default parmeter

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related