angularjs路由传值$routeParams详解


Posted in Javascript onSeptember 05, 2020

AngularJS利用路由传值,供大家参考,具体内容如下 

1.导包

<script src="angular.min.js"></script>
 <script src="angular-route.js"></script>

2.依赖注入ngRoute

var myapp=angular.module("myapp",["ngRoute"]);

3.配置路由

myapp.config(function ($routeProvider) {
  //页面选择
  $routeProvider.when("/home",{
//  template:"<h2>这是主页面</h2>"
  templateUrl:"home.html"
  }).when("/about",{
//  template:"<h2>这是关于我们的信息</h2>"
  templateUrl:"about.html"
  }).when("/cel",{
//  template:"<h2>请联系我们</h2>"
  templateUrl:"cel.html",
//  controller:"celCtrl"
  }).when("/cel/:sub",{//传参数
  templateUrl:"cel.html",
  controller:"celCtrl"
  })
 });

4.写cel的控制器

myapp.controller("celCtrl",function ($scope,$routeParams) {
  //根据传过来的参数给输入框赋值
  var param = $routeParams["sub"];
  if(param=="a"){
  $scope.mname="我想提建议...";
  }else if(param=="b"){
  $scope.mname="我想购买..."
  }
 });

5.通过about页面传值给cel页面

<p>About页面</p>
 <ul>
 <li><a href="#cel/a" rel="external nofollow" >告诉我们</a></li>
 <li><a href="#cel/b" rel="external nofollow" >询价</a></li>

</ul>

修改cel页面的输入框的值

<p>显示页面</p>
 <ul>
 <li><input type="text" placeholder="sub" ng-model="mname"></li>
 <li><input type="text" placeholder="Message" ng-model="minfo"></li>
 </ul>

最后是页面布局

<body ng-app="myapp">
<!--页面布局-->
 <header>
 <p>我的站点</p>
 <div>
  <a href="#home" rel="external nofollow" >主页</a>
  <a href="#about" rel="external nofollow" >关于我们</a>
  <a href="#cel" rel="external nofollow" >联系我们</a>
 </div>
 </header>
 <div ng-view="" class="View"></div>
</body>

看看效果:

angularjs路由传值$routeParams详解angularjs路由传值$routeParams详解

angularjs路由传值$routeParams详解

angularjs路由传值$routeParams详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
vue-ajax小封装实例
Sep 18 #Javascript
信息滚动效果的实例讲解
Sep 18 #Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
You might like
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
node.js的事件机制
2017/02/08 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
文化建设工作方案
2014/05/12 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python