移除AngularJS下URL中的#字符的方法
AngularJS 默認(rèn)將會(huì)使用一個(gè) # 號(hào)來(lái)對(duì)URL進(jìn)行路由.
例如:
http://example.com/
http://example.com/#/about
http://example.com/#/contact
要獲得干凈的URL并將井號(hào)從URL中移除是很容易的.
完成兩件事情就行了.
- 配置 $locationProvider
- 設(shè)置我們的相對(duì)連接的起點(diǎn)路徑
$location 服務(wù)
在A(yíng)ngular中, $location服務(wù)會(huì)解析地址欄中的URL，并對(duì)你的應(yīng)用程序作出改變，反之亦然.
我強(qiáng)烈推薦通讀官方的 Angular $location 文檔 以對(duì)$location 服務(wù)及其所提供的特性有一個(gè)了解.
$locationProvider 和 html5 模式（html5Mode）
我們會(huì)使用 $locationProvider 模塊，并將html5Mode設(shè)置為true.
我們會(huì)在你定義Angular應(yīng)用程序并配置你的路由時(shí)做這些.
angular.module('scotchy', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
什么是 HTML5 History API? 它是使用一個(gè)腳本來(lái)操作瀏覽器歷史的標(biāo)準(zhǔn)方法. 有了它就能在不刷新頁(yè)面的前提下讓 Angular 改變路由和頁(yè)面的URL. 更多的信息，這里有一篇蠻好的 HTML5 History API 文章.
為相對(duì)鏈接設(shè)置<base>
為了在應(yīng)用程序各處使用相對(duì)鏈接，你將需要在你文檔的<head>里面設(shè)置一個(gè)<set>.
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> </head>
有大量的方法可以用來(lái)配置這個(gè)東西，而將HTML5Mode設(shè)置為true就會(huì)自動(dòng)的解析相對(duì)鏈接了. 在我這兒這種方式總是能起效. 如果你應(yīng)用程序的根同url相比有所不同,例如 /my-base, 那就用那個(gè)作為你的起點(diǎn)路徑.
老瀏覽器的回調(diào)
$location服務(wù)對(duì)不支持HTML5瀏覽歷史API的瀏覽器將自動(dòng)回調(diào)hashbang方法。
一切的發(fā)生對(duì)你是透明的，你不需為此做任何配置。從Angular $location文檔中，你可以看到回調(diào)的方法已經(jīng)它是如何工作的。
總結(jié)
這是一個(gè)在A(yíng)ngular應(yīng)用中獲得漂亮URL并刪除哈希標(biāo)記的簡(jiǎn)單方法。享受超潔凈、超快速的Angular應(yīng)用吧！
相關(guān)文章
Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例
這篇文章主要介紹了Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05
angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹AngularJS Scope(作用域),這里對(duì)Score知識(shí)做了詳細(xì)介紹,并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
淺談angular2的http請(qǐng)求返回結(jié)果的subcribe注意事項(xiàng)
下面小編就為大家?guī)?lái)一篇淺談angular2的http請(qǐng)求返回結(jié)果的subcribe注意事項(xiàng)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
詳解Angularjs 自定義指令中的數(shù)據(jù)綁定
這篇文章主要介紹了Angularjs 自定義指令中的數(shù)據(jù)綁定，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular框架詳解之視圖抽象定義的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
淺析Angular 實(shí)現(xiàn)一個(gè)repeat指令的方法
這篇文章主要介紹了Angular 實(shí)現(xiàn)一個(gè)repeat指令的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
AngularJS自定義服務(wù)與fliter的混合使用
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11