使用Angularjs和Bootstrap前端开发案例进行战斗

我们将使用Angularjs和Bootstrap开发一个前端应用程序示例。通过这个简单的项目，我们将带领大家走进AngularJS前端开发的殿堂，向大家介绍几个知识点：1。MVC基础，让大家通过项目实例对MVC设计模式的应用有一个初步的了解。2.构建我们的第一个AngularJS应用，通过开发一个实际的用例，我们可以获得一定的前端开发的感性认识。3.了解AngularJS最重要的三个组件，即模型、视图和控制器。4 .了解AngularJS的Scope对象的使用。

MVC模式：基本介绍

MVC是一种UI架构模式，其目的是将应用功能分解为特殊的模块，实现模块的可重用性，降低模块之间的耦合度，增强系统的健壮性。MVC模式主要分为三个部分：Model:用于存储系统数据，View:用于实现系统的UI界面，Controller:用于连接Model和View。

在我看来，最好的学习方法是练习。我们将开发一个前端应用程序示例。通过这个例子，一方面可以加深我们对AngularJS框架的理解，同时也可以感受到MVC模式是如何嵌入到开发过程中的。

应用介绍(代码路径：http://xiaozai.jb51.net/201608/yuanma/bootstrap-MOOC(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；字符集=UTF-8 '标题猜猜数字！/title link href=' bootstrap . min . CSS ' rel='样式表'/head body script src=' http : angular . js '/script/body/html在上面的模板代码中，请注意一行“meta…charset=”UTF=8“utf=8”

这一行的目的是让浏览器正确显示中文。没有这一行，浏览器会显示中文代码。在模板中，我们将首先介绍稍后使用的框架代码和UI界面库代码。完成后，我们将其加载到浏览器中，查看是否有任何错误。如果是，我们现在看到的是一片空白：

接下来，我们将开发应用程序的后台逻辑代码，我们将首先确定要使用的几个变量：

OriginalVal，用于存储生成的随机数userGuess，用户输入的当前猜测数numOfTries，并记录用户尝试了多少次。偏差：记录用户输入的数字和背景随机数之间的差异。如果用户输入的数字较大，则偏差为0；如果输入很小，偏差为0；如果输入正确，则偏差==0

控制器模块的实现

控制器用于连接模型和视图模块，系统的业务逻辑也在控制器中实现。当用户在界面上做一些操作，如点击按钮、输入内容时，控制器从视图中接收相应的信息，然后触发相应的事件处理逻辑。例如，用户在界面上输入数字并点击确定按钮后，控制器从视图中获取输入值，然后从模型中取出应用程序生成的随机数，比较两个隔间，并将比较结果偏差返回给视图，视图根据返回的偏差值显示相应的界面变化。让我们看看控制器的逻辑主体是如何实现的：

函数guess number controller($ scope){ $ scope . verifyguess=function(){ $ scope . variation=$ scope . original-$ scope . user guess；$ scope . NumofThErs=$ scope . NumofThErs 1；} $ scope . initializegame=function(){ $ scope . NumofFits=0；$ scope . originalval=math . floor((math . random()* 1000)1)；$ scope.userGuess=null$ scope.deviation=null} $ scope . initializegame()；}GuessTheNumberController函数建立了Model对象的数值属性，这些数值的含义前面已经提到过。同时，Controller函数还派生了两个接口调用，一个是verifyGuess。点击界面上的确定按钮后，View模块会调用界面判断用户输入的数据是否正确，调用会更新偏差和numOfTries的值。

InitializeGame用于初始化整个系统应用，首先生成随机数，然后初始化一些变量为空。

在我们的Controller主函数中，传入了一个参数$scope，它由AngularJS传递给我们。基本相当于MVC模式中的M，也就是Model。它类似于数据库，专门用于存储应用程序数据和逻辑代码。如您所见，在initializeGame调用中，控制器将numOfTries、originalVal和其他数据放入$scope对象中，在verifyGuess调用中，从$scope获取这些数据进行计算和修改。

将上述控制器代码添加到我们的模板文件numberGuessing.html后，结果如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；字符集=UTF-8 '标题猜猜数字！/title link href=' bootstrap . min . CSS ' rel='样式表'/流浆体脚本src=' http : angular . js '/脚本脚本类型='text/javascript '函数guessthenumber controller($ scope){ $ scope . verifyguess=function(){ $ scope . variation=$ scope . original-$ scope . user guess；$ scope . NumofThErs=$ scope . NumofThErs 1；} $ scope . initializegame=function(){ $ scope . NumofFits=0；$ scope . originalval=math . floor((math . random()* 1000)1)；$ scope.userGuess=null$ scope.deviation=null} $ scope . initializegame()；}/脚本/正文appview应用的html界面设计

视图，即MVC中的视图，实际上是通过图形界面显示模型中的数据。我们目前的应用很简单。基于简单的原则，界面设计的用户体验可能不是很好，但是我们快速了解如何使用AngularJS和Bootstrap快速构建一个程序的前端界面就足够了。

让我们看看接口的结构，并将控制器与接口逻辑集成在一起：

body ng-app=' app ' div class=' container ' ng-controller=' guess number controller ' H2 guess numbers！/h2 p class='well lead '请猜猜计算机生成的随机数。范围从1到1000。/p标签请用：确认/标签输入类型=' number ' ng-model=' user guess '/Button ng-click=' verifyguess()' class=' btnbtn-primary BTN-sm '/Button Button ng-click=' initializegame()' class=' btnbtn-warning TN-sm '重新开始/Button p ng-show='偏差0' class=' alert alert-warning '，你出价太高了！/p p ng-show='偏差0' class=' alert alert-warning '，它更少，添加更多，添加更多。/p p ng-show='偏差===0' class='警戒警戒警戒-成功'，我真的告诉你！/p /p p class='text-info '你猜的次数是： span class=' badge ' { { numoftries } }/spanp/div MVC，也就是Controller，它是视图和Model之间的桥梁。如果我们想把这三者联系起来，我们需要把它们都嵌入到AngularJS中

要将视图嵌入到AngularJS中，上面的代码语句：

body ng-app='app '

属性ng-app告诉Angular，主体标签中的HTML代码将作为视图部分嵌入到AngularJS框架中，作为ng-app属性值的“app”通知Angular js框架加载一个名为“app”的模块。这个模块相当于一个仓储仓库。我们将前端应用程序的各种功能分解成各种单元，存储在名为app的模块中。控制器和模型也是功能单元。稍后，我们会看到它们将被添加到名为app的模块中，AngularJS框架将从这个模块中取出两个名为Controller和Model的单元来使用。

接下来，我们首先将这个名为app的模块放入AngularJS框架中，代码如下：

脚本类型=' text/JavaScript ' angular . module(' app '，[])函数guetshenumberccontroller($ scope){ 0.}脚本，这样我们在AngularJS框架中就有了一个名为app的模块。并且模块通过ng-app=“app”与接口关联。接下来，我们需要将Controller单元放入app模块，代码如下：

脚本类型=' text/JavaScript ' angular . module(' app '，[])。控制器(' GuessTheNumberController '，GuessTheNumberController)；函数guestshenumbercontroller($ scope){ 0.}/scriptangular。module函数生成并返回一个module对象，该对象包含一个名为controller的接口。我们可以将自己开发的控制器功能单元放入模块中。从上面的代码可以看出，我们在模块中放入了一个控制器单元，它的名字叫做GuessTheNumberController，它是控制器函数的第一个输入参数，第二个输入参数是控制器单元的功能逻辑体，它是前面开发的GuessTheNumberController函数。

完成上述步骤后，我们的应用程序就开发出来了。此时，我们可以从浏览器加载我们的html，这样我们就可以看到具体的效果。

在结束之前，让我们深入代码，看看AngularJS如何集成各种模块，形成一个完整的前端应用程序。代码中有一些特殊的符号和属性，比如{{}}，还有一些特殊的属性，比如ng-app和ng-controller。在Angular上下文中，{ {和}}一起称为插值符号，ng-*形式的属性称为Angular指令。Angular将夹在{ {和}}之间的变量转换为相应的变量值，例如下面的代码片段：

P class='text-info '您猜测的次数是： span class=' badge ' { { numfrits } }/spanp

NumOfTries指示用户尝试猜测的次数。如果numOfTries的值为0，AngularJS将转义上述代码，如下所示：

P class='text-info '您猜测的次数是： span class='badge'0/spanp

然后浏览器将呈现如下界面：

AngularJS指令是一个复杂的技术知识点。在下面的讨论中，我们将详细讨论它。这里我们简单介绍一下AngularJS指令的功能，主要是扩展HTML的语法功能。指令是AngularJS框架中最强大的地方。让我们简单介绍一下代码中使用的AngularJS指令。

这个指令把控制器和用HTML表达的视图连接起来。只有使用该指令，视图才能访问控制器设置的变量和接口。你可以试着删除代码中的句子ng-model=ng-controller=“猜测数字控制器”，看看结果如何。

Ng-Model:在两个方向绑定模型中的变量和视图中的控件，例如：

输入类型='number' ng-model='userGuess'/

该语句将模型中的变量userGuess绑定到接口上的输入文本框。当文本框中的值发生变化时，userGuess的相应值也会发生变化。相反，如果猜测值在背景中发生变化，文本框中的内容也会相应变化。

Ng-click:将界面生成的点击事件与控制器的处理逻辑连接起来，例如：

按钮ng-click=' verifyguess()' class=' btnbtn-primarybtn-sm ' ok/按钮

上述代码将“确定”按钮的点击事件与控制器的验证猜测()功能联系起来。一旦按钮被点击，该功能将被执行。

Ng-show:用于控制是否显示视图控件。如果ng-show对应的表达式的值为真，则显示控件；如果为false，则控件将不显示。例如：

P ng-show='偏差0' class=' alert alert-warning '，你的出价太高了！/p

上述代码的作用是当变量偏离值小于0时，界面上会显示段落元素p的内容。

AngularJS是一个强大但复杂的前端开发框架。我们的例子只是帮助大家初步了解AngularJS的强大功能，先获得一定的感性认识，为我们以后理性分析掌握AngularJS的整个前端开发技术打下坚实的基础。

如果你还想深入学习，可以点击这里学习，然后附上3个精彩话题给大家：

引导学习教程

引导实用教程

引导插件教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。