$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
随机推荐
- nginx 配置一个文件下载服务
cat openvpn.conf server { listen ; server_name localhost; location / { root /home/openvpn/client_fil ...
- RecSys Challenge 2015
[The Task] Given a sequence of click events performed by some user during a typical session in an e- ...
- Lintcode---线段树查询（区间最大值）
对于一个有n个数的整数数组,在对应的线段树中, 根节点所代表的区间为0-n-1, 每个节点有一个额外的属性max,值为该节点所代表的数组区间start到end内的最大值. 为SegmentTree设计 ...
- 【UNIX网络编程（四）】TCP套接字编程具体分析
引言: 套接字编程事实上跟进程间通信有一定的相似性,可能也正由于此.stevens这位大神才会将套接字编程与进程间的通信都归为"网络编程",并分别写成了两本书<UNP1> ...
- Atitit.http连接合并组件 ConnReducerV3 新特性
Atitit.http连接合并组件 ConnReducerV3 新特性 D:\0workspace\AtiPlatf_cms\src\com\attilax\util\ConnReducerV2. ...
- Sublime Text 2 和 Verilog HDL
Sublime Text 2 和 Verilog HDL Date Fri 04 July 2014 Tags Sublime Text / Vivado Sublime Text 代码编辑器之于程 ...
- position固定菜单栏
position:fixed来实现. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- tp框架事务处理
当我们需要同时对多个表进行操作的时候就有必要进行事务处理,首先你的数据库和数据表必须满足事务处理,即表引擎为InnoDB 下面为一个demo //事务:表必须是innodb //删除主表$mod ...
- Jquery学习笔记（10）--ajax删除用户，使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: <!DOCTYPE html> <html lang=&quo ...
- Android Listview 去除边框
最近在做一个时间轴的功能,因为原生效果的Listview有item分隔边框,所以就需要去除边框,调用listview的setDivider方法就可以了: listView.setDivider(nul ...