在angularjs中以模式启用html5模式会发生什么? [英] What happens when you enable the html5 mode in mode in angularjs?

查看:110
本文介绍了在angularjs中以模式启用html5模式会发生什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

启用html5模式时会发生什么?这可能会回到如何在单页应用程序中进行路由

What actually happens when you enable the html5 mode ? This might go back to the point how routing takes place in single page applications

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

What I perceived before(it may be wrong) : Looking at the dirty url in the angularjs application I always assumed it being url fragment to which different views are bind for different fragments. So in short we already have all the pages and a particular fragment is being displayed for a particular url .

现在为了删除哈希,你必须设置html5mode为true和你必须告诉服务器为你的apis以外的每个请求返回索引页面。有点像

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 . Kinda like

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

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

Shouldn't the request go the server and the page be reloaded everytime the url changes ?

以及html5mode对浏览器的作用是什么?在像react和angular(2或更高版本)这样的新框架中,你甚至不需要启用html5mode(在角度2中除外,你必须告诉你想要什么样的网址)。

and what does html5mode does to the browser ? 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

它的设计使开发人员可以:

It is designed so that developers can:


  • 告诉浏览器我使用JavaScript来改变内容现在,如果您要求 / other / page

  • 拦截点击次数返回转发,以便他们可以使用JS将页面内容更改为与如果单击后退/前进而导航到的URL相同截获。

  • Tell the browser things like "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"
  • Intercept clicks on Back and Forward so that they can use JS to change the contents of the page to the be the same as the URLs that would be navigated to if the click on Back/Forward wasn't intercepted.

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

This updates the browser history and the URL in the address bar without triggering a normal navigation to a fresh page. The idea is that you can provide a smoother, faster transition between pages while still having real URLs that work well if you link to them or come back to them later.

方式:


  • 如果JavaScript因任何原因失败,真正的URL仍然可以提供页面

  • 如果搜索引擎对URL进行索引,则会从中获取实际数据

  • 如果访问者登录的网页不是主页,则会立即获取他们要求的内容必须等待JavaScript运行,发出额外的Ajax请求,并组装客户端的所有部分。

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

It was designed in response to people using hangbangs instead of real URLs.


现在为了删除哈希,你必须设置html5mode为true,你必须告诉服务器返回除了你的apis之外的每个请求的dex页面

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的糟糕建议。

This is terrible advice from Angular.

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

It abandons all of the good stuff that the history API can provide in order to have all the drawbacks of hashbangs, but with nicer looking URLs.

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

The problem with doing it properly is that it requires duplicating the logic on the server and the client, which is a lot of work. Isomorphic JavaScript is an approach to reduce this workload.


以及html5mode对浏览器的作用是什么?

and what does html5mode does to the browser ?

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

Nothing. The html5mode variable is read by Angular. The browser doesn't care about it directly. It tells Angular to use the History API instead of hangbang URLs.


在较新的框架中如反应和角度(2或更大),你甚至不必启用html5mode(角度2除外,你必须告诉你想要什么样的网址。)

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。

They just use the History API by default.

这篇关于在angularjs中以模式启用html5模式会发生什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆