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

  • 博客地址:http://www.cnblogs.com/wolf-sun/
    博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
posted @ 2015-07-12 11:47  wolfy  阅读(1248)  评论(0编辑  收藏  举报