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,希望能够更快地掌握的啦,嘿嘿。

时间: 2024-10-05 08:15:44

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

AngularJS html+DOM+ng-click事件

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令用于设置应用部分是否可见. ng-show="true" 设置 HTML 元素可见. ng-show="false" 设置 HTML 元素不可见. ng-hide 指令用于设置应用部分是否可见. ng-hide="true" 设置 HTML 元素不可见. ng-hide="false" 设置 HTML 元素可见. 实

【11】AngularJS&#160;HTML DOM

AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <div ng-app=""> <p> <button ng-disabled="mySwitch">点我!</button> </p> <p> <in

AngularJS中的DOM与事件

  前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" 传入true表示禁用,传入false表示可用 代码: <label> <input type="checkbox" ng-model="myCheck" />是否同意 </label> <button ng-disabled

关于AngularJs中监听事件及脏循环的理解

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

AngularJS学习之旅—AngularJS HTML DOM(十三)

1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令:ng-show 指令隐藏或显示一个 HTML 元素. ng-hide 指令:ng-hide 指令用于隐藏或显示 HTML 元素. <!DOCTYPE html> <html> <head> <meta

[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端

使用AngularJS为基于Elasticsearch的应用创建前端 如果使用Elasticsearch使用应用的数据源,我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端. 以创建一个简单的员工信息花名册为例. 准备工作 准备工作分为以下两个方面: 添加前端依赖 安装Bower 在bower.json中添加对于AngularJS和Elasticsearch的依赖: "dependencies": { "angular"

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

HTML DOM event 事件 (丫头, 好想你了)

HTML DOM event 事件, 用用就知道了 function isKeyPressed(eventssdasd)     // 这个地方其实无关紧要,就是定义一个名称而已, 不过为了好看, 最好还是写成 event{  if (event.altKey==1)                        // event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等,此处为检测 alt 键是否按下    {  // 此处的 event 必须写正确, 你可以

jacascript DOM变动事件

DOM变动事件 变动事件(MutationEvent)能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用 DOM2 级事件处理程序,且由于浏览器兼容性不好,所以用的不广泛: 删除节点变动 删除节点时,涉及到 DOMNodeRemoved.DOMNodeRemovedFromDocument 和 DOMSubtreeModified 这三个事件:事件触发的先后顺序是 DOMNodeRemoved 事件.DOMNodeRemovedFromDocument 事件和 DOMSub