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),通过使用"hash"()页面锚点,基本上可以通过欺骗浏览器运行代码片段而不是进行服务器调用来在浏览器中运行#.通常,带有a的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="/"在客户端使用.