AngularJS入门与进阶
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

6.4 $location服务

$location服务是AngularJS中和浏览器地址栏URL相关的一个内置服务，始终和浏览器地址栏URL保持同步状态，浏览器地址栏发生改变时，$location服务会实时更新。使用$location服务可以获取地址栏URL，或者对地址栏URL进行修改，以达到访问不同路由的效果。

$location服务提供了一些setter和getter方法，用于获取或修改URL的不同部分。一些URL部分是无法修改的，例如host、protocol、port等，我们只能使用$location服务获取它们。另一部分是可以修改的，例如path、search、hash等。

图6.6来自AngularJS官方网站，详细地描述了URL的各个部分。

图6.6 URL的不同组成部分

以地址http://foo.com:8080/bar?bar=23#baz为例，该URL主要由以下几部分构成：

● Protocol：协议名，通过$location.protocol()方法获取，该方法会返回字符串http。

● Host：主机名，通过$location.host()方法获取，返回foo.com。

● Port：端口号，通过$location.port()方法获取，本例中为8080。

● Path:AngularJS的$location服务支持两种URL模式，即HTML5模式和Hashbang模式。对于HTML5模式URL, Path为端口之后、请求参数之前的部分。例如，http://127.0.0.1:3324/ch06/ch06_04.html, Path就为/ch06/ch06_04.html。Hashbang模式URL则不同，Path为第一个#后的内容。例如，http://127.0.0.1:3324/ch06/ch06_04.html#/abc, Path就为/abc。

AngularJS的$location服务默认采用Hashbang模式访问与修改URL，但是我们可以通过$locationProvider对象进行模式设置。完整代码请读者参考ch06\ch06_04.html。

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

Search:Search可以认为是URL中的请求参数。前面我们在URL中通过$routeParams向控制器中传递参数，其实也可以使用$location.search()方法实现。

获取URL请求参数只需调用无参数的search方法：

        $location.search();

我们可以向search()方法中传递一个JavaScript对象来设置URL请求参数，例如：

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

Hash:Hash也是URL的组成部分，用于把当前浏览器窗口定位于HTML的某一部位。$location对象提供了一个hash()方法，用于获取或设置URL的hash部分。

获取URL的hash部分：

        $location.hash();

设置URL的hash部分：

        $location.hash（"div1"）;

这些方法的返回值仍然是一个$location对象，所以我们可以使用链式调用方式。例如，下面的调用方式也是允许的：

        $location.path（'/ch06_04.html'）.search（{key1:value1}）.hash（'div1'）;
上一章目录下一章