Html5 Pushstate Clash W/angular Ui-router Url Routing

I have an Angular.js webapp that employs ui-router (https://github.com/angular-ui/ui-router) w/parallel named views like such: .state( 'app.experience', {

Solution 1:

Note: You haven't shown us your how HTML looks but based on your issue I'm going to assume that you are not using relative urls from the document root.

You can use relative urls but they should be relative based on the document root.

So for example, you might have something like this in your html

<imgsrc="images/foo.jpg" />

You should really do it this way (notice the addition of the beginning '/' slash)

<imgsrc="/images/foo.jpg" />

This isn't something specific to angularjs, it's an html thing, see this answer for more details.

The reason why your browser is using the /e/ in the url is because the the browser actually requested a resource that has the /e/ in the url. The browser doesn't know that your server responded with a file that is not in the /e/ directory.

Therefore, if you have a relative url without a forward slash in the beginning, it will be relative to the path or the original requested resource. What you want is to use relative urls with a slash in the beginning.