温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angularjs中的标签模式和html5模式

发布时间:2020-08-05 07:14:00 来源:网络 阅读:1248 作者:houyaowei 栏目:移动开发

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

(1)标签模式

  标签模式使用的是内部链接的技巧,URL后面紧跟一个#,angularjs本身不会重写<a>标签,也不需要服务器端的支持,链接后的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会重写<a>标签。使用该模式时,永远都不要使用相对路径,如果你的应用是在根路径中加载的,这不会有什么问题,但如果是在其他路径中,AngularJS应用就无法正确处理路由了.

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


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <base href="/">
</head>

注: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


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI