在 angularjs 模式中启用 html5 模式会发生什么?

What happens when you enable the html5 mode in mode in angularjs?

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

我之前的看法(可能是错误的):查看 angularjs 应用程序中的脏 url 我一直认为它是不同视图的 url 片段绑定不同的片段。所以简而言之,我们已经拥有所有页面,并且正在为特定 url 显示特定片段。

现在为了删除散列,您必须将 html5mode 设置为 true 并且您必须告诉服务器 return 除了您的 api 之外的每个请求的索引页面。有点喜欢

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

每次 url 更改时,请求是否应该发送到服务器并重新加载页面?

html5mode 对浏览器有什么作用?在 react 和 angular(2 or greater) 等较新的框架中,您甚至不必启用 html5mode( 除了在 angular 2 中您必须告诉哪种 url 你想要的)。

这是什么魔法?

这使用了 History API.

它的设计让开发者可以:

  • 告诉浏览器 "I have used JavaScript to change the contents of the page. It is now the same as the page you would get if you asked for /other/page"
  • 拦截点击后退前进,以便他们可以使用JS将页面内容更改为与如果未拦截对 Back/Forward 的点击,将导航到的 URLs。

这会更新浏览器历史记录和地址栏中的 URL,而不会触发到新页面的正常导航。这个想法是,您可以在页面之间提供更流畅、更快速的过渡,同时仍然拥有真正的 URL,如果您 link 到它们或稍后返回它们,它们仍然可以很好地工作。

这样:

  • 如果 JavaScript 由于任何原因失败,真正的 URL 仍然可以传送页面
  • 如果搜索引擎索引 URL,它会从中获取真实数据
  • 如果访问者登陆的 URL 不是主页,他们会立即获得所需的内容,而无需等待 JavaScript 到 运行,从而获得更多Ajax 请求,assemble 所有客户端。

它是为了响应使用 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 的糟糕建议。

它放弃了 history API 可以提供的所有好东西,以便拥有 hashbangs 的所有缺点,但看起来更好 [=7​​2=]s。

正确执行的问题是它需要在服务器和客户端上复制逻辑,这是很多工作。 Isomorphic JavaScript 是一种减少这种工作量的方法。


and what does html5mode does to the browser ?

没有。 html5mode 变量被 Angular 读取。浏览器并不直接关心它。它告诉 Angular 使用历史记录 API 而不是 hangbang URLs。


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) .

默认情况下他们只使用历史记录API。