AngularJS开发指南12:AngularJS的模板,CSS,数据绑定详解
模板
AngularJS模板是一种声明式的规则。它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图。它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性。AngularJS元素和属性让angular给模板DOM添加行为,或者变形,成为动态地DOM。
下面是你能在模板中用到的AngularJS元素和属性:
- 指令 — 一个用来扩张已存在的DOM元素或者表现可重用DOM组件的属性或者元素。也可称为widget。
- 混合(Markup) — 双花括号是angular内置的一种混合,它会将表达式绑定到元素。
- 过滤器 — 格式化输出,给用户的数据。
- 表单控制 — 让你能验证用户的输入
注意:除了在模板中声明元素,你也可以在代码中获取到这些元素。
下面的例子展示了一个简单的模板。它包含标准的HTML标记、AngularJS指令和用双花括号进行绑定的表达式。
<html ng-app> <!-- Body tag augmented with ngController directive --> <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <!-- Button tag with ng-click directive, and string expression ‘buttonText‘ wrapped in "{{ }}" markup --> <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"> </body> </html>
在一个简单的单页应用中,模板由HTML,CSS和包含在一个HTML页面(通常是index.html)中的AngularJS指令组成。在更复杂的应用中,你可以通过“局部模板”,在一个页面中显示多个视图,这个局部模板是指定义在单独HTML文件中的模板片段。你在主页面中通过结合使用$route服务和ngView指令来导入这些局部模板。
CSS
AngularJS设置了下面这些CSS类名,你可以方便地用来给你的应用添加样式。
-
ng-invalid, ng-valid
- 当元素中的输入值没有通过验证时,AngularJS会将这个类名ng-invalid加入到元素上。
-
ng-pristine, ng-dirty
- input指令会给新的指令中的input元素(没有用户交互过)添加ng-pristine类名,交互之后会改为
ng-dirty
。
- input指令会给新的指令中的input元素(没有用户交互过)添加ng-pristine类名,交互之后会改为
数据绑定
AngularJS中的数据绑定就是模型与视图间的自动同步。这种实现方式让你能专心地处理你的模型。视图总是模型的投影,当模型改变,视图就会反映这种改变,反之亦然。
大部分模板系统的绑定方式。它们将模型和模板结合生成视图,这个结合过程产生的视图不是动态更新的。更糟的是,用户和视图的交互都不会反映到模型。这意味着开发者要自动写视图和模型双向的同步代码。
AngularJS模板的工作原理不同。不同之处在于:
第一,模板(附加了自定义属性等标记的未经编译的HTML)是由浏览器编译的;
第二,编译最后产生的是一个动态的视图。这里动态指的是视图的任何变化都会直接反应到模型,反之亦然。这使得模型总是应用状态的唯一标识,这大大简化了开发人员的编程工作。你可以简单地认为视图是模型的投影。
因为视图只是模型的投影,控制器完全和视图分离了,并且视图对它来说是透明的。这使得测试变得更简单,因为你不需要关心相关的DOM或者浏览器变化了。
加油!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。