首页 > 代码库 > angularJS: $location 服务

angularJS: $location 服务

记录下今天的学习笔记:

$location服务:

  1. 解析地址栏的URL,让用户可以访问应用当前路径所对应的路由。
  2. 可修改路径、处理各种形式导航。

$location服务对javascript中的window.location对象的API进行了更优雅的封装,并且和angularJS集成在一起。

使用$location服务的最佳场景是:当应用需要在内部进行跳转时候。如:用户注册、修改、或登录后进行的跳转。

$location服务并不刷新整个页面。刷新整个页面使用:$window.location对象(window.location的一个接口)

1. path() - 获取页面当前路径:

$location.path();  //返回当前路径

$location.path(‘/‘); //修改路径为‘/‘路由,并跳转

path()方法直接和H5的历史API进行交互,所以用户可通过点击后退按钮退回到上个页面。

2. replace() - 禁止用户跳转后点击后退按钮。(如用户登录后)

$location.path(‘/home‘);

$location.replace();

或者:

$location.path(‘/home‘).replace();

3. absUrl() - 获取编码后的完整URL

$location.absUrl();

4. hash() - 获取URL中的hash片段

$location.hash(); // 返回当前的hash片段

5. host() - 获取URL中的主机

$location.host();

6. port() - 获取URL中的端口号

$location.port();

7. protocol() - 获取URL中的协议

$location.protocol();

8. search() - 获取URL中的查询串

$location.search();

这个方法可传入新的查询参数,用来修改URL中的查询串部分:

//用对象设置查询:

$location.search({name: ‘Ari‘, username: ‘auser‘});

//用字符串设置查询:

$location.search(‘name=Air&username=auser‘);

search方法可接收两个可选参数:

  • search(可选,字符串或对象) - 代表新的查询参数。hash对象的值可以是数组
  • paramValue(可选,字符串) - 如果search参数的类型是字符串,那么paramValue会作为该参数的值覆盖URL当中对应的值。如果paramValue的值是null,对应的参数会被移除。

9. url() - 获取当前的URL:

$location.url();

调用url()方法时如果传了参数,会设置并修改当前的URL,同时修改URL中的路径、查询串和hash,并返回$location。

//设置新的URL

$location.url(‘/home?name=Ari#hashthing‘);

方法可接收两个参数:

url(可选,字符串) - 新的URL的基础的前缀。

replace(可选,字符串) - 想要修改成的路径。

angularJS: $location 服务