Angularjs中的標(biāo)簽?zāi)Ｊ胶蚳tml5模式-創(chuàng)新互聯(lián)

瀏覽$location的實(shí)例代碼我們不難發(fā)現(xiàn)，每次的url中都會(huì)帶一個(gè)#,這是因?yàn)閍ngularjs默認(rèn)使用的是標(biāo)簽?zāi)Ｊ?，它和html5模式有什么區(qū)別？

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的南澗網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

（1）標(biāo)簽?zāi)Ｊ?/p>

標(biāo)簽?zāi)Ｊ绞褂玫氖莾?nèi)部鏈接的技巧，URL后面緊跟一個(gè)#,angularjs本身不會(huì)重寫(xiě)<a>標(biāo)簽，也不需要服務(wù)器端的支持，鏈接后的URL樣子基本是這樣的：

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

（2）HTML5模式

標(biāo)簽?zāi)Ｊ降膗rl看起來(lái)總是覺(jué)得不爽，html5模式可能比較適合咱們的請(qǐng)求格式(比如說(shuō)REST),

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

在angularjs內(nèi)部，可以通過(guò)$locationProvider.Html5Mode()(內(nèi)部用的是html5 history api,如果瀏覽器不支持將自動(dòng)降級(jí)到標(biāo)簽?zāi)Ｊ?方法來(lái)實(shí)現(xiàn)這樣的路由要求，在該模式下，angularjs會(huì)重寫(xiě)<a>標(biāo)簽。使用該模式時(shí)，永遠(yuǎn)都不要使用相對(duì)路徑，如果你的應(yīng)用是在根路徑中加載的,這不會(huì)有什么問(wèn)題,但如果是在其他路徑中,AngularJS應(yīng)用就無(wú)法正確處理路由了.

為了在應(yīng)用程序各處使用相對(duì)鏈接，你將需要在你文檔的<head>里面設(shè)置一個(gè)<base>.

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

注：html5 history api

history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會(huì)在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過(guò)去；title為頁(yè)面標(biāo)題，當(dāng)前所有瀏覽器都會(huì)忽略此參數(shù)；url為頁(yè)面地址，可選，缺省為當(dāng)前頁(yè)地址。
history.replaceState(data, title [, url]) ：更改當(dāng)前的歷史記錄，參數(shù)同上。
history.state：用于存儲(chǔ)以上方法的data數(shù)據(jù)，不同瀏覽器的讀寫(xiě)權(quán)限不一樣。

瀏覽器支持情況(完整的可以通過(guò)www.caniuse.com查詢(xún))

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

為什么要用history api?

無(wú)法使用瀏覽器的前進(jìn)、后退來(lái)切換前后數(shù)據(jù)。
當(dāng)我們將瀏覽器地址欄中的鏈接與朋友分享時(shí)，可能實(shí)際上卻并非我們期望的內(nèi)容。
單純地使用AJAX不利于搜索引擎優(yōu)化。

參考鏈接：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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：Angularjs中的標(biāo)簽?zāi)Ｊ胶蚳tml5模式-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://muchs.cn/article40/csjcho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站維護(hù)、App設(shè)計(jì)、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容