angularJS： $location 服务

Posted 2020-09-16 圈地自萌

记录下今天的学习笔记：

$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（可选，字符串） - 想要修改成的路径。