1

I want to have pretty url's for user profiles i.e. url.com/username

But also have reserved url's, such as url.com/categories, url.com/login etc.

I have states setup for the reserved url's e.g.

.state('categories',{
        url:'/categories',     // i.e. url.com/categories
        ...
    });

Then I've tried to provide a regex for the root state that would match for usernames and not match for the above reserved url states e.g.

$stateProvider
    .state('profile',{
        url:'/{username:^((categories|login(?!$)).+|(?!categories|login).+)$}',
        ...
    });

I reviewed the UI-Router URL-Routing documentation (https://github.com/angular-ui/ui-router/wiki/URL-Routing) and attempted to understand urlMatcher, as well as make my regex comply.

Currently it will take me to the reserved states e.g. url.com/categories but if I attempt to visit url.com/someusername it doesn't load the profile and takes me to url.com/

Do I need to change my regex?

Is it possible to do this with a certain regex, or is urlMatcher not capable of handling reserved + dynamic url's / 'does not match' regex?

andrewd
  • 33
  • 3
  • Also tried http://stackoverflow.com/questions/25779203/matching-url-with-array-list-of-words-in-angularjs-ui-router With an array of reserved names and 'var urlMatcher = $urlMatcherFactory.compile("/^((login|signup(?!$)).+|(?!login|signup).+)$/");' – andrewd Sep 12 '14 at 07:32
  • Let's say for the sake of the question there is: `$stateProvider .state('profile',{ url:'/{username:^((categories|login(?!$)).+|(?!categories|login).+)$}', ... }); .state('categories',{ url:'/categories', // i.e. url.com/categories ... }); .state('login',{ url:'/login', // i.e. url.com/categories ... });` Also, the way I have my project structure each state is defined in a config at the top of view files e.g. profile.js. I don't think order / project structure impacts outcome as other simpler regex works. – andrewd Sep 12 '14 at 17:19

1 Answers1

1

The order you set up the states does matter here. When it finds the first match, it will stop looking and just use the first state it matches on.

This is useful when you want to catch some states before others. You can set up all your reserved states before you setup your dynamic ones.

$stateProvider
    .state('categories',{
         url:'/categories',
         ...
     })
    .state('login',{
         url:'/login',
         ...
    })
    .state('profile',{
         url:'/:username',
         ...
     });

Example: http://fiddle.jshell.net/TheSharpieOne/ftxfceg1/1/

TheSharpieOne
  • 25,646
  • 9
  • 66
  • 78