您好,登錄后才能下訂單哦!
瀏覽$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
history.pushState(data, title [, url]):往歷史記錄堆棧頂部添加一條記錄;data會在onpopstate事件觸發時作為參數傳遞過去;title為頁面標題,當前所有瀏覽器都會忽略此參數;url為頁面地址,可選,缺省為當前頁地址。
history.replaceState(data, title [, url]) :更改當前的歷史記錄,參數同上。
history.state:用于存儲以上方法的data數據,不同瀏覽器的讀寫權限不一樣。
瀏覽器支持情況(完整的可以通過www.caniuse.com查詢)
IE 10+, FF38+,chrome 31+,safari 7.1+, opera 30+
為什么要用history api?
無法使用瀏覽器的前進、后退來切換前后數據。
當我們將瀏覽器地址欄中的鏈接與朋友分享時,可能實際上卻并非我們期望的內容。
單純地使用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
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。