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

应用介绍（代码路径：http://xiazai.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; charset=UTF-8">
 <title>Guess The Number !</title>
 <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body >
 <script src="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();
 }

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="bootstrap.min.css" rel="stylesheet">
</head>
<body >
 <script src="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 class="container" ng-controller="GuessTheNumberController">
 <h2>猜数字 !</h2>
 <p class="well lead">请猜出电脑生成的随机数，它的范围在1到1000之间.</p>
 <label>请您出手: </label><input type="number" ng-model="userGuess"/>
 <button ng-click="verifyGuess()" class="btn btn-primary btn-sm">确定</button>
 <button ng-click="initializeGame()" class="btn btn-warning btn-sm">重来</button>
 <p>
 <p ng-show="deviation<0" class="alert alert-warning">爷，您出价过高了！</p>
 <p ng-show="deviation>0" class="alert alert-warning">爷，少了，再加点，再加点.</p>
 <p ng-show="deviation===0" class="alert alert-success">爷，还真让您说准了!.</p>
 </p>
 <p class="text-info">您猜过的次数是 : <span class="badge">{{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>

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

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

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

<p class="text-info">您猜过的次数是 : <span class="badge">{{numOfTries}}</span><p>

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

<p class="text-info">您猜过的次数是 : <span class="badge">0</span><p>

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

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

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

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

<input type="number" ng-model="userGuess"/>

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

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

<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">确定</button>

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

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

<p ng-show="deviation<0" class="alert alert-warning">爷，您出价过高了！</p>

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

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

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

赞 (0)

相关推荐

  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息.但是用户地址太长了,不好显示.所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址. 效果如下图: 通过查阅资料,选择使用ngDialog来实现,ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口.ngDialog非常小(?2K),拥有简约的API,通

  • 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery  对 ajax的

  • Bootstrap与Angularjs的模态框实例代码

    Bootstrap与Angularjs的模态框实例代码

    先给大家展示下效果图,感兴趣的朋友参考下实现代码吧 效果图如下所示: 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.

  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascr

  • angularjs封装bootstrap时间插件datetimepicker

    angularjs封装bootstrap时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

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

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

    我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点:  1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用.  2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识.  3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller.  4.初步了解Angula

  • Bootstrap前端开发案例一

    Bootstrap前端开发案例一

    现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发.(后面会总结一些less的使用) 学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/ 下面是部分目标效果图: 下面我就总结一个小Demo中的技巧和原理: 第一步.http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解

  • Bootstrap前端开发案例二

    Bootstrap前端开发案例二

    我接着前面的一篇布局接着写,前一篇我已经完成了导航条和广告的布局. 开始继续码起来: 我想最终实现的效果图是这样的,如下:分了三个页面截图,太大了: 接着上次的未完成的,继续码起来: 第五步.增加栅格系统,我选择了三列的布局col-md-4;满格是12,4是12的三分之一,还可以响应式布局,设置多个栅格: <div class="container" id="tag_container"> <div class="row">

  • ZooKeeper开发实际应用案例实战

    ZooKeeper开发实际应用案例实战

    目录 项目背景介绍 面临问题 如何解决 代码讲解 数据服务器 检索服务器 总结 附:完整代码 数据服务端代码 检索服务端代码 项目背景介绍 首先给大家介绍一下本文描述项目的情况.这是一个检索网站,它让你能在几千万份复杂文档数据中检索出你所需要的文档数据.为了加快检索速度,项目的数据分布在100台机器的内存里,我们称之为数据服务器.除了数据,这100台机器上均部署着检索程序.这些server之外,还有数台给前端提供接口的搜索server,这些机器属一个集群,我们称之为检索服务器.当搜索请求过来时,

  • Android多功能时钟开发案例（实战篇）

    上一篇为大家介绍的是Android多功能时钟开发基础内容,大家可以回顾一下,Android多功能时钟开发案例(基础篇) 接下来进入实战,快点来学习吧. 一.时钟 在布局文件中我们看到,界面上只有一个TextView,这个TextView的作用就是显示一个系统的当前时间,同时这个时间还是一秒一秒跳的,要实现一秒一秒的跳就需要我们每隔一秒就要刷新一下,同时我们这里还考虑了切换到另一个Tab的时候,这个时间就不跳动了,这样就会减少这个对系统的占用,考虑到了这点我们在这里用到了Handler,通过han

  • 利用HBuilder打包前端开发webapp为apk的方法

    利用HBuilder打包前端开发webapp为apk的方法

    现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功

  • 如何利用AngularJS打造一款简单Web应用

    如何利用AngularJS打造一款简单Web应用

    目前不同类型的Web开发人员都在广泛使用AngularJS,这套卓越的框架也充分证明了自身满足各类不同需求的能力.作为一名Web开发人员,无论大家是刚刚入门的新手还是已经拥有丰富的实践经验,选择一款优秀的框架都是必要的工作前提,而AngularJS正是这样一套理想的解决方案.在使用AnguarJS的过程中,大家可以同时学习到更多与应用程序开发相关的知识以及如何构建起更出色.更具吸引力的应用成果.如果大家希望在应用程序的创建工作中采取各类最佳实践,那么AngularJS也能够带来极大的助益.总而言

  • Angularjs结合Bootstrap制作的一个TODO List

    Angularjs结合Bootstrap制作的一个TODO List

    看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用).为了增强理解,下面写了一篇文章,用以复习巩固. 准备 Angularjs下载 说是下载,其实只要能在我们的页面中引用到Angularjs即可.可以有如下方式. CDN加速 使用国内的CDN加速服务也是可以的. 复制代码 代码如下: <script src="http://code.angularjs.org/angular-1.0.

随机推荐