AngularJS入门与进阶
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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表达式调用该业务逻辑方法即可。

上一章目录下一章