模板

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或者浏览器变化了。

加油！

AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解的更多相关文章

  1. VS 2013驱动开发 + Windbg + VM双机调试（亲测+详解）

    ------------VS 2013驱动开发 + Windbg + VM双机调试(亲测+详解)------------- WIN10已上线,随之而来的是VS2015:微软在 "WDK760 ...

  2. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  3. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  4. 此博客使用的CSS样式详解！

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  5. Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解

    http://hi.baidu.com/ltb6w/item/3a51f11926fda60ce75c361d Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解 ...

  6. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  7. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  8. mysql 5.7.12 新增 X plugin x 协议 详解

    mysql 5.7.12 新增 X plugin  x 协议 详解http://xiaozhong991.blog.51cto.com/2354914/1763792 x 协议  操作nosql数据库 ...

  9. maven pom文件简单模板和配置详解

    https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解

随机推荐

  1. django中的站点管理

    所谓网页开发是有趣的,管理界面是千篇一律的.所以就有了django自动管理界面来减少重复劳动. 一.激活管理界面 1.django.contrib包 django自带了很多优秀的附加组件,它们都存在于 ...

  2. 关于volatile和synchronized

    这个可能是最好的对比volatile和synchronized作用的文章了.volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的 ...

  3. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  4. 对于大学4年的反思(续)，记我的ThoughtWorks面试

    之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...

  5. CSS3 Filter详解（改变模糊度 亮度 透明度等方法）

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  6. 实习小记－python 内置函数__eq__函数引发的探索

    乱写__eq__会发生啥?请看代码．． >>> class A: ... def __eq__(self, other): # 不论发生什么,只要有==做比较,就返回True ... ...

  7. nginx 与 tomcat 集群 一二事 (0) - 简单介绍

    最近看了nginx以及tomcat的集群,通俗的做一下简单总结吧 nginx 是一个http服务器,是由俄罗斯人发明的,目前主流的服务器,作为负载均衡服务器,性能非常好,最高支持5万个并发连接数,在淘 ...

  8. Apache Commons 常用工具类整理

    其实一直都在使用常用工具类,只是从没去整理过,今天空了把一些常用的整理一下吧 怎么使用的一看就明白,另外还有注释,最后的使用pom引入的jar包 public class ApacheCommonsT ...

  9. javascript编程习惯总结

    总结一下javascript需要注意的一些细节的地方: 1:声明一个对象:var a={ }; 2:另一个对象继承一个对象:Var b=Object.create(a);如果父类的属性和方法发生改变, ...

  10. 为Unity项目生成文档(二)

    Unity项目生成文档 接着上篇文章:为Unity项目生成文档(一) .Net项目可在VS配置XML 我们可以在VS中通过配置来生成xml文件,但是unity的project,就算同样配置了xml文档 ...