AngularJS入门教程二:在路由中传递参数的方法分析


Posted in Javascript onMay 27, 2017

本文实例讲述了AngularJS在路由中传递参数的方法。分享给大家供大家参考,具体如下:

我们不仅可以在控制器中直接定义属性的值,比如:

app.controller('listController',function($scope){
  $scope.name="ROSE";
});

AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参:

<!--首页html-->
<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li>
//js
.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/user/:age',{
        templateUrl:'list.html',
        controller:'listController'})
 }]);
<!--list.html-->
<div>
  <div>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
  <h3>{{params.age}}</h3>
</div>
</div>

AngularJs提供了一种让首页视图中将“18”传递到list.html视图的方法。那就是将该实参放到视图路由地址后面。如这里的<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li> 。然后在JS的when方法中声明该一个变量用来匹配该实参。但是该实参是作为一个“键值”保存在$routeParams (数组)里面,我们必须在控制符中注入它(所谓注入其实就是把他里面的属性和值都共享出来?)。然后在控制器中声明并赋值,(也即是取出来)。如下:

.controller('listController',function($scope,$routeParams){
  $scope.name="ROSE";
  $scope.params=$routeParams;
});

总结传参步骤如下:

1、在首页视图的”/”后面添加要传递的实参。
2、在路由配置中的路由路径中定义一个变量用以匹配,格式为/:varible 。
3、配置控制器,将$routeParams 注入到控制器当中。
4、在控制器中进行赋值。$scope.params=$routeParams; 。
5、在路由完成后的视图中成功显示出该实参。 <h3>{{params.age}}</h3>

需要注意的一点是,该实参是作为一个键值存在$routeParams里面的,必须通过访问他所对应的变量(在这里是age),才能得到该值。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
原JS实现banner图的常用功能
Jun 12 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
AngularJS入门教程一:路由用法初探
May 27 #Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 #Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
简单实现JavaScript弹幕效果
Aug 27 #Javascript
You might like
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
原生js实现随机点名功能
2019/11/05 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中List的sort方法指南
2014/09/01 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
给分销商的致歉信
2014/01/14 职场文书
房屋出租协议书
2014/04/10 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014年体育工作总结
2014/11/24 职场文书
社区低保工作总结2015
2015/07/23 职场文书
婚庆答谢词大全
2015/09/29 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android