HTML5模式与Hash模式AngularJS的优点/缺点

Question

使用AngularJS 1.3时，在HTML5模式下需要<base>标记，这让我想到了HTML5模式与Hash模式的优点/缺点。

使用Hash模式时，缺点是如果您希望用户自己键入URL，则URL略显丑陋并且不直观。 HTML5模式（使用1.3）的缺点是需要<base>标签，这可能会产生许多问题（比如使用SVG会有点痛苦）。

我没有想到任何一种模式的其他缺点吗？

Answer 1

使用历史记录API，您可以拥有一个真实的URL，该URL可以直接由服务器提供相应的内容。

此：

• 允许您以正确的状态加载页面，即使用户访问的第一页不在主页上也是如此。 （这比在主页状态下加载它然后在读取hashbang后用JS更改它更快）
• 为搜索引擎提供良​​好的内容索引（不使用Google可怕（现已弃用）hashbang hack）
• 即使是JavaScript fails for any reason，也允许网址生效。

另见Breaking the Web With Hash Bangs。

hashbang方法：

• 适用于古代浏览器
• 如果你没有投入精力建设一个服务器端，那么它就不会假装服务器端的后备。

注意：当您使用History API时，古代浏览器可以回退到只是跟随指向服务器生成页面的链接。

---

也就是说，Angular对History API的使用非常糟糕。

以下引言来自the documentation：

  

使用此模式需要在服务器端重写URL，基本上您必须重写所有指向应用程序入口点的链接（例如index.html）。

这个建议太可怕了。如果您使用的是历史记录API，那么您应该在编写服务器端代码时考虑progressive enhancement。通过将每个URL重写为引导Angular并且不执行任何其他操作的HTML文档，您可以使服务器处理的不同URL毫无意义。您还完全依赖于JS工作，因为当它失败时无法让服务器提供内容。

简而言之，这种方法使用History API纯粹是出于美观的原因，然后使用脏黑客来避免404错误。

  

对于支持HTML5历史记录API的浏览器，$ location使用HTML5历史记录API来编写路径和搜索。如果浏览器不支持历史记录API，$ location会提供Hashbang网址。

这是Angular遵循哲学的结果，即历史API是出于美观而非实际的原因。而不是落到服务器提供的常规页面上，Angular会为每个资源提供两个URL（一个是History API，一个是Hashbang）。

Answer 2

使用HTML5模式需要在服务器端重写URL，基本上，您必须重写所有指向应用程序入口点的链接（例如index.html）。在这种情况下，需要一个<base>标签也很重要，因为它使AngularJS可以区分url部分（作为应用程序基础）和应由应用程序处理的路径。

有关更多信息，请参见

• AngularJS Developer Guide - Using $location HTML5 mode Server Side
• AngularJS routing without the hash '#'
• How to: Configure your server to work with html5Mode