写在前面
上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用。本篇文章,将介绍和路由相关的几个常见的服务。
系列文章
[Angularjs]ng-select和ng-options
$routeParams
有这样一种情况,在设计路由的时候,我们希望在路由上面传递参数,但是当跳转到指定的路由的时候,我们该如何接收呢?这就用到$routeParams这个指令。传递的参数,angularjs会将它解析出来并传递给$routeParams。
一个例子
$routeProvider .when(‘/user/:name‘,{ controller:‘UserController‘, templateUrl:‘views/user.html‘ });
这个例子的大概意思就是,根据name查询用户信息。
当访问这样的路由是#/user/wolfy,angularjs会在$routeParams中添加一个名为name的键,它的值会被设置为加载进来的Url中的值。比如这里,$routeParams对象看起来回事这样的:
{name:‘wolfy‘}
需要注意,如果想要在控制器中访问这些变量,需要把$routeParams注入到控制器:
app.controller(‘UserController‘,function($scope,$routeParams){ console.log($routeParams.name); });
$location服务
angularjs提供了一个服务用以解析地址栏中的URL,并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。
$location服务对javasrcipt中的window.location对象的api进行了更优雅地封装,并且或Angularjs继承在一起。
当应用需要在内部进行跳转时是使用$location服务的最佳场景,比如当用户注册后,修改或者登录后进行的跳转。
$location服务没有刷新整个页面的能力。如果需要刷新整个页面,需要使用$window.location对象(window.location的一个接口).
$location服务常见的几个方法
path()
$location.path();//用来获取页面的当前路径。
修改当前路径并跳转到应用中的另一个Url,该方法参数为空时是获取url,传递路由时是修改url:
$location.path(‘/‘);//把路径修改为‘/‘路由
path()方法直接和html5的历史api进行交互,所以用户可通过点击后退按钮退回到上一个页面。
replace()
如果你希望跳转后用户不能点击后退按钮(对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用),angularjs提供了replace()方法来实现这个功能:
$location.path(‘/home‘); $location.replace(); //或者 $loaction.path(‘/home‘).replace();
absUrl()
absUrl()方法用来回去编码后的完整URL。
$location.absUrl();
hash()
hash()方法用来回去URL中的hash片段:
$location.hash();//返回当前的hash片段
host()
该方法用来回去URL中的主机:
$location.host();//当前url的主机
port()
该方法用来获取URL中的端口号:
$location.port();
protocol()
该方法用来获取URL中的协议:
$location.protocol();
search()
该方法用来获取URL中的查询串:
$location.search();
我们可以想这个方法中传入新的查询参数,来修改url中的查询串部分:
//对象设置查询 $location.search({name:‘wolfy‘,userName:‘wolfy sun‘}); //用字符串设置查询 $location.search(‘name=wolfy&username=wolfy sun‘);
search方法可以接收两个参数:
- search(可选,字符串或对象):这个参数待办新的念书。hash对象的值可以是数组。
- paramValue(可选,字符串):如果search参数的类型是字符串,那么paramValue会作为该参数的值覆盖URL当中的对应值。如果paramValue的值为null,对应的参数会被移除掉。
一个例子
// 带#号的url,看?号的url,见下面 url = http://www.wolfy.com?#name=wolfy
用search方法获取参数,可以这样:
// 获取url参数 $location.search().name; // or $location.search()[‘name‘];
url()
该方法用来获取当前页面的URL:
$location.url();//该URL的字符串
如果调用url()方法时传了参数,会设置并修改当前的URL,这会同时修改URL中的路径、查询串和hash,并返回$location.
//设置新的URL $location.url(‘/home?name=wolry#hashthing‘);
url()方法可以接收两个参数:
url(可选,字符串):新的URL的基础的前缀。
replace(可选,字符串):想要修改成的路径。
总结
在目前的项目中用到比较多的是$routeParams和$location.path(),获取传递的参数,在用户完成某个操作时,进行修改路由跳转到新的templateUrl。并在ng-view占位的地方进行渲染。
文章来自
AngularJS权威教程