-1

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

Manticore
  • 1,284
  • 16
  • 38
  • It is your server's responsibility to response with the same page on both /application/ and /application/filter1/filter2/filter3/ requests, while you didn't provide any details on your server side. – Estus Flask Dec 04 '15 at 11:34
  • ok, but how about routing with hashbang? doesnt work either - instead it takes the .otherwise-route – Manticore Dec 04 '15 at 11:40

1 Answers1

1

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
});
squaleLis
  • 6,116
  • 2
  • 22
  • 30
  • Thanks so far. I dont want to touch the server setup. Instead angular should take everything after # and use it as params but this isnt the case, instead I get charAt(d) is undefined. When I debug a little I get to $$.parse withoutbaseUrl or so which seems to care about the hashbang and fails in my case – Manticore Dec 04 '15 at 11:46
  • Thanks squaleLis, I have setup URL Rewriting for the Hash and now it works just fine! – Manticore Dec 22 '15 at 10:55