pg电子维护多长时间

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 1246字
更新時間： 2020-11-28 23:44:34

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

官术网_书友最值得收藏!

AngularJS入門與進階

6.1 創建多視圖應用

6.1.1 使用$routeProvider創建映射

6.1.2 創建多視圖

6.1.3 通過路由切換視圖