移除AngularJS下URL中的#字符的方法

更新時(shí)間：2015年06月19日 14:59:17 投稿：goldensun

這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫(kù),需要的朋友可以參考下

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ù)

在Angular中, $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)它是如何工作的。

2015619153430123.jpg (567×311)
總結(jié)