I have an Angular app that's loading in content from an API through a Python (Django) proxy. The Angular app sits on a single Django template and fetches an object every time the user interacts with a control.
I need the URL to reflect this new object every time it changes.
For example:
http://domain.com/foo/bar/apples would bring up the apples object
http://domain.com/foo/bar/oranges would bring up the oranges object
I looked into $location which seems to do the trick, but I'm having trouble getting non-html5 browsers to do what I want.
When set $locationProvider to HTML5 mode everything is great on modern browsers
HTML5
/foo/bar/apples becomes /foo/bar/oranges/ GREAT!
However, on Non-HTML5
/foo/bar/apples becomes /#!/foo/bar/oranges/ Not-Great!
Since it looks like legacy browsers require a hashbang, I'd like to move that to the latter part of the url, like so /foo/bar/#!/oranges/
If I set $location.html5Mode to false, the hashbang appears on both modern and legacy browsers (/#!/foo/bar/oranges/), but I'd like modern browsers to have non-hashbang url
Thoughts?
I'm using Angular 1.2.9
My Config:
myApp.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode(true);
}]);
On slug change, I'm calling the $locationProvider like so:
$location.path('foo/bar/' + slug);
