angular.js url routing and html5Mode(true)

I want to setup accessible and bookmarkable URLs that are routed by angular.js.

The application is only a part of the whole website accessible via http://example.com/application/

Whatever comes after /application/ is a route param.

Now I want to have a URL that can be accessed either via

http://example.com/application/#/filter1/filter2/filter3/
                               ^ hashbang here

or

http://example.com/application/filter1/filter2/filter3/
                              ^ no hashbang here

and I would expect angular.js to pass my route params to my application, but instead I get routed through .otherwise.

Basic Route Setup

$locationProvider.html5Mode(true); // this requires base-tag to be set in dom, 
                                   // but doesnt work for me

$routeProvider
    .when('/application/:filter1/:filter2/:filter3', {
        action: 'filter',
        reloadOnSearch: false
    })
    .otherwise({
        redirectTo: '/application/' + filter1 + '/' + filter2 + '/' + filter3
    });

In the HTML of that application I put <base href="/application/" />, which seems to work fine, but reloading the page or re-visiting it after it went through the .otherwise-route doesn't work and the server says "Page not found".

When I disable HTML5 mode and remove the base-tag, it doesnt work either and I get routed through .otherwise

This happens because your server knows application/ (and return maybe application.html) but not application/filter1/filter2/filter3/ (because filter3.html does not exists).

You can:

• Decide to use only the hash syntax (the server read everything before the # and let the browser (in your case, angular) to manage everything after.
• Set up your server so that every path that starts with application/* return to the browser application.html.

Moreover I think you need to remove the base from the route provider:

$routeProvider
.when('/:filter1/:filter2/:filter3', {
    action: 'filter',
    reloadOnSearch: false
})
.otherwise({
    redirectTo: '/' + filter1 + '/' + filter2 + '/' + filter3
});