AngularJs HTML DOM、AngularJS 事件以及模块的学习(5)
今天的基础就到了操作DOM,事件和模块的学习,其实我个人感觉学习起来AngularJS并没有想象中的那么的艰难,可能是因为这个太基础化吧,但是我们从初学开始就应该更加的自信一些,后来我可能会写一个小的项目来练习一下吧,但是至少现在我还不能熟练的写不出来。下面就简单的实例一下吧。
一、AngularJs HTML DOM
AngularJS为HTML DOM元素的属性提供了绑定应用数据的指令。
(1)、ng-disabled 指令,直接绑定应用程序数据到HTML的disabled属性
在浏览器中浏览如下:
ng-disabled指令绑定应用程序数据 "myBtn" 到HTML的disabled属性。ng-model指令绑定 "myBtn" 到HTML input checkbox元素的内容(value)。
如果myBtn为true,按钮将不可用:
<p> <button disabled>点我!</button> </p>
如果myBtn为false, 按钮则可用:
<p> <button>Click Me!</button> </p>
(2)、ng-show 指令,ng-show指令隐藏或显示一个HTML元素。
在浏览器中浏览如下:
ng-show 指令根据value的值来显示(隐藏)HTML元素。
也可以使用表达式来计算布尔值(true或false):
在浏览器中浏览如下:
(3)、ng-hide 指令,用于隐藏或显示HTML元素
在浏览器中浏览如下:
二、AngularJS事件
(1)、AngularJS有自己的HTML事件指令,ng-click指令定义了AngularJS点击事件
在浏览器中浏览如下:
(2)、隐藏HTML元素
在浏览器中浏览如下:
第一部分loginC与控制器那一章节类似,应用有一个默认属性: $scope.myHide = false;ng-hide指令设置<p>元素及两个输入域是否可见,根据myHide的值(true 或 false)来设置是否可见。toggle()函数用于切换myHide变量的值(true和false),ng-hide="true"让元素不可见。
(3)、显示HTML元素
在浏览器中浏览如下:
ng-show指令可用于设置应用中的一部分是否可见。ng-show="false"可以设置HTML元素不可见。ng-show="true"可以以设置HTML元素可见。
三、AngularJS 模块
刚开始看起来模块,还真没有理解是想干嘛的哦,但是看到介绍还是能够看清楚的,模块其实就是定义了一个应用程序。它是应用程序中不同部分的容器。也是应用控制器的容器,而控制器通常属于一个模块,模块就是这样的。
(1)、带有控制器的模块
在浏览器中浏览如下:
上面的这个实例其实在之前我们就练习过的,虽然并不是完全相同,但是还是熟悉的啦,嘿嘿。
(2)、模块和控制器包含在JS文件中
通常AngularJS应用程序将模块和控制器包含在JavaScript文件中,如下:
"ngApp.js"包含了应用模块的定义程序,如下:
"myC.js"文件包含了控制器,如下:
在浏览器中浏览如下:
这个其实是和上面的(1)中的实例是一样的,只是这个把js文件写在了外面,实现的结果是一样的啦。
(3)、认识AngularJS是在什么时间加载的
在浏览器中浏览如下:
对于HTML应用程序,通常会把所有的脚本都放置在<body>元素的最底部。这会提高网页加载速度,因为HTML加载不受制于脚本加载。在前面的多个AngularJS实例中,我们看到AngularJS库是在文档的<head>区域被加载。在我们的实例中,AngularJS在<head>元素中被加载,因为对angular.module的调用只能在库加载完成后才能进行。另一个解决方案是在<body>元素中加载AngularJS库,但是必须放置在您的AngularJS脚本前面。这就让我么认识到我们加载AngularJS加载的时间。
好啦,这个就总结到这里吧,还是最基础的认识AngularJS,希望能够更快地掌握的啦,嘿嘿。