HTML5模式与哈希模式AngularJS的优缺点 [英] Advantages/Disadvantages of HTML5 mode vs Hash mode AngularJS

问题描述

对于AngularJS 1.3，在HTML5模式下需要<base>标记，这让我开始思考HTML5模式与哈希模式之间的优缺点.

With AngularJS 1.3, the <base> tag is required when in HTML5 mode and that got me thinking about what are the advantages/disadvantages of HTML5 mode vs Hash mode.

使用散列模式时，不利之处在于，如果您希望用户自己键入URL，则URL会有些丑陋且不直观. HTML5模式(1.3版)的缺点是需要<base>标记，该标记可能会产生许多问题(例如，使SVG的使用有些痛苦).

With Hash mode, the downside is that URLs are slightly ugly and not intuitive if you expect users to type URLs themselves. The downside of HTML5 mode (with 1.3) is that is requires the <base> tag which can create a number of issues (like making working with SVG a bit of a pain).

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

Are there any other downsides to either modes that I am not thinking of?

推荐答案

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

Using the history API allows you to have a real URL that can have the appropriate content provided directly by the server.

此:

• 即使用户访问的第一页不是主页，也允许您以正确的状态加载页面. (这比在首页状态下加载它，然后在读取哈希表之后使用JS对其进行更改要快)
• 为搜索引擎提供良​​好的内容以进行索引(无需使用Google的糟糕(现已弃用)) hashbang hack )
• 即使JavaScript 由于任何原因失败，也可以使URL正常工作.

• Allows you to load the page in the correct state even if the first page visited by the user isn't the homepage. (This is faster than loading it in the homepage state then changing it with JS after reading the hashbang)
• Gives good content to search engines for indexing (without using Google's horrible (and now deprecated) hashbang hack)
• Allows the URLs to work even if the JavaScript fails for any reason.

另请参见用哈希爆炸来破坏网络.

hashbang方法:

The hashbang approach:

• 在古代浏览器中工作
• 如果您不花精力在服务器端方面，那就不要假装服务器端故障.

注意:当您使用历史记录API时，古老的浏览器可能会回退到服务器生成页面的简单链接.

NB: Ancient browsers can fall back to simply following links to the server generated page when you use the History API.

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

That said, Angular's use of the History API is pretty poor.

以下报价来自文档:

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

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html).

这个建议太糟糕了.如果您使用的是历史记录API，则应该使用渐进增强来编写服务器端代码.心里.通过将每个URL重写为引导Angular而不执行其他任何操作的HTML文档，您将拥有由服务器处理的不同URL变得毫无意义.您还完全依赖JS的工作方式，因为无法让服务器在失败时交付内容.

This advice is terrible. If you are using the history API, then you should be writing your server side code with progressive enhancement in mind. By rewriting every URL to an HTML document which bootstraps Angular and does nothing else, you making having different URLs that are handled by the server pointless. You also depend entirely on the JS working as there is no way to get the server to deliver the content when it fails.

简而言之，这种方法出于纯粹的外观原因而使用History API，然后使用肮脏的hack来避免404错误.

In short, this approach uses the History API for purely cosmetic reasons and then uses a dirty hack to avoid 404 errors.

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

For browsers that support the HTML5 history API, $location uses the HTML5 history API to write path and search. If the history API is not supported by a browser, $location supplies a Hashbang URL.

这是Angular遵循以下哲学的结果，即History API出于美观而非实际原因而存在. Angular不会使用服务器提供的常规页面，而是为每个资源使用两个URL(一个历史API和一个Hashbang).

This is the result of Angular following through with the philosophy that the History API is there for cosmetic, rather than practical, reasons. Instead of falling over to regular pages delivered by the server, Angular resorts to having two URLs (a History API one and a Hashbang one) for every resource.

这篇关于HTML5模式与哈希模式AngularJS的优缺点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！