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文件内容。

上一章目录下一章