6.1 创建多视图应用
6.1.1 使用$routeProvider创建映射
为了建立URL到AngularJS视图的映射，我们需要用到AngularJS的一个内置Provider对象$routeProvider，该对象用于创建路由映射，提供了一个when(path, route)方法和otherwise(params)方法，能够帮助我们把控制器、视图模板、URL关联起来，下面是AngularJS官方文档中对这两个方法的介绍。
（1）when(path, route)方法接收两个参数，具体如下：
① path:string类型，路由路径（和$location.path相对应），如果$location.path路径后有多余的“/”或者缺少“/”，路由依然能够匹配，并且$location.path会依据路由定义删除多余的“/”或者增加“/”。除此之外，在path中还可以使用占位符，需要使用“:”隔开，例如/ShowOrders:Num。
② route:Object类型，用于配置映射信息。该对象具有以下属性：
● controller :{string|function}类型，用于指定控制器名称或控制器构造方法。
● controllerAs :string类型，通过控制器标识符名称引用控制器。
● template : {string|function}类型，该属性可为字符串类型，用于指定视图模板，也可以是一个方法，该方法必须返回HTML模板内容。
● templateUrl : string类型，作用和template属性相同，不同的是，它用于指定视图模板文件路径。
● resolve :Object类型，用于指定注入控制器中的内容。
（2）otherwise(params)，该方法接收一个string类型的参数，用于匹配路由中未定义的URL。
下面是使用$routeProvider创建路由映射的案例，代码如下：
代码清单：ch06\ch06_01\js\app.js
var routeModule = angular.module（'routeModule', ['ngRoute']）;
routeModule.config（['$routeProvider',
function（$routeProvider）{
$routeProvider.
when（'/addOrder', {
templateUrl: 'templates/add-order.html',
controller: 'AddOrderController'
}）.
when（'/showOrders', {
templateUrl: 'templates/show-orders.html',
controller: 'ShowOrdersController'
}）.
otherwise（{
redirectTo: '/addOrder'
}）;
}]）;
如上面的代码所示，anuglar.module()方法会返回一个模块实例，可以调用模块实例的config()方法对路由进行配置。config()方法会在模块加载时被执行，主要用于对服务进行配置。在上面的代码中，我们在config()参数方法中注入了一个AngularJS内置$routeProvider对象，然后使用$routeProvider的when()方法定义了两个路由，URL分别为/addOrder和/showOrders，把它们分别映射到视图templates/add-order.html和templates/show-orders.html。
需要注意的是，AngularJS的路由模块作为一个单独的模块，模块名称为ngRoute，我们如果在自定义的模块中使用它，需要添加ngRoute模块依赖，代码如下：
var routeModule = angular.module（'routeModule', ['ngRoute']）;
6.1.2 创建多视图
前面我们使用$routeProvider对象把/addOrder和/showOrders映射到两个视图templates/add-order.html和templates/show-orders.html。接下来我们来创建这两个视图。视图内容很简单，具体内容如下：
代码清单：ch06\ch06_01\templates\add-order.html
<div>
<h3>新增订单页面</h3>
</div>
代码清单：ch06\ch06_01\templates\show-orders.html
<div>
<h3>显示订单列表页面</h3>
</div>
6.1.3 通过路由切换视图
前面我们通过$routeProvider对象配置了路由，并创建了视图页面，接下来我们就在主页面中实现多视图的切换，具体代码如下：
代码清单：ch06\ch06_01\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 100px;
}
</style>
</head>
<body>
<div class="mainDiv">
<! --导航栏-->
<ul class="nav nav-tabs">
<li><a href="#/showOrders">
<span class="glyphicon glyphicon-th-list"> </span> 订单列表</a>
</li>
<li><a href="#/addOrder">
<span class="glyphicon glyphicon-plus"> </span> 新增订单</a>
</li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
在浏览器中预览ch06\ch06_01\index.html页面，效果如图6.2所示，单击“订单列表”链接时，显示订单列表视图内容，而单击“新增订单”链接时，则显示新增订单视图内容。
图6.2 AngularJS多视图应用案例
AngularJS路由模块名称为ngRoute，作为一个单独的模块定义在angular-route.js文件中，所以我们必须在页面中将其引入，具体如下：
<script src="/angular-1.5.5/angular.js"></script>
<script src="/angular-1.5.5/angular-route.js"></script>
ng-view是AngularJS的一个内置指令，用于定义一个视口。视口中可以加载6.1.2小节中创建的视图内容。ng-view指令有以下几种使用形式：
<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>
需要注意的是，IE浏览器并不支持<ng-view></ng-view>这种形式，如果想兼容IE，就尽量不使用这种形式。
在上面的案例中，我们在页面中新增了两个超链接，分别为“订单列表”和“新增订单”，指向的地址分别为#/showOrders和#/addOrder。当单击“订单列表”链接时，访问路径为/showOrders, AngularJS会根据路由定义来查找视图，然后在ng-view指令指定视口中加载视图内容，所以会显示show-orders.html文件的内容。同样的道理，单击“新增订单”时会显示add-order.html文件内容。