标签：
今天的基础就到了操作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，希望能够更快地掌握的啦，嘿嘿。
AngularJs HTML DOM、AngularJS 事件以及模块的学习（5）
标签：
原文地址：http://www.cnblogs.com/dyxd/p/4971905.html
