天天看点

[Angularjs]视图和路由(三)

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

<a href="http://www.cnblogs.com/wolf-sun/p/4614532.html">[angularjs]ng-select和ng-options</a>

<a href="http://www.cnblogs.com/wolf-sun/p/4620150.html">[angularjs]ng-show和ng-hide</a>

<a href="http://www.cnblogs.com/wolf-sun/p/4621854.html">[angularjs]视图和路由(一)</a>

<a href="http://www.cnblogs.com/wolf-sun/p/4638029.html">[angularjs]视图和路由(二)</a>

有这样一种情况,在设计路由的时候,我们希望在路由上面传递参数,但是当跳转到指定的路由的时候,我们该如何接收呢?这就用到$routeparams这个指令。传递的参数,angularjs会将它解析出来并传递给$routeparams。

一个例子

这个例子的大概意思就是,根据name查询用户信息。

当访问这样的路由是#/user/wolfy,angularjs会在$routeparams中添加一个名为name的键,它的值会被设置为加载进来的url中的值。比如这里,$routeparams对象看起来回事这样的:

需要注意,如果想要在控制器中访问这些变量,需要把$routeparams注入到控制器:

angularjs提供了一个服务用以解析地址栏中的url,并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。

$location服务对javasrcipt中的window.location对象的api进行了更优雅地封装,并且或angularjs继承在一起。

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

$location服务没有刷新整个页面的能力。如果需要刷新整个页面,需要使用$window.location对象(window.location的一个接口).

path()

修改当前路径并跳转到应用中的另一个url,该方法参数为空时是获取url,传递路由时是修改url:

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

replace()

如果你希望跳转后用户不能点击后退按钮(对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用),angularjs提供了replace()方法来实现这个功能:

[Angularjs]视图和路由(三)
[Angularjs]视图和路由(三)

absurl()

absurl()方法用来回去编码后的完整url。

hash()

hash()方法用来回去url中的hash片段:

host()

该方法用来回去url中的主机:

port()

该方法用来获取url中的端口号:

protocol()

该方法用来获取url中的协议:

search()

该方法用来获取url中的查询串:

我们可以想这个方法中传入新的查询参数,来修改url中的查询串部分:

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

search(可选,字符串或对象):这个参数待办新的念书。hash对象的值可以是数组。

paramvalue(可选,字符串):如果search参数的类型是字符串,那么paramvalue会作为该参数的值覆盖url当中的对应值。如果paramvalue的值为null,对应的参数会被移除掉。

用search方法获取参数,可以这样:

url()

该方法用来获取当前页面的url:

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

url()方法可以接收两个参数:

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

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

 在目前的项目中用到比较多的是$routeparams和$location.path(),获取传递的参数,在用户完成某个操作时,进行修改路由跳转到新的templateurl。并在ng-view占位的地方进行渲染。

文章来自

angularjs权威教程 

博客地址:

<a href="http://www.cnblogs.com/wolf-sun">http://www.cnblogs.com/wolf-sun/</a>

博客版权:

本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。

如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!

再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4640725.html

继续阅读