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


Posted in Javascript onAugust 27, 2016

我们将利用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.3water.com/201608/yuanma/Bootstrap-mooc(3water.com).rar)

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

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

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

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

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

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

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

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

在上图所表示的文件组成中,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界面库代码引入。完成后,我们将其加载到浏览器,看看有没有错误,如果没错的话,当前我们看到的是一片空白:

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

接下来,我们将开发应用的后台逻辑代码,我们先确定几个要用到的变量:

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和Bootstrap前端开发案例实战

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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
轻松掌握JavaScript享元模式
Aug 27 #Javascript
JavaScript编码风格指南(中文版)
Aug 26 #Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 #Javascript
ES6中的数组扩展方法
Aug 26 #Javascript
jQuery实现微信长按识别二维码功能
Aug 26 #Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 #Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 #Javascript
You might like
php include加载文件两种方式效率比较
2010/08/08 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python去掉行尾的换行符方法
2017/01/04 Python
python如何修改装饰器中参数
2018/03/20 Python
python使用folium库绘制地图点击框
2018/09/21 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python常用函数与用法示例
2019/07/02 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python中entry用法讲解
2020/12/04 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
医科大学毕业生自荐信
2014/02/03 职场文书
小学五年级学生评语
2014/04/22 职场文书
倡议书的写法
2014/08/30 职场文书
党的生日演讲稿
2014/09/10 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
天坛导游词
2015/02/02 职场文书
小学中队长竞选稿
2015/11/20 职场文书
导游词之张家口
2019/12/13 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android