有没有什么捕鱼游戏可以赚钱

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

3.3 使用MVC思想重構價格計算器程序

通過前面兩節的學習，我們了解了MVC架構模式的概念及AngularJS框架中控制器的聲明與實例化，本節我們就使用所學的知識，以MVC設計思想對第2章的價格計算器程序進行重構，完整案例代碼如下：

代碼清單：ch03\ch03_01.html

        <!doctype html>
        <html ng-app="app">
        <head>
            <meta charset="UTF-8">
            <title>ch03_01</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body ng-controller="CalcController">
            <div>單價：<input type="number" ng-model="price" /></div><br/>
            <div>數量：<input type="number" ng-model="num" /></div><br/>
            <div>總價：{{totalPrice()}}</div>
            <script type="text/javascript">
                function CalcController（$scope）{
                    $scope.price = 10;
                    $scope.num = 1;
                    $scope.totalPrice = function() {
                        return $scope.price * $scope.num;
                    }
                }
                var app = angular.module（"app", []）;
                app.controller（"CalcController", CalcController）;
            </script>
        </body>
        </html>

在瀏覽器中運行ch03_01.html頁面，效果和第2章的價格計算器完全相同，不同的是視圖中表達式運算操作轉移到了控制器中。下面對該段代碼進行分析：

ng-controller指令用于實例化控制器對象，當AngularJS框架遇到ng-controller指令時會查找名為CalcController的構造方法實例化構造器對象。

控制器對象實例化時AngularJS會創建一個新的作用域對象，名稱為$scope，然后會把$scope對象注入控制器對象中。

接下來使用ng-model指令在作用域對象$scope和input表單之間建立數據綁定，這樣在控制器中就能夠通過$scope對象訪問表單數據了。

我們在控制器中指定$scope對象的price和num屬性值初始值分別為10和1，在頁面加載時會自動回顯到輸入框中，所以頁面加載時表單中的初始值分別為10、1。

最后在作用域對象中增加一個totalPrice()方法，用于計算價格總和，然后通過AngularJS表達式調用該業務邏輯方法即可。

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

AngularJS入門與進階

3.3 使用MVC思想重構價格計算器程序