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

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

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

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

<p>您猜过的次数是 : <span>{{numOfTries}}</span><p>

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

<p>您猜过的次数是 : <span>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()">确定</button>

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

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

<p ng-show="deviation<0">爷,您出价过高了!</p>

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

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

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzffdw.html