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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
vue 实现购物车总价计算
Nov 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
PHP 危险函数全解析
2009/09/09 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
OpenCV实现人脸识别
2017/04/07 Python
Python 通配符删除文件的实例
2018/04/24 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python 实现一个计时器
2020/07/28 Python
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015党建工作简报
2015/07/21 职场文书
运动会开幕式致辞
2015/07/29 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers