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