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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue实现路由切换改变title功能
May 28 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
Vue中qs插件的使用详解
Feb 07 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php查询whois信息的方法
2015/06/08 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python字符串替换示例
2014/04/24 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
教师竞聘演讲稿
2014/05/16 职场文书
毕业大学生自荐信
2014/06/17 职场文书
语文教师个人工作总结
2015/02/06 职场文书