angularjs-$location

標籤：目錄   標誌位   query   單擊   commit   修改   rect   讀寫   current   

$location服務分析瀏覽器地址欄中的URL（基於window.location），讓我們可以在應用中較為方便地使用URL裡面的內容。在地址欄中更改URL，會響應到$location服務中，而在$location中修改URL，也會響應到地址欄中。

　　$location服務：

• 暴露當前瀏覽器地址欄的URL，所以我們可以
  • 注意和觀察URL
  • 改變URL
• 當使用者做以下操作時，與瀏覽器一起同步URL：

1. 改變地址欄
2. 單擊後退或者前進按鈕（或者點擊一個曆史連結）。
3. 單擊一個連結

• 將URL對象描繪為一系列的方法（protocol，host，path，search，hash）。

1. 比較$location和window.location

　　1) 目的：window.location和$location服務，都允許對當前瀏覽器的location進行讀寫訪問。

　　2) API：window.location暴露一個未經加工的對象，附帶一些可以直接修改的屬性；而$location服務則是暴露一些jQuery風格的getter/setter方法。

　　3) 與angular應用聲明周期的整合：$location知道關於所有內部聲明周期的階段，與$watch等整合；而window.location則不行。

　　4) 與HTML5 API無縫結合：是（with a fallback for legacy browsers，對於低版本的瀏覽器有相容手段？）；而window.location則沒有。

　　5) 知道應用載入的主目錄(docroot)或者上下文(context)：window.location不行，wnidow.location.path會返回”/docroot/子路徑”；而$location.path()返回真實的docroot。

2. 何時使用$location?

　　在應用中，任何需要對當前URL的改變作出響應，或者想去改變當前瀏覽器的URL的時候。

3. $location不能做的事

　　當瀏覽器URL改變的時候，不會導致頁面重新載入(page reload)。如果需要做這件事情（更改地址，實現page reload），請使用較低層級的API,$window.location.href。

4. $location API

配置：

$location服務的配置需要$locationProvider, 參數：

1. html5Mode(mode): {boolean} 預設false, hashbang mode; 若為true, HTML5 mode
2. hasPrefix(prefix): {string} 預設‘!‘，hashbang使用的首碼

Getter, setter方法

$location 服務為唯讀URL部分（absUrl，protocol，host，port）提供getter方法，也提供url，path，search，hash的getter、setter方法。

   // get the current path    $location.path();    // change the path    $location.path(‘/newValue‘)

所有setter方法都返回同一個$location對象，以實現鏈式文法。例如，在一句裡面修改多個屬性，鏈式setter方法類似：

$location.path(‘/newValue’).search({key:value});

replace方法

replace方法，可以用作告訴$location服務，在下一次與瀏覽器同步時，使用某個路徑代替最新的記錄，而不是建立一個新的記錄。當我們想實現重新導向（redirection）而又不想使後退按鈕（後退按鈕回重新觸發重新導向）失效時，replace方法就很有用了。想改變當前URL而不建立新的記錄的話，我們可以這樣做：

$location.path(‘/someNewPath’).replace();

注意，setter方法不會馬上更新window.location。相反，$location服務會知道scope生命週期以及合并多個$location變化為一個，並在scope的$digest階段一併提交到window.location對象中。正因為$location多個狀態的變化會合并為一個變化，到瀏覽器中，只調用一次replace()方法，讓整個commit只有一個replace()，這樣不會使瀏覽器建立額外的記錄。一旦瀏覽器更新了，$location服務會通過replace()方法重設標誌位，將來的變化將會建立一個新的記錄，除非replace()被再次調用。

5. hashbang 和 HTML5 Modes

$location有兩種配置模式，可以控制瀏覽器地址欄中URL格式：Hashbang mode(預設），與使用HTML5 History API的HTML5 mode。在兩種模式下，應用都使用相同的API，$location服務會與正確的URL片段、瀏覽器API一起協作，協助我們進行瀏覽器URL變更以及曆史管理。

轉自：http://www.cnblogs.com/jcomet/p/4350341.html

angularjs-$location