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 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
微信小程序实现选项卡功能
Jun 19 Javascript
ES6 Set结构的应用实例分析
Jun 26 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
FleaPHP的安全设置方法
2008/09/15 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
layui表格数据重载
2019/07/27 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
nohup的用法
2014/08/10 面试题
晚归检讨书
2014/02/19 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript