我们将利用Angularjs 和 Bootstrap，开发一个前端应用实例，通过这一次简单的项目实战，引领大家进入AngularJS前端开发的殿堂，并向大家介绍一下几个知识点：
1.MVC 基础，通过项目实例，让大家初步体会MVC设计模式的应用。
2.构建我们第一个AngularJS应用，通过一个实际用例的开发，大家可以对前端开发获得一定的感性认识。
3.初步了解AngularJS三个最重要的组成部件，他们分别是Model, View, 和Controller.
4.初步了解AngularJS的Scope对象的使用。
MVC模式的基本介绍:
MVC是一种UI架构模式，它的目的是将应用的功能分解到专门的模块，实现模块的重用性，减少模块间的耦合度，增强系统的鲁棒性。MVC模式主要分成三部分：
Model: 用来存储系统数据
View: 用来实现系统的UI界面
Controller: 用于衔接Model和View.
在我看来，学习的最好方式是实践，我们将开发一个前端应用实例，通过这个实例，一方面我们可以加深对AngularJS框架的理解，同时我们也能感受到MVC模式如何嵌入到开发流程当中。
应用介绍（代码路径：(jb51.net).rar)
我们将做一个猜数字的web应用，界面如下：
应用后台会随机生成一个范围在1到1000之内的随机数，用户在文本框中输入猜测的数字，如果输入正确，应用会在下方弹出绿色的提示，如果错误，例如输入的数字比后台生成的数字大或者小，那么应用会弹出相应提示，例如：
在底部显示出的数字表明我们猜测了多少次。
整个应用的代码目录结构如下：
由于我们当前做的是一个简单的应用实例，所以我们将各个模块的代码放在一起，以后我们构建大规模的前端应用时，我们会非常小心的去安排整个项目的代码目录结构。
在上图所表示的文件组成中，angular.js 是我们赖以开发应用的框架文件，bootstrap.min.css是用于设计UI界面的界面库文件，而numberGuessing.html 将是我们要开发的应用主体文件。接下来我们将一步一步向numberGuessing.html添加代码，逐步增加应用的功能。
首先，我们要做的是构建一个简单的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> </body> </html>
在上面的模板代码中，注意到有一行 ” meta… charset=”UTF=8” “
这行的目的是让浏览器正确的显示中文，如果没有这一行，浏览器在显示中文时会出现代码，在模板中，我们先将后面要使用到的框架代码和UI界面库代码引入。完成后，我们将其加载到浏览器，看看有没有错误，如果没错的话，当前我们看到的是一片空白：
接下来，我们将开发应用的后台逻辑代码，我们先确定几个要用到的变量：
originalVal , 用来存储生成的随机数
userGuess, 存储用户当前输入的猜测数字
numOfTries, 记录用户尝试了多少次
deviation: 记录用户输入的数字与后台随机数的差别，如果用户输入的数字大了，那么deviation > 0; 输入小了， devitation < 0;如果输入正确， 那么devitation == 0
Controller 模块的实现
Controller用于连接Model和View两个模块,系统的业务逻辑也放在Controller中实现。当用户在界面端做某些操作，例如点击按钮，输入内容时，Controller接收到View端的相应信息，然后Controller触发相应的事件处理逻辑，例如用户在界面输入数字，点击确定按钮后，Controller从View拿到输入的数值，然后从Model拿出应用生成的随机数，两厢比较，把比较的结果deviation返回给View, View根据返回的deviation值，展现相应的界面变化。我们看看Controller的逻辑主体是如何实现的：
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(); }