利用Angularjs和Bootstrap前端开发案例实战

我们将利用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模式如何嵌入到开发流程当中。

应用介绍（代码路径：)

我们将做一个猜数字的web应用，界面如下：

应用后台会随机生成一个范围在1到1000之内的随机数，用户在文本框中输入猜测的数字，如果输入正确，应用会在下方弹出绿色的提示，如果错误，例如输入的数字比后台生成的数字大或者小，那么应用会弹出相应提示，例如：

在底部显示出的数字表明我们猜测了多少次。

整个应用的代码目录结构如下：

由于我们当前做的是一个简单的应用实例，所以我们将各个模块的代码放在一起，以后我们构建大规模的前端应用时，我们会非常小心的去安排整个项目的代码目录结构。

在上图所表示的文件组成中，angular.js 是我们赖以开发应用的框架文件，bootstrap.min.css是用于设计UI界面的界面库文件，而numberGuessing.html 将是我们要开发的应用主体文件。接下来我们将一步一步向numberGuessing.html添加代码，逐步增加应用的功能。

首先，我们要做的是构建一个简单的html模板，在此模板上，我们才好慢慢添加功能，模板代码如下：

Guess The Number !

angular.module 函数生成并返回一个module对象，这个对象含有一个接口叫controller,通过这个接口，可以把我们自己开发的controller功能单元放入到module里面，从上面代码可以看出，我们在module中放入一个controller单元，这个单元的名字就叫GuessTheNumberController，也就是controller函数的第一个输入参数，第二个输入参数是controller单元的功能逻辑主体，也就是我们前头开发的GuessTheNumberController函数。

做完上面的步骤后，我们的应用就开发完毕，此时可从浏览器加载我们的html，于是就可以看到具体效果了。

在收尾前，我们深入代码看看，AngularJS是如何将各个模块整合起来，形成一个完整的前端应用的。在代码中，有一些特殊符号和属性，特殊符号，例如：{{ }},特殊属性形如： ng-app,ng-controller等。在Angular语境下，{{ 和 }} 合在一起称为插值符号，ng-* 形式的属性，称之为Angular指令。Angular 会把夹在{{ 和 }} 中的变量转换为变量对应的数值，例如下面的代码片段：

numOfTries表示用户尝试猜测了多少次，如果numOfTries的值是0的话，AngularJS会把上面的代码转义为：

于是浏览器便会将界面渲染成如下情形：

AngularJS指令是一个复杂的技术知识点，在后续的讨论中，我们会进行详细的探讨，这里我们简单介绍下，AngularJS指令的作用，主要扩展HTML的语法功能，指令是AngularJS框架中，功能最为强大的地方。我们简单介绍下代码中用到的AngularJS指令.

ng-controller: 该指令将Controller和HTML表示的View衔接起来，使用该指令，View才能够访问Controller设定的变量和接口，大家可以尝试在代码中把 ng-model=ng-controller=”GuessTheNumberController” 这一句去掉，然后看看有什么结果。

ng-model: 将Model中的变量与View中的控件进行双向绑定，例如：

这条语句将model中的变量userGuess与界面上的输入文本框绑定，当文本框中的数值改变时，userGuess对应的值也跟着改变，反之，如果guess的值在后台改变了，那么文本框中的内容也做相应的变化。

ng-click：将界面产生的点击事件跟Controller的处理逻辑连接起来，例如：

上面的代码，将”确定”按钮的点击事件跟Controller的verifyGuess()函数连接起来，一旦按钮被点击，这个函数就会被执行。

ng-show: 用来控制View的控件是否要显示出来，如果ng-show 对应的表达式的值为true,那么控件就显示，如果为false，那么控件就不显示，例如：

上面的代码，功能是，当变量deviation 的值小于0时，段落元素P的内容就会显示到界面上。

AngularJS是一个强大但也是比较复杂的前端开发框架，我们这一实例作用仅仅是帮大家初步认识AngularJS的强大功能，先获得一定的感性认识，以便为我们今后理性的分析掌握整个AngularJS前端开发技术打下坚实的基础。

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。