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+XML 操作
Sep 20 Javascript
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
vue 文件目录结构详解
Nov 24 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
layui表格 列自动适应大小失效的解决方法
Sep 06 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
arguments对象
2006/11/20 Javascript
JavaScript函数详解
2014/11/17 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
分居协议书范本
2014/11/03 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
黑白记忆观后感
2015/06/18 职场文书
同事去世追悼词
2015/06/23 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
python中mongodb包操作数据库
2022/04/19 Python