上QQ阅读APP看书，第一时间看更新
6.3 ng-template指令的使用
在本章前面的两个案例中，我们把每个视图都写在一个单独的HTML文件中，有时候视图内容比较少，我们可能会希望把不同的视图集成到同一个页面中，或者要开发一个单页面应用（SPA），就可以使用ng-template指令来实现。下面是一个ng-template指令的使用案例：
代码清单：ch06\ch06_03.html
<!doctype html>
<html ng-app="routeModule">
<head>
<meta charset="UTF-8">
<title>ch06_03</title>
<script src="/angular-1.5.5/angular.js"></script>
<script src="/angular-1.5.5/angular-route.js"></script>
</head>
<body>
<div>
<a href="#/view1">view1</a> <a href="#/view2">view2</a>
</div>
<div ng-view></div>
<script type="text/ng-template" id="/view1.html">
<h1>View1内容<h1>
</script>
<script type="text/ng-template" id="/view2.html">
<h1>View2内容<h1>
</script>
<script>
var routeModule = angular.module（'routeModule', ['ngRoute']）
routeModule.config（['$routeProvider',
function（$routeProvider）{
$routeProvider.
when（'/view1', {
templateUrl: '/view1.html'
}）.
when（'/view2', {
templateUrl: '/view2.html'
}）
}]）;
</script>
</body>
</html>
在上面的案例中，我们通过<script>标签和ng-template指令定义了两个视图模板，id属性分别为/view1.html和/view2.html。
<script type="text/ng-template" id="/view1.html">
<h1>View1内容<h1>
</script>
<script type="text/ng-template" id="/view2.html">
<h1>View2内容<h1>
</script>
路由的定义和前面介绍的相同，templateUrl为<script>标签的id属性。
routeModule.config（['$routeProvider',
function（$routeProvider）{
$routeProvider.
when（'/view1', {
templateUrl: '/view1.html'
}）.
when（'/view2', {
templateUrl: '/view2.html'
}）
}]）;
在浏览器中预览ch06_03.html，效果如图6.5所示。
图6.5 ng-template指令使用案例
单击view1、view2链接，视口中显示对应<script>标签中定义的视图内容。从中可以看出使用ng-template同样能够达到多视图切换效果。