当您在 angularjs 中启用 html5 模式时会发生什么？

Question

启用 html5 模式时实际上会发生什么？这可能会回到单页应用程序中路由如何发生的问题

我之前的感知（可能是错误的）：查看 angularjs 应用程序中的脏 url，我总是假设它是 url 片段，不同的视图绑定到不同的片段。简而言之，我们已经拥有所有页面，并且正在为特定 url 显示特定片段。

现在，为了删除哈希，您必须将 html5mode 设置为 true，并且必须告诉服务器为除 api 之外的每个请求返回索引页面。有点像

app.get('/ap1',some);
//more apis 
*
*
*
//in the end
app.get('*' ,(req,res,next) => req.sendFile('index.html'));

每次 url 更改时，请求不应该发送到服务器并重新加载页面吗？

html5mode 对浏览器有什么作用？在像 React 和 Angular（2 或更大）这样的较新框架中，您甚至不必启用 html5mode（除了在 Angular 2 中，您必须告诉您想要哪种 url）。

这是什么巫术？

Answer 1

这使用历史API。

它的设计使开发人员能够：

• 告诉浏览器诸如“我已经使用 JavaScript 来更改页面内容。现在它与您要求的页面相同/other/page”
• 拦截“后退”和“前进”的点击，以便他们可以使用 JS 将页面内容更改为与不拦截“后退”/“前进”的点击时导航到的 URL 相同。

这会更新浏览器历史记录和地址栏中的 URL，而不会触发到新页面的正常导航。这个想法是，您可以在页面之间提供更平滑、更快速的转换，同时仍然拥有可以正常工作的真实 URL（如果您链接到它们或稍后返回它们）。

那样：

• 如果 JavaScript 由于任何原因失败，真实的 URL 仍然可以传递页面
• 如果搜索引擎对 URL 进行索引，则会从中获取真实数据
• 如果访问者登陆的 URL 不是主页，他们会立即获得所需的内容，而无需等待 JavaScript 运行、发出额外的 Ajax 请求以及在客户端组装所有部分。

它是为了响应人们使用hangbangs而不是真正的URL 而设计的。

现在，为了删除哈希，您必须将 html5mode 设置为 true，并且必须告诉服务器为除 api 之外的每个请求返回索引页

这是来自 Angular 的糟糕建议。

它放弃了历史 API 可以提供的所有好东西，以便拥有 hashbang 的所有缺点，但具有更好看的 URL。

正确执行的问题在于，它需要在服务器和客户端上复制逻辑，这是一项大量的工作。同构 JavaScript是减少这种工作量的一种方法。

html5mode 对浏览器有什么作用？

没有什么。该html5mode变量由 Angular 读取。浏览器不直接关心它。它告诉 Angular 使用 History API 而不是hangbang URL。

在像 React 和 Angular（2 或更大）这样的较新框架中，您甚至不必启用 html5mode（除了在 Angular 2 中，您必须告诉您想要哪种 url）。

他们默认只使用 History API。