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

数据绑定

AngularJS中的数据绑定就是模型与视图间的自动同步。这种实现方式让你能专心地处理你的模型。视图总是模型的投影,当模型改变,视图就会反映这种改变,反之亦然。

大部分模板系统的绑定方式。它们将模型和模板结合生成视图,这个结合过程产生的视图不是动态更新的。更糟的是,用户和视图的交互都不会反映到模型。这意味着开发者要自动写视图和模型双向的同步代码。

AngularJS模板的工作原理不同。不同之处在于:

第一,模板(附加了自定义属性等标记的未经编译的HTML)是由浏览器编译的;

第二,编译最后产生的是一个动态的视图。这里动态指的是视图的任何变化都会直接反应到模型,反之亦然。这使得模型总是应用状态的唯一标识,这大大简化了开发人员的编程工作。你可以简单地认为视图是模型的投影。

因为视图只是模型的投影,控制器完全和视图分离了,并且视图对它来说是透明的。这使得测试变得更简单,因为你不需要关心相关的DOM或者浏览器变化了。

 

 

 

 

加油!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。