AngularJS UI Router: Route conflict because of optional parameter

Question

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.com) 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.com), as well as by adding the optional parameter example.com/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.com/login or example.com/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.com/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.

Answer 1

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

Answer 2

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'})