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

Question

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

我之前的感知(可能是错误的):查看 angularjs 应用程序中的脏 url，我总是假设它是 url 片段，不同的 View 绑定(bind)到不同的片段。简而言之，我们已经拥有所有页面，并且正在为特定 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

这使用 History API .

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

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

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

这样:

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

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

<小时/>

Now in order to remove the hash you have to set html5mode true and you have to tell the server to return the index page for every request other than your apis

这是来自 Angular 的糟糕建议。

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

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

<小时/>

and what does html5mode does to the browser ?

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

<小时/>

In the newer frameworks like react and angular(2 or greater) , you don't even have to enable html5mode(except in angular 2 where you have to tell what kind of url you want) .

他们默认只使用 History API。