I have a couple of routes in my AngularJS app, I'm using UI-Router for routing between states/pages in my site. An issue I am having is that I have conflicting routes because of a optional parameter I have/need for the homepage of the site.

I have a route for the homepage(example) defined more or less like so:

$stateProvider
    .state('home', {
       url: '/:filter',
       params: {
           filter: { squash: true, value: null }
       }
    });

I can activate this state by going to the homepage(example), as well as by adding the optional parameter example/apples which I use to filter out the contents on the homepage.

My problem now is that I have other routes defined like /login, /about, /help and by going to example/login or example/help, will only activate the home state because of the /:filter optional placeholder parameter I have defined which catches any route following /.

A workaround I have tried is adding a trailing slash to my other route definitions and links url: /login/ and to activate: example/login/ which works but I won't be able to use UI router's ui-sref directive to refer to my states by name instead of URL inside my app and the trailing slash just looks plain ugly.

What I am trying to achieve is to be able to have the optional parameter for the homepage /:filter and still be able to go the my other routes /login, /register, etc.. without having to workaround it by adding trailing slashes.

Has anyone been in this or similar situation before? Any insight or suggestion is very much appreciated. Thanks in advance.

I have a couple of routes in my AngularJS app, I'm using UI-Router for routing between states/pages in my site. An issue I am having is that I have conflicting routes because of a optional parameter I have/need for the homepage of the site.

I have a route for the homepage(example.) defined more or less like so:

$stateProvider
    .state('home', {
       url: '/:filter',
       params: {
           filter: { squash: true, value: null }
       }
    });

I can activate this state by going to the homepage(example.), as well as by adding the optional parameter example./apples which I use to filter out the contents on the homepage.

My problem now is that I have other routes defined like /login, /about, /help and by going to example./login or example./help, will only activate the home state because of the /:filter optional placeholder parameter I have defined which catches any route following /.

A workaround I have tried is adding a trailing slash to my other route definitions and links url: /login/ and to activate: example./login/ which works but I won't be able to use UI router's ui-sref directive to refer to my states by name instead of URL inside my app and the trailing slash just looks plain ugly.

What I am trying to achieve is to be able to have the optional parameter for the homepage /:filter and still be able to go the my other routes /login, /register, etc.. without having to workaround it by adding trailing slashes.

Has anyone been in this or similar situation before? Any insight or suggestion is very much appreciated. Thanks in advance.

• javascript
• angularjs
• state
• angular-ui-router

Share Improve this question Follow edited Sep 4, 2015 at 16:06 Radim Köhler 124k4848 gold badges242242 silver badges340340 bronze badges asked Sep 4, 2015 at 15:59 dsandsan 1,5881212 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There is a working example

The point here is to define home state as the last:

// this url will be registered as first
.state('login', {
      url: "/login",
      templateUrl: 'tpl.html',
})
// this as second
.state('about', {
      url: "/about",
      templateUrl: 'tpl.html',
})
...
// this will be registered as the last
.state('home', {
      url: "/:filter",
      templateUrl: 'tpl.html',
      params: {
        filter: { squash: true, value: null }
      }
})

UI-Router iterates the registered states in that order, and tries to find out first match. This way - all other states (login, about) will have precedence of 'home' state...

Check it here

Best practice would say that this should probably be a query string parameter rather than a route parameter since you are using it to filter out data. To do this with ui-router just define it like so:

$stateProvider
.state('home', {
   url: '/?filter'
});

Now just do

$state.go('home', {filter: 'apples'})