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文件夹直接位于一样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="/"在客户端使用。