GuessTheNumberController 函数设立起了Model对象的数值属性，这些数值的意义在前头我们已经提到过，同时这个Controller函数还导出了两个接口调用，一个是verifyGuess，当界面上的确定按钮点击后，View模块会调用该接口，用于判断用户输入的数据是否正确，同时该调用会更新deviation 和 numOfTries两个属性的值。
initializeGame 用于对整个系统应用进行初始化，先是生成随机数，然后初始化一些变量为空。
在我们的Controller主体函数中，传入了一个参数$scope, 这个参数是AngularJS传给我们的，它基本上等价于MVC模式中的M,也就是Model, 它类似于一个数据库，专门用来存储应用的数据和逻辑代码，大家可以看到，在initializeGame调用中，Controller将numOfTries, originalVal等这些数据放入到$scope对象中，在verifyGuess调用中，又从$scope拿到这些数据进行计算修改。
上面的Controller代码加入到我们的模板文件numberGuessing.html中后，结果如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="https://www.jb51.net/bootstrap.min.css"> </head> <body > <script src="https://www.jb51.net/angular.js"></script> <script type="text/javascript"> function GuessTheNumberController($scope) { $scope.verifyGuess = function () { $scope.deviation = $scope.originalVal - $scope.userGuess; $scope.numOfTries = $scope.numOfTries + 1; } $scope.initializeGame=function() { $scope.numOfTries = 0; $scope.originalVal = Math.floor((Math.random() * 1000) + 1); $scope.userGuess = null; $scope.deviation = null; } $scope.initializeGame(); } </script> </body> </html>
App View 应用的界面设计
视图，也就是MVC中的View, 其实就是将Model中的数据通过图形界面展现出来。我们当前的应用简单，基于简单原则，界面设计的用户体验未必很好，但足以让我们快速理解如何利用AngularJS结合Bootstrap快速构建一个程序的前端界面。
我们看看界面的搭建，同时把Controller跟界面逻辑整合起来：
<body ng-app="app"> <div ng-controller="GuessTheNumberController"> <h2>猜数字 !</h2> <p>请猜出电脑生成的随机数，它的范围在1到1000之间.</p> <label>请您出手: </label><input type="number" ng-model="userGuess"/> <button ng-click="verifyGuess()">确定</button> <button ng-click="initializeGame()">重来</button> <p> <p ng-show="deviation<0">爷，您出价过高了！</p> <p ng-show="deviation>0">爷，少了，再加点，再加点.</p> <p ng-show="deviation===0">爷，还真让您说准了!.</p> </p> <p>您猜过的次数是 : <span>{{numOfTries}}</span><p> </div>
MVC中的C,也就是Controller,它是界面(view)和数据(Model)的桥梁，要想把这三者关联起来，我们需要把他们三个都嵌入到AngularJS框架中，然后依赖于AngularJS的框架机制，实现三者间的相互联动。
为了将视图嵌入到AngularJS, 上面中的代码语句：
<body ng-app="app">
ng-app 这条属性告诉Angular，body 标签内的HTML代码将作为视图部分嵌入到AngulaJS框架中，”app”作为ng-app属性值，通知AngularJS框架去加载一个名为”app”的模块(module)。这个模块相当于一个存储仓库，我们把前端应用的各种功能分解成各个单元，这些单元就存放在名为app的模块里，controller, model 也都是功能单元，稍后我们会看到他们会被加入到名为app的模块里，AngularJS框架会从这个模块中拿出controllre 和 model这两个单元来使用。
接下来，我们先将这个名为app的模块放入AngularJS框架，代码如下：
<script type="text/javascript"> angular.module('app',[]) function GuessTheNumberController($scope) { .... } <script>
这样我们在AngularJS框架中就有了名为app的模块，并且通过ng-app=”app”将该模块和界面关联了起来，接下来，我们需要把Controller单元放入到app模块中，代码如下：
<script type="text/javascript"> angular.module('app',[]) .controller('GuessTheNumberController', GuessTheNumberController); function GuessTheNumberController($scope) { .... } </script>