- AngularJS入门与进阶
- 江荣波
- 577字
- 2020-11-28 23:44:34
6.2 通过URL向控制器传递参数
前面我们已经学习了如何定义路由，并通过路由机制实现了一个简单的多视图应用，本节我们将学习AngularJS路由如何通过URL传递参数。
如图6.3所示，假如我们有这样一个应用场景，通过URL中传递的订单号（orderId）来获取某条订单的明细。
图6.3 通过orderId参数获取订单明细
在路由定义时，我们可以在URL中增加一个参数orderId，用冒号隔开，如下面的代码所示。
代码清单：ch06\ch06_02\js\app.js
var routeModule = angular.module（'routeModule', ['ngRoute']）;
routeModule.config（['$routeProvider',
function（$routeProvider）{
$routeProvider.
when（'/showOrder/:orderId', {
templateUrl: 'templates/order-details.html',
controller: 'ShowOrderController'
}）
}]）;
routeModule.controller（"ShowOrderController”, function（$scope, $routeParams）{
$scope.order_id = $routeParams.orderId;
}）;
为了获取URL中传递的参数，我们在控制器中注入$routeParams服务，通过$routeParams. orderId属性访问URL中传递的参数，这里把参数保存在$scope对象的order_id属性中：
$scope.order_id = $routeParams.orderId;
我们在订单明细视图order-details.html中简单地把URL中的orderId参数回显到页面中，order-details.html内容如下：
代码清单：ch06\ch06_02\templates\order-details.html
<h2>订单号 #{{order_id}}</h2>
此处为订单明细．.. <b>#{{order_id}}</b>.
接下来可以在订单列表页面中增加几条订单数据，在URL中传递不同的订单号，单击链接后加载订单明细视图，订单列表页面内容如下：
代码清单：ch06\ch06_02\index.html
<!doctype html>
<html ng-app="routeModule">
<head>
<meta charset="UTF-8">
<title>ch06_01</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.min.css"/>
<script src="/angular-1.5.5/angular.js"></script>
<script src="/angular-1.5.5/angular-route.js"></script>
<script src="js/app.js"></script>
<style type="text/css">
.mainDiv{
margin: 25px 50px 75px 50px;
}
</style>
</head>
<body>
<div class="mainDiv">
<! --导航栏-->
<ul class="nav nav-tabs">
<li><a href="#">
<span class="glyphicon glyphicon-th-list"> </span> 订单列表</a>
</li>
</ul>
<div>
<table class="table">
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1102 </td>
<td>笔记本电脑</td>
<td><a href="#/showOrder/1102">查看明细</a></td>
</tr>
<tr class ="info">
<td>4531</td>
<td>移动硬盘</td>
<td><a href="#/showOrder/4531">查看明细</a></td>
</tr>
<tr class="active">
<td>1036</td>
<td>IPhone</td>
<td><a href="#/showOrder/1036">查看明细</a></td>
</tr>
</tbody>
</table>
</div>
<div ng-view></div>
</div>
</body>
</html>
接下来可以在浏览器中运行ch06\ch06_02\index.html页面，效果如图6.4所示。
图6.4 通过URL向控制器传递参数案例
当我们单击不同商品的“查看明细”链接时，可以到控制器中获取订单号。在实际项目开发过程中，我们可能会在控制器中根据订单号向Web服务器请求订单明细数据，这里我们只是简单地把订单号回显到明细视图中。