HTML5 pushState Clash w/Angular UI-Router URL Routing [英] HTML5 pushState Clash w/Angular UI-Router URL Routing

问题描述

我有一个使用 ui-router 的 Angular.js 网络应用程序(https://github.com/angular-ui/ui-router) 带有像这样的并行命名视图:

.state('应用程序体验'，{url: 'e/:experienceId',意见:{'中心窗格@':{templateUrl: 'partials/experience.html',控制器:'体验控制器'}})

我通过

启用了 HTML5 pushState

$locationProvider.html5Mode(true);

什么时候

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

被请求，我的后端发回根目录中的 index.html.(根据 在 angular.js 上使用 HTML5 pushstate)但是，当浏览器接收 index.html 并开始获取所有的 css/js 资源，请求是为了

/e/js/script1.js

相对于

/js/script1.js

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

我在这里遗漏了什么吗?是否无法在 index.html 中为我的 javascript 和 css 使用相对 srcs?

感谢您的帮助！

解决方案

注意:您尚未向我们展示 HTML 的外观，但根据您的问题，我将假设您不是 使用来自文档根目录的相对 url.

您可以使用相对网址，但它们应该是相对的基于文档根目录.

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

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

你真的应该这样做(注意添加了开头的/"斜线)

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

这不是特定于 angularjs 的内容，而是 html 内容，请参阅此答案了解更多详情.>

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

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

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!

解决方案

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.

这篇关于HTML5 pushState Clash w/Angular UI-Router URL Routing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！