开发者社区> ghost丶桃子> 正文

[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/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4640725.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14744 0
SQLServer:GUI方式、SQL语句两种方式建立视图和GUI方式设置主键、约束等
SQLServer:GUI方式、SQL语句两种方式建立视图和GUI方式设置主键、约束等
30 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25240 0
navicat上如何导出视图,函数等
如何导出视图,函数,一般通过linux命令行,如果简单点就用navicat把。 image.png 这样函数,视图都可以导出来 后续更新.....
2916 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20698 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18999 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13872 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载