angularjs-$location

來源:互聯網
上載者:User

標籤:目錄   標誌位   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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.