码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs HTML DOM、AngularJS 事件以及模块的学习(5)

时间:2015-11-17 18:24:36      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

                             今天的基础就到了操作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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!