HTML5 pushState的冲突W /角UI-路由器URL路径 [英] HTML5 pushState Clash w/Angular UI-Router URL Routing

问题描述

我有一个web应用Angular.js它采用UI路由器（ https://github.com /角度的UI / UI路由器）W /像这样的并行命名视图：

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'
                    }
                })

我通过

$locationProvider.html5Mode(true);

在

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

要求，我的后端发回的根目录中的index.html。 （按照使用HTML5 pushState的上angular.js 的）然而，当浏览器接收的index.html并开始获取所有的CSS / JS资源，请求是

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

，而不是

/js/script1.js

只存在于根级别。这似乎默认根目录为 mysite.com/e / （从请求的URL），而不是实际的根， mysite.com/ 。

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/.

有我丢失的东西吗？这难道不是可以使用相对索马里红新月会为我的JavaScript和CSS index.html中？

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

感谢您的帮助！

推荐答案

请注意：你还没有告诉我们你的HTML看起来如何，但根据您的问题，我会假设你的不可以使用从文档根目录相对URL。

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.

您可以使用相对URL，但他们应该根据文档根是相对的 的。

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

因此​​，例如，你可能有这样的事情在你的HTML

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" />

这是不特定于angularjs的东西，它是一个HTML的事情，请参见更多细节这个答案。

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

为什么你的浏览器中使用之所以/ E / 中的URL，因为在浏览器实际要求有一个资源 / E / 在URL中。浏览器不知道你的服务器有一个文件，是不是在 / E / 目录回应。

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.

因此​​，如果有不在开始斜线相对URL，这将是相对于所述路径或原始请求的资源。你想要的是使用相对URL在一开始斜线。

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.

这篇关于HTML5 pushState的冲突W /角UI-路由器URL路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！