javascript - HTML5 pushState Clash w/Angular UI-Router URL 路由

Question

我有一个 Angular.js 网络应用程序，它使用 ui-router ( https://github.com/angular-ui/ui-router ) 和类似这样的并行命名 View :

.state(
            'app.experience', {
                url: 'e/:experienceId',
                views: {
                    'center-pane@': {
                        templateUrl: 'partials/experience.html',
                        controller: 'ExperienceController'
                    }
                })

我通过

启用了 HTML5 pushState

$locationProvider.html5Mode(true);

什么时候

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

被请求时，我的后端发回根目录下的 index.html。 (根据 Using HTML5 pushstate on angular.js )但是，当浏览器收到 index.html 并开始获取所有 css/js 资源时，请求是针对

/e/js/script1.js

相对于

/js/script1.js

仅存在于根级别。它似乎将根目录默认为 mysite.com/e/(来自请求的 url)，而不是实际的根目录 mysite.com/。

我在这里缺少什么吗？是否无法在 index.html 中为我的 javascript 和 css 使用相对 src？

感谢您的帮助!

Answer 1

注意:您没有向我们展示 HTML 的外观，但根据您的问题，我假设您不使用文档根目录中的相对 URL。

您可以使用相对 URL，但它们应该是相对的基于文档根。

例如，您的 html 中可能有这样的内容

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

你真的应该这样做(注意添加了开头的“/”斜杠)

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

这不是 angularjs 特有的东西，它是一个 html 东西，参见 this answer了解更多详情。

您的浏览器在 url 中使用 /e/ 的原因是因为 浏览器 实际上请求了具有 /e/< 的资源 在 url 中。浏览器不知道您的服务器响应了一个不在 /e/ 目录中的文件。

因此，如果您有一个开头没有正斜杠的相对 url，它将是相对于路径或原始请求的资源。您想要的是在开头使用带斜线的相对 URL。