我们将利用Angularjs 和 Bootstrap，开发一个前端应用实例，通过这一次简单的项目实战，引领大家进入AngularJS前端开发的殿堂，并向大家介绍一下几个知识点：
- MVC 基础，通过项目实例，让大家初步体会MVC设计模式的应用。
- 构建我们第一个AngularJS应用，通过一个实际用例的开发，大家可以对前端开发获得一定的感性认识。
- 初步了解AngularJS三个最重要的组成部件，他们分别是Model, View, 和Controller.
- 初步了解AngularJS的Scope对象的使用。
MVC模式的基本介绍:
MVC是一种UI架构模式，它的目的是将应用的功能分解到专门的模块，实现模块的重用性，减少模块间的耦合度，增强系统的鲁棒性。MVC模式主要分成三部分：
Model: 用来存储系统数据
View: 用来实现系统的UI界面
Controller: 用于衔接Model和View.
在我看来，学习的最好方式是实践，我们将开发一个前端应用实例，通过这个实例，一方面我们可以加深对AngularJS框架的理解，同时我们也能感受到MVC模式如何嵌入到开发流程当中。
应用介绍（代码路径：http://pan.baidu.com/s/1eRW3qgU)
我们将做一个猜数字的web应用，界面如下： 
应用后台会随机生成一个范围在1到1000之内的随机数，用户在文本框中输入猜测的数字，如果输入正确，应用会在下方弹出绿色的提示，如果错误，例如输入的数字比后台生成的数字大或者小，那么应用会弹出相应提示，例如： 
在底部显示出的数字表明我们猜测了多少次。
整个应用的代码目录结构如下： 
由于我们当前做的是一个简单的应用实例，所以我们将各个模块的代码放在一起，以后我们构建大规模的前端应用时，我们会非常小心的去安排整个项目的代码目录结构。
在上图所表示的文件组成中，angular.js 是我们赖以开发应用的框架文件，bootstrap.min.css是用于设计UI界面的界面库文件，而numberGuessing.html 将是我们要开发的应用主体文件。接下来我们将一步一步向numberGuessing.html添加代码，逐步增加应用的功能。
首先，我们要做的是构建一个简单的html模板，在此模板上，我们才好慢慢添加功能，模板代码如下：