[Angularjs]视图和路由（三）

写在前面

上篇文章主要介绍了路由中when方法的第二个参数，常见的几个属性，以及作用。本篇文章，将介绍和路由相关的几个常见的服务。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由（一）

[Angularjs]视图和路由（二）

$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权威教程