Angularjs中的标签模式和html5模式
admin
2023-01-30 00:05:27
0次

浏览$location的实例代码我们不难发现，每次的url中都会带一个#,这是因为angularjs默认使用的是标签模式，它和html5模式有什么区别？

（1）标签模式

  标签模式使用的是内部链接的技巧，URL后面紧跟一个#,angularjs本身不会重写标签，也不需要服务器端的支持，链接后的URL样子基本是这样的：

http://example.com/#/some/path?foo=bar&baz=xoxo

（2）HTML5模式

标签模式的url看起来总是觉得不爽，html5模式可能比较适合咱们的请求格式(比如说REST),

http://example.com/some/path?foo=bar&baz=xoxo

在angularjs内部，可以通过$locationProvider.Html5Mode()(内部用的是html5 history api,如果浏览器不支持将自动降级到标签模式)方法来实现这样的路由要求，在该模式下，angularjs会重写标签。使用该模式时，永远都不要使用相对路径，如果你的应用是在根路径中加载的,这不会有什么问题,但如果是在其他路径中,AngularJS应用就无法正确处理路由了.

为了在应用程序各处使用相对链接，你将需要在你文档的里面设置一个.





    
    

注：html5 history api

  1. history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址。

  2. history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。

  3. history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样。

浏览器支持情况(完整的可以通过www.caniuse.com查询)

  IE 10+, FF38+,chrome 31+,safari 7.1+, opera 30+

为什么要用history api?

  1. 无法使用浏览器的前进、后退来切换前后数据。

  2. 当我们将浏览器地址栏中的链接与朋友分享时，可能实际上却并非我们期望的内容。

  3. 单纯地使用AJAX不利于搜索引擎优化。


参考链接：http://diveintohtml5.info/history.html

                  http://www.clanfei.com/2012/09/1646.html

                  https://docs.angularjs.org/api/ng/provider/$locationProvider

                  https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag


上一篇：利用html5实现上传图片预览

下一篇：html5,移动端开发(1)

相关内容

热门资讯

特朗普再威胁，伊朗各方回应 当地时间7月22日，伊朗外交部长阿拉格齐在社交平台上发文表示，伊朗的防御原则非常明确：以眼还眼。他写...
男子拍台球助教臀部被拘留，称对... 近日，据《1818黄金眼》报道，浙江杭州一男子洪先生因在台球俱乐部拍打女助教臀部，被警方认定构成猥亵...
【正片首发】麦田里，当河南坠子... 您的浏览器不支持 video 标签。当麦田里的守望者遇见麦田里的歌唱者，当河南坠子、宋词吟唱、摇滚回...
宗馥莉再次败诉！律师解读：香港... 作者：刘婷宗馥莉围绕18亿美元资产的第三次努力，还是没能成功。7月21日，香港高等法院就娃哈哈集团创...
德国人还在纠结打孔？中国制造已... 近5年来，持续高温不断刷新德国人对夏季气候的认知。“与记忆中的德国相比，如今夏天更热，高温天气也更常...
特朗普第三度通谍伊朗，红线划到... 前一天刚刚宣称“赢麻了”的美国总统特朗普，22日突然通过社交媒体向伊朗强硬喊话。“即刻起，只要伊朗伊...
2男子涉嫌盗窃转运数百只猫，警... 山东莱州市公安局7月23日通报，7月22日5时许，该局接群众报警称有人盗猫。接警后，公安民警迅速到达...
东方空间引力一号一箭9星发射成... 上证报中国证券网讯（记者 于祥明）记者7月22日从东方空间商业航天公司获悉，东方空间引力一号（遥四）...
湖北交投：用“积木”搭出长寿桥... 7月20日，汉宜高速改扩建项目施工现场一片繁忙，一块预制UHPC盖梁模壳借助吊机平稳落位，短短半小时...
李尔平院士：为智能时代筑牢“电... 封面新闻记者 刘叶 车家竹 摄影 何宏杰 在人工智能浪潮席卷全球的今天，一个名为“电磁兼容”的专业领...