HTML5 模式与 Hash 模式 AngularJS 的优缺点答案

【问题标题】：Advantages/Disadvantages of HTML5 mode vs Hash mode AngularJSHTML5 模式与 Hash 模式 AngularJS 的优缺点
【发布时间】：2014-10-29 16:57:54
【问题描述】：

对于 AngularJS 1.3，在 HTML5 模式下需要 <base> 标签，这让我开始思考 HTML5 模式与 Hash 模式的优缺点。

使用 Hash 模式的缺点是，如果您希望用户自己键入 URL，那么 URL 会有点难看且不直观。 HTML5 模式（1.3 版本）的缺点是需要 <base> 标签，这会产生许多问题（比如使用 SVG 有点痛苦）。

这两种模式是否还有其他我没有想到的缺点？

【问题讨论】：

可以this answer on SO帮忙吗？
@Blackhole 我试过没有运气，但是更多地研究这个问题，似乎是 icon.js 库中的某些东西导致了这个问题，因为当我只使用 SVGInjector 库和中提到的技术时该链接，图标工作正常。我仍然想知道 AngularJS 中 HTML5 模式/哈希模式之间的区别（更新了我的问题以反映这一点）。
在 3 年内在不同网站上使用 HTML5 模式没有发现任何问题，除了 svg （有一些渐变路径问题，与你写的 base 相关，必须指定完整路径）

标签： javascript html angularjs

【解决方案1】：

使用历史 API 可以让您拥有一个真实的 URL，该 URL 可以包含服务器直接提供的适当内容。

这个：

即使用户访问的第一个页面不是主页，也允许您以正确的状态加载页面。（这比在主页状态加载它然后在阅读hashbang后用JS更改它更快）
为搜索引擎提供优质内容以供索引（不使用 Google 可怕的（现已弃用）hashbang hack）
即使 JavaScript fails for any reason 也允许 URL 工作。

另见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 纯粹是出于美观的原因，然后使用肮脏的 hack 来避免 404 错误。

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

这是 Angular 遵循这样一种哲学的结果：History API 的存在是为了美观，而不是为了实用。 Angular 没有使用服务器提供的常规页面，而是为每个资源使用两个 URL（一个 History API 和一个 Hashbang）。

【讨论】：

如果 JS 失败，它应该如何工作？浏览器当然会加载该 URL，但用户会看到什么？没什么，因为如果 JS 失败，app router 就不起作用。
@Rantiev — 这就是“服务器直接提供适当的内容”的意义所在。另见this 和this。
那你必须指出这一点，因为没有人像往常一样有这个设置。许多 SPA 没有任何服务器端作为从任何 API 获取信息的静态网站。所以服务器端 URL 处理是一个非常特殊的情况。在大多数情况下，如果 JS 失败，则意味着您的网站失败了。
@Rantiev — 那么你不妨使用 hashbangs 并完成它。
我认为如果我们谈论的是百分比，那么 1% 的 Angular 应用程序使用这样的服务器端 URLS 处理。并且 99% 会使用美妆网址（html5 模式）。我增加了一些数字，以帮助您理解我的观点。实现服务器端渲染是一项相当复杂的任务，很少有人这样做，而转换 html5 模式只是几行代码。（至少有角度，我自己从来没有做过这个幻影JS和其他工作人员）

【解决方案2】：

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

有关详细信息，请参阅

【讨论】：