一尘不染

AngularJS-$ location html5Mode如何工作?

angularjs

我之所以这么问,是因为有几次,我尝试一起使用该$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-appng-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.jsjs/angular/app.js例如。这将尝试加载它,就像js文件夹直接位于一样localhost:8888/js


阅读 189

收藏
2020-07-04

共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="/"在客户端使用。

2020-07-04