下载送彩金8到88

書名： 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服務器請求訂單明細數據，這里我們只是簡單地把訂單號回顯到明細視圖中。

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

AngularJS入門與進階

6.2 通過URL向控制器傳遞參數