AngularJS利用路由传值，　　

　　1.导包

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

　　2.依赖注入ngRoute

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

　　3.配置路由

  1. myapp.config(function ($routeProvider) {
  2.             //页面选择
  3.             $routeProvider.when("/home",{
  4. //                template:"<h2>这是主页面</h2>"
  5.                 templateUrl:"home.html"
  6.             }).when("/about",{
  7. //                template:"<h2>这是关于我们的信息</h2>"
  8.                 templateUrl:"about.html"
  9.             }).when("/cel",{
  10. //                template:"<h2>请联系我们</h2>"
  11.                 templateUrl:"cel.html",
  12. //                controller:"celCtrl"
  13.             }).when("/cel/:sub",{//传参数
  14.                 templateUrl:"cel.html",
  15.                 controller:"celCtrl"
  16.             })
  17.         });

　　4.写cel的控制器

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

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

  1. <p>About页面</p>
  2.     <ul>
  3.         <li><a href="#cel/a">告诉我们</a></li>
  4.         <li><a href="#cel/b">询价</a></li>
  5.  
  6.     </ul>

　　修改cel页面的输入框的值

  1. <p>显示页面</p>
  2.     <ul>
  3.         <li><input type="text" placeholder="sub" ng-model="mname"></li>
  4.         <li><input type="text" placeholder="Message" ng-model="minfo"></li>
  5.     </ul>

　　最后是页面布局

  1. <body ng-app="myapp">
  2. <!--页面布局-->
  3.     <header>
  4.         <p>我的站点</p>
  5.         <div>
  6.             <a href="#home">主页</a>
  7.             <a href="#about">关于我们</a>
  8.             <a href="#cel">联系我们</a>
  9.         </div>
  10.     </header>
  11.     <div ng-view="" class="View"></div>
  12. </body>

看看效果:

　　

angularjs路由传值$routeParams的更多相关文章

  1. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  2. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  3. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  4. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  5. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  6. angularjs 路由机制

    前言 AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngR ...

  7. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  8. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  9. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

随机推荐

  1. 《老师说的都对》- Alpha冲刺阶段博客目录

    项目小组:<老师说的都对> 项目成员:孙浩杰,谭明耀,宋自康,孙肖肖,王明鑫,王观山 Github仓库地址-PCES 一.Scrum Meeting 第六周会议记录 第七周会议记录 二.测 ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 遮罩

    CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.遮罩有三个属性可以设置,分别是mask-image.mask-position ...

  3. wpf 模拟抖音很火的罗盘时钟，附源码，下载就能跑

    wpf 模拟抖音很火的罗盘时钟,附源码 前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~  错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了就用wpf, ...

  4. CAD制图软件哪个好？试试这两个就知道了

    CAD中,每天都是需要绘制很多的CAD图纸.一般都是借助CAD制图软件来进行使用的,图纸的格式都是dwg格式的.那CAD制图工具有很多种,对于CAD制图初学入门的小伙伴们来说CAD制图软件哪个好?想要 ...

  5. JS---DOM---点击操作---part1---20个案例

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  6. Java学习笔记-Java文件操作流

     day03 输入输出流:读入写出  节点流:   有明确的来源和去向   往往对字节操作 节点流又叫低级流.字节流   处理流:  没有明确的来源和去向  往往对低级流或其他高级流进行操作,不能独立 ...

  7. 前端开发规范：3-CSS

    尽量使用缩写属性 border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height ...

  8. picoCTF2018记录

    近期准备参加CTF 一头雾水 开始练练手 https://2018game.picoctf.com/  这个网站挺适合新手的(据说面向高中生?? 惭愧惭愧) 前面几个比较简单 就从 Resources ...

  9. unittest框架之 BeautifulReport 模板报告生成的正确姿势

    使用unittest框架的自动化测试,报告一定很重要,目前介绍一个比较高大上的报告模板 BeautifulReport.如果首次使用的话需要安装 pip install beautifulreport ...

  10. TypeScript初体验

    第一次运行TypeScript 1.创建文件夹并初始化项目 mkdir ts-demo cd ts-demo npm init -y 2.安装typescript与ts-node # 局部安装 npm ...