$routeParams传递路由参数
$routeParams传的值是一个对象数组。
案例：
index.html
<!DOCTYPE html>
<html lang="zh-cn" data-ng-app="myApp">
<!--myApp这里要和module模型里的名称一样-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>angularjs</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet/less" href="styles/site.less">
<script src="scripts/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="scripts/less.js"></script>
<!--<script src="scripts/angular-1.2.5.js"></script>-->
<script src="../../angular.js"></script>
<!--路由-->
<script src="scripts/angular-route.js"></script>
<!--控制器-->
<script src="controller1.js"></script>
<!--模型-->
<script src="module.js"></script>
</head>
<body class="container">
<header class="page-header"><h1>index</h1></header>
<section>
<div class="col-sm-6">
<a class="btn btn-danger btn-block" href="#one">1</a>
</div>
<div class="col-sm-6">
<a class="btn btn-primary btn-block" href="#two">2</a>
</div>
</section> <section>
<div ng-view>
占位符
</div>
</section>
</body>
</html>
index.html
one.html
<div>
第一个页面
</div>
<p>
{{title}}
</p>
<form action="">
<div class="form-group">
<label class="control-label" for="name">姓名：</label>
<input ng-model="name" type="text" id="name" class="form-control">
</div>
<div class="form-group">
<label class="control-label" for="pass">密码：</label>
<input ng-model="pass" type="text" id="pass" class="form-control">
</div>
<p>
<a href="#two?name={{name}}&pass={{pass}}" class="btn btn-primary">提交</a>
</p>
</form>
one.html
two.html
<div>
第二个页面
</div>
<div>
{{name}}{{pass}}
</div>
two.html
控制器
function textOne($scope) {
$scope.title="用户登录"
}
function textTwo($scope,$routeParams) {
console.log($routeParams);
$scope.name = $routeParams.name;
$scope.pass = $routeParams.pass;
}
controller.js
模块
//定义模块
var app = angular.module("myApp",['ngRoute']); //配置驱动类
app.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/one",{
templateUrl:"one.html",
controller:"oneCtrl"
})
.when("/two",{
templateUrl:"two.html",
controller:"twoCtrl"
})
.otherwise({
redirectTo:"/one"
})
}]); //添加控制器
app
.controller("oneCtrl",textOne)
.controller("twoCtrl",textTwo);
module
随机推荐
- （十）Unity5.0新特性------新UI系统实战
原文 Unity New GUI Tutorial – Part 1 Unity New GUI Tutorial- Part 2 Unity New GUI Tutorial – Part 3 大家 ...
- 【转】GGTalk即时通讯系统（支持广域网）终于有移动端了！（技术原理、实现、源码）
原文地址:http://www.cnblogs.com/justnow/p/4836636.html 首先要感谢大家一直以来对于GGTalk即时通讯系统的关注和支持!GGTalk即时通讯系统的不断完善 ...
- 使用css3属性transition实现页面滚动
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- phpexcel 读取日期的问题？
phpexcel 读取excel数字时,显示为一串数字(时间都是类似于这样的数字:41890.620138889),如何将数字转换为对应的日期来显示呢?特别是例如星期一这种的时间. 可以用phpexc ...
- NFS介绍
一.NFS服务介绍 NFS是 Network File system的缩写 NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机 ...
- Build System 和Test Framework overview总结
良好的自动化系统可以帮助Dev/Tester快速发现product/test code issue. 正好上一个项目结束,上个项目在自动化系统上面做得非常好.从产品开始时半年release一次到后面每 ...
- 网络结构----ISO/OSI七层网络模型和TCP/IP四层网络模型
对等实体在一次交互作用中传送的信息单位称为协议数据单元.它包含控制信息和用户数据两部分. 上下层实体之间的接口称为服务訪问点. ISO/OSI參考模型分为:物理层.数据链路层.网络层.传输层.会话层. ...
- Real-Time SQL Monitoring using DBMS_SQLTUNE
Real-Time SQL Monitoring reports are available from three locations: Enterprise Manager - Click the ...
- 380. Intersection of Two Linked Lists【medium】
Write a program to find the node at which the intersection of two singly linked lists begins. Notice ...
- SQLServer 与 MySQL
SQL Server MySQL1.getdate() NOW() 2.top 100 ...