Ui-router for routes with SPECIFIC values ONLY
I am trying to plot a route for several unique landing pages with the following structure
domain.com/:state/:city/:category
How can I define a route so that the state, city and category can only be one of the predefined values, aka:
state = /ca|ma|ak|az|ar .../i
city = /los-angeles|san-francisco|.../i
category = /painting|plumbing|.../i
These lists are long, so having a big regex doesn't make much sense (or does it?)
Would I use rule () ? $ urlMatcherFactory ? how can i use the function?
any help is appreciated. thanks in advance
source to share
The path here, with a custom type .
As shown in this Q and A , in case we want to create some type that is ready to handle the values true , false , 1 , 0 like boolean
, we can define it like this (there is also a plunker working ):
app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactoryProvider) {
$urlMatcherFactoryProvider.type('boolean',
// our type custom type
{
name : 'boolean',
decode: function(val) { return val == true ? true : val == "true" ? true : false },
encode: function(val) { return val ? 1 : 0; },
equals: function(a, b) { return this.is(a) && a === b; },
is: function(val) { return [true,false,0,1].indexOf(val) >= 0 },
pattern: /bool|true|0|1/
})
}]);
Similarly, we can define our types
$urlMatcherFactoryProvider.type('state' , ...
$urlMatcherFactoryProvider.type('city' , ...
$urlMatcherFactoryProvider.type('category', ...
And later we can use them for any number of state fixes:
...
.state('mystate', {
url: 'xxx/{state:state}/{city:city/{category:category}
...
So that everything can work, because we can define the url for the UrlMatcher like this
'{' name ':' regexp|type '}'
- curly placeholder with regex or type name. If the regex itself contains curly braces, they must be paired or escaped with a backslash.
So, not only regexp but - including our custom type
source to share