模板

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. jQuery选择器简单例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...

  2. Sample: Write And Read data from HDFS with java API

    HDFS: hadoop distributed file system 它抽象了整个集群的存储资源,可以存放大文件. 文件采用分块存储复制的设计.块的默认大小是64M. 流式数据访问,一次写入(现支 ...

  3. java 字节流和字符流的区别 转载

    转载自:http://blog.csdn.net/cynhafa/article/details/6882061 java 字节流和字符流的区别 字节流与和字符流的使用非常相似,两者除了操作代码上的不 ...

  4. js对Date对象的操作的问题(生成一个倒数7天的数组)

    今天在论坛上看到这样一个问题如下: 问题描述: 使用JavaScript生成一个倒数7天的数组.比如今天是10月1号,生成的数组是["9月25号","9月26号" ...

  5. POJ 2318 TOYS【叉积+二分】

    今天开始学习计算几何,百度了两篇文章,与君共勉! 计算几何入门题推荐 计算几何基础知识 题意:有一个盒子,被n块木板分成n+1个区域,每个木板从左到右出现,并且不交叉. 有m个玩具(可以看成点)放在这 ...

  6. java 为啥变量名前要加个m?

    用m_开头表示类的成员变量,member的意思如果是全局变量,则由g_开头还有常量c_开头 静态变量s_开头

  7. maven总结3

    POM文件 maven版本:apache-maven-3.1.1 1.<modelVersion>4.0.0</modelVersion>  pom模型的版本,对于maven2 ...

  8. java 12-2 String和StringBuffer之间的转换

    为什么我们要讲解类之间的转换: A -- B的转换 我们把A转换为B,其实是为了使用B的功能. B -- A的转换 我们可能要的结果是A类型,所以还得转回来. String和StringBuffer的 ...

  9. Android Studio系列教程六--Gradle多渠道打包

    Android Studio系列教程六--Gradle多渠道打包 2015 年 01 月 15 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzh ...

  10. 注解与反射 ---Spring与Mybatis等框架的实现原理

    Java中各大框架,无论是AOP 还是 IoC 其基本实现思路都是源自Java 运行时支撑的反射功能, 而反射最基本的一点就是 任何一个类 其在JVM环境中,都有一个对象的Class对象,这个对象提供 ...