AngularJS Ui Router regex matching wildcard in url

Question

I wonder if this is possible - I need to match the following URLs with one pattern:

/one/app/home
/one/two/app/home
/one/two/three/app/home
...

I understand that AngularJS routing doesn't support regex, but Angular UI Router does.

main.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/fail");
    $stateProvider
    .state("home", {
        url: "{.+}/app/home",
        templateUrl: "assets/tpl/home.html",
        controller: "homeController"
    })
    $locationProvider.html5Mode(true);
});

This doesn't work though (goes to /fail with all the examples). Is what I want to do possible at all?

Use .+ instead of {.+}, and add a $ at the end to ensure the app/home part is the last one: .+/app/home$ — Robin
– Robin, Commented Apr 17, 2014 at 11:34
@Robin I think there are certain limitations of URL parsing here not allowing this to work. — Caballero
– Caballero, Commented Apr 17, 2014 at 11:38
Sorry, I wasn't familiar with Angular UI regex syntax... As a random thought I'd say it doesn't work either because the "name" part is mandatory ({id:...}), or because the regex can't include a / (ie it's only applied between to slashes). But I'm not familiar with the specifics, so this is just a guess in the wild. Good luck! — Robin
– Robin, Commented Apr 17, 2014 at 11:45

timetowonder · Accepted Answer · 2014-08-14 13:56:11Z

6

You should use it like this:

state("home", {
    url: "/{beginPath:.+}{endPath:/app/home}",
    templateUrl: "assets/tpl/home.html",
    controller: "homeController"
});

Then you you will have access to $stateParams.beginPath (which is equal to evertyhing before /app/home/) and to $stateParams.endPath which will be equal to /app/home/

If /one/ is necessary in the beggining then use something like this:

url: "/{beginPath:one/.+}{endPath:/app/home}"

answered Aug 14, 2014 at 13:56

timetowonder

5,5317 gold badges38 silver badges54 bronze badges

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

4 Comments

powercoder23 Over a year ago

Can i use it with angular native router?

timetowonder Over a year ago

Although you cannot use advanced regex syntax, you can solve this particular task using angular native ngRoute. To match any url that ends with /app/home use this: <br/> $routeProvider.when('/:beginPath*\/app/home', { ... }' To match any url that ends with /app/home and starts with '/one' use this: <br/>$routeProvider.when('/one/:beginPath*\/app/home', { ... }'

timetowonder Over a year ago

stupid comment formatting. Anyway, you'll get access to everything before '/app/home' in $routeParams in your controller.

user5296864 Over a year ago

I have tried same however this does not work when you reload or refresh your page or directly place url in address bar. Do we have any option to solve this problem

Collectives™ on Stack Overflow

AngularJS Ui Router regex matching wildcard in url

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related