6.4 $location服務(wù)

$location服務(wù)是AngularJS中和瀏覽器地址欄URL相關(guān)的一個(gè)內(nèi)置服務(wù)，始終和瀏覽器地址欄URL保持同步狀態(tài)，瀏覽器地址欄發(fā)生改變時(shí)，$location服務(wù)會(huì)實(shí)時(shí)更新。使用$location服務(wù)可以獲取地址欄URL，或者對(duì)地址欄URL進(jìn)行修改，以達(dá)到訪問(wèn)不同路由的效果。

$location服務(wù)提供了一些setter和getter方法，用于獲取或修改URL的不同部分。一些URL部分是無(wú)法修改的，例如host、protocol、port等，我們只能使用$location服務(wù)獲取它們。另一部分是可以修改的，例如path、search、hash等。

圖6.6來(lái)自AngularJS官方網(wǎng)站，詳細(xì)地描述了URL的各個(gè)部分。

圖6.6 URL的不同組成部分

以地址http://foo.com:8080/bar?bar=23#baz為例，該URL主要由以下幾部分構(gòu)成：

● Protocol：協(xié)議名，通過(guò)$location.protocol()方法獲取，該方法會(huì)返回字符串http。

● Host：主機(jī)名，通過(guò)$location.host()方法獲取，返回foo.com。

● Port：端口號(hào)，通過(guò)$location.port()方法獲取，本例中為8080。

● Path:AngularJS的$location服務(wù)支持兩種URL模式，即HTML5模式和Hashbang模式。對(duì)于HTML5模式URL, Path為端口之后、請(qǐng)求參數(shù)之前的部分。例如，http://127.0.0.1:3324/ch06/ch06_04.html, Path就為/ch06/ch06_04.html。Hashbang模式URL則不同，Path為第一個(gè)#后的內(nèi)容。例如，http://127.0.0.1:3324/ch06/ch06_04.html#/abc, Path就為/abc。

AngularJS的$location服務(wù)默認(rèn)采用Hashbang模式訪問(wèn)與修改URL，但是我們可以通過(guò)$locationProvider對(duì)象進(jìn)行模式設(shè)置。完整代碼請(qǐng)讀者參考ch06\ch06_04.html。

        routeModule.config（['$locationProvider',
            function（$locationProvider）{
              $locationProvider.html5Mode（true）;
        }]）;

Search:Search可以認(rèn)為是URL中的請(qǐng)求參數(shù)。前面我們?cè)赨RL中通過(guò)$routeParams向控制器中傳遞參數(shù)，其實(shí)也可以使用$location.search()方法實(shí)現(xiàn)。

獲取URL請(qǐng)求參數(shù)只需調(diào)用無(wú)參數(shù)的search方法：

        $location.search();

我們可以向search()方法中傳遞一個(gè)JavaScript對(duì)象來(lái)設(shè)置URL請(qǐng)求參數(shù)，例如：

        $location.search（{key1:value1, key2:value2}）;

Hash:Hash也是URL的組成部分，用于把當(dāng)前瀏覽器窗口定位于HTML的某一部位。$location對(duì)象提供了一個(gè)hash()方法，用于獲取或設(shè)置URL的hash部分。

獲取URL的hash部分：

        $location.hash();

設(shè)置URL的hash部分：

        $location.hash（"div1"）;

這些方法的返回值仍然是一個(gè)$location對(duì)象，所以我們可以使用鏈?zhǔn)秸{(diào)用方式。例如，下面的調(diào)用方式也是允許的：

        $location.path（'/ch06_04.html'）.search（{key1:value1}）.hash（'div1'）;