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">告诉我们</a></li>

        <li><a href="#cel/b">询价</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">主页</a>

            <a href="#about">关于我们</a>

            <a href="#cel">联系我们</a>

        </div>

    </header>

    <div ng-view="" class="View"></div>

</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. 看懂 游戏《Minecraft》的崩溃报告 服务端/客户端

    如何看懂Minecraft报错的关键信息. 让你如何看懂Minecraft报错 前言 一些俏皮话 寻找崩溃日志 打开崩溃日志 重要的事说三遍 下载文本编辑器 开始分析 深度分析 得出结论 修复报错 解 ...

  2. python-基础-isinstance(p_object, class_or_type_or_tuple)

    1.isinstance(p_object, class_or_type_or_tuple) p_object:实例 class_or_type_or_tuple:类型,可以是一个类型或者是组成的元组 ...

  3. vue3.0 本地调试时Invalid Host header

    问题场景: vue在开发时只能在本地浏览器里查看效果,我想在手机端真机调试,连接的代码还是本地环境,这样就不用频繁的发布了,于是绑定域名并指向本机的localhost:8080: 但是用域名访问时浏览 ...

  4. 25.Zabbix入门必备

    ==Zabbix入门必备== 1.配置zabbix源 [root@zabbix ~]# cat /etc/yum.repos.d/zabbix.repo [zabbix] name=Zabbix Of ...

  5. Docker容器镜像打成tar包

    简述需求: 在现在容器上保存镜像进行打包,在另一台服务上使用 首先查看下现有要打tar包的容器 docker ps -a 接下来用commit参数进行保存镜像, -a 提交人的姓名  -m “提交内容 ...

  6. Hyper-V “SP2019SER”无法更改状态。操作失败，错误代码为“32788”。

    卸载Hyper-V,然后重装,再重启已有的Hyper-V服务器,报错如下: 尝试启动选定的虚拟机时出错.“SP2019SER”无法更改状态. 原因:卸载后导致虚拟网卡出现问题导致的. 解决办法: 右击 ...

  7. 属性文件——Java&Spring

    属性文件 什么是属性文件 ? 定义:一个扩展名为properties文件,属性文件都是以key-value(键值对)来保存文件的内容,如:log4j.properties,db.properties等 ...

  8. 为什么 netstat 对某些服务只显示了 tcp6 监听端口

    最近偶尔发现一个比较奇怪的现象,netstat 查看监听的服务端口时,却只显示了 tcp6 的监控, 但是服务明明是可以通过 tcp4 的 ipv4 地址访问的,那为什么没有显示 tcp4 的监听呢? ...

  9. 获取redis中所有的key,清空整个 Redis 服务器的数据

    获取 redis 中所有的 key 可用使用 *. redis 127.0.0.1:6379> KEYS * Redis Flushall 命令用于清空整个 Redis 服务器的数据(删除所有数 ...

  10. Tornado—options.define()方法与options.options解读

    tornado为我们提供了一个便捷的工具,tornado.options模块——全局参数定义.存储.转换. tornado是facebook开源的非阻塞web容器,类似java的netty,torna ...