AngularJS-$ location html5Mode如何工作？

Question

我之所以这样问，是因为有几次，我尝试将$locationProvider.html5Mode(true)命令与<base href="/">并遇到很多调用脚本/的错误。我的项目的样式/图像。 我想可能是我做错了什么，但是您应该遵循某种文件夹结构，以免遇到这些错误吗？ 还是我不太了解base href的特定工作方式？

最近，我想我会在一个非常小的应用程序上尝试。 它实际上是一个静态网站，但是我想利用Angular的路由来确保所有页面都可以立即加载。 所以我的结构是这样的：

my-project
    css
    images
    js
        angular
            app.js
            app.routes.js
            mainCtrl.js
    views
        home.html
        about.html
        contact.html
    index.html

所以我知道这个文件夹结构不是很好，但是我只会在这个项目中使用Angular进行路由，仅此而已，所以它满足了我的需求。

我将<base href="/">放入头部，放入ng-app和ng-controller主体，并且在主体内部也放入<div ng-view> 。

我添加了$locationProvider.html5Mode(true)并尝试了该应用程序。 然后，我所有的脚本都被加载为http://localhost:8888/script.js ，这是不正确的。 该项目位于一个文件夹中，以便index.html位于http://localhost:8888/my-project/index.html 。 因此，例如，应该从http://localhost:8888/my-project/js/angular/app.js加载脚本。

关于base href是否有我不了解的内容？ 最终，我可能将此应用程序托管在在线某个位置，因此我希望脚本等的URL都与该文件真正相关。 有人有想法么？

好了，因此在base href标记上方，我将具有CSS样式，该样式将作为css/style.css链接，在body标记的底部，我的脚本将被加载为js/init.js或js/angular/app.js例如js/angular/app.js 。 这将尝试加载它，就像js文件夹直接位于localhost:8888/js 。

Answer 1

Angular框架是一个单页应用程序（SPA），它可以通过使用“哈希”（ # ）页面锚点从本质上诱使浏览器运行代码段而不是进行服务器调用，从而在浏览器中运行。 通常，带有#的URL会跳到页面中的特定锚点。 如果是Angular或其他类似的SPA框架，则将#重定向到代码段。

理想情况下，您不必在页面URL中引用此# 。 这就是Html5Mode起作用的地方。 Html5Mode可以使用HTML5推送状态 （又称为历史记录API） 隐藏 # 。

启用Html5Mode时，页面上的普通链接将被事件监听器以无提示方式替换为Angular。 触发这些事件后，会将当前页面推送到浏览器历史记录中，并加载新页面。 这给人一种幻觉，即您正在导航到新页面，甚至允许后退按钮进行操作。

当您处理正在运行的应用程序中单击的链接时，这一切都很好，但是如果您从尚未将Angular加载到内存中的外部源导航到该页面，则依赖事件侦听器将无法工作。 要解决此问题，您必须从支持URL重写的Web服务器加载页面。 当服务器收到对没有物理页面的URL的请求时，服务器将重写URL以加载基本HTML页面，在该页面中可以加载Angular并进行接管。

当Angular收到对以这种方式重写的路线的请求时，它必须首先确定目标路线是什么。 这是Base HTML标记起作用的地方。 Angular使用Base引用来帮助它确定URL的哪一部分在服务器上以及哪一部分是客户端路由。 本质上，如果未启用Html5Mode，则URL中的#位于。

不幸的是， Base是一个HTML标记，浏览器不仅将其用于Angular。 浏览器还使用此标记来确定正确的位置，以使用相对路径从中加载脚本和资源，而不管位置栏中的路径如何。 通常，如果所有脚本和资源都与Index.html文件的位置有关，则这不是问题。 如果省略Base ，则浏览器将从当前URI确定的明显的基本路径中加载脚本。 但是，一旦提供，浏览器将使用您提供的任何值。

通常，除非您在网站的子页面上托管有角度的脚本，并且希望用户希望URL字符串中包含某些特定内容，否则应始终控制服务器的基础，并在客户端上使用Base="/"侧。