AngularJs Using $location详解及示例代码

一、What does it do?

  $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中。

  $location服务:

暴露当前浏览器地址栏的URL,所以我们可以

1.注意和观察URL
2.改变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. When should I use $location?

  在应用中,任何需要对当前URL的改变作出响应,或者想去改变当前浏览器的URL的时候。

3. What does it not do?

  当浏览器URL改变的时候,不会导致页面重新加载(page reload)。如果需要做这件事情(更改地址,实现page reload),请使用较低级别的API,$window.location.href。

二、General overview of the API(API的总体概述)

  $location 服务可以根据它初始化时的配置而有不同的表现。默认配置是适合大多数应用的,其他配置定制,可以开启一些新特性。

  当$location服务初始化完毕,我们可以以jQuery风格的getter、setter方法来使用它,允许我们获得或者改变当前浏览器的URl。

1. $location service configuration

  想配置$location服务,需要获得$locationProvider($locationProvider),并设置以下参数:

html5Mode(mode):{boolean},true - see HTML5 mode;false - see Hashbang mode,默认: false。(下面的章节会解释各种mode)

hashPrefix(prefix):{string},hashbang使用的前缀(html5Mode为false时,使用hashbang mode,以适应不支持HTML5 mode的浏览器),默认:'!'

2. Getter and setter methods

  $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方法,可以用作告诉$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()被再次调用。

           Setter and character encoding

  我们可以传入特殊字符到$location服务中,服务会按照RFC3986标准,自动对它们进行编码。当我们访问这些方法时:

所有传入$location的setter方法的值,path()、search()、hash(),都会被编码。

getter方法(没参数)返回的值都是经过解码的,如path(),search(),hash()。

当我们调用absUrl()方法时,返回的值是包含已编码部分的完整url。

当我们调用url()方法时,返回的是包含path、search和hash部分的已经编码的url,如/path?search=1&b=c#hash。 

三、Hashbang and HTML5 Modes

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfgdd.html