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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
关于js遍历表格的实例
Jul 10 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
Vue2.0 $set()的正确使用详解
Jul 28 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
python3 图片referer防盗链的实现方法
2018/03/12 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
一篇.NET面试题
2014/09/29 面试题
学生生病请假条范文
2014/02/16 职场文书
采购经理岗位职责
2014/02/16 职场文书
服装促销活动方案
2014/02/23 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2014年个人委托书范本
2014/10/13 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
详解Python requests模块
2021/06/21 Python
Python编程super应用场景及示例解析
2021/10/05 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs