HTML5 pushState Clash w/Angular UI-Router URL Routing

Question

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', {
                url: 'e/:experienceId',
                views: {
                    'center-pane@': {
                        templateUrl: 'partials/experience.html',
                        controller: 'ExperienceController'
                    }
                })

I enabled HTML5 pushState via

$locationProvider.html5Mode(true);

When

http://www.mysite.com/e/123

is requested, my backend sends back the index.html at the root directory. (as per Using HTML5 pushstate on angular.js) However, when the browser receives index.html and begins to fetch all the css/js resources, the requests are for

/e/js/script1.js

as opposed to

/js/script1.js

which only exists at the root level. It seems to default the root directory as mysite.com/e/ (from the requested url) and not the actual root, mysite.com/.

Is there something I'm missing here? Is it not possible to use relative srcs for my javascript and css in index.html?

Thanks for helping!

Answer 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

<img src="images/foo.jpg" />

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

<img src="/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.