模板

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. Heartbeat+LVS构建高可用负载均衡集群

    1.heartbeat简介: Heartbeat 项目是 Linux-HA 工程的一个组成部分,它实现了一个高可用集群系统.心跳服务和集群通信是高可用集群的两个关键组件,在 Heartbeat 项目里 ...

  2. Linux shell basic2 cat find tr

    Cat stands for concatenate. Case 1. When the text files have more blank lines, we want to remove the ...

  3. 【读书笔记《Android游戏编程之从零开始》】8.Android 游戏开发常用的系统控件（系统控件常见问题）

    Android 中常用的计量单位Android有时候需要一些计量单位,比如在布局Layout文件中可能需要指定具体单位等.常用的计量单位有:px.dip(dp).sp,以及一些不常用的pt.in.mm ...

  4. UESTC 881 神秘绑架案 --二维DP

    LRJ黑书上的例题. 化简均方差公式: 均值的平方一定,所以只需让矩形的总分的平方和最小即可. 定义:dp[k][x1][y1][x2][y2],以(x1,y1)为左上角坐标,(x2,y2)为右下角坐 ...

  5. 2014 Super Training #4 E Paint the Grid Reloaded --联通块缩点+BFS

    原题: ZOJ 3781 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3781 题意: 给一个n*m的X,O构成的格子,对 ...

  6. Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心

    概率计算:P(某set) =  令:  和   现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...

  7. Mecanim 学习概述

    前言 我要逐个击破Unity中的知识点,包括1.Mecanim 2.NavMesh 3.4.3之后新的GUI系统 4.新的2D功能 5.Shader 6.性能及后期处理 早在2013年初的时候就听说过 ...

  8. man命令中的文本操作

    转自:http://www.cnblogs.com/chengmo/archive/2010/10/26/1861809.html 下面说下less命令操作: 光标移动操作: e  ^E  j  ^N ...

  9. Python-装饰器详解

    初学python,装饰器是什么玩意儿? 1:装饰器是函数,只不过该函数可以具有特殊的含义,装饰器用来装饰函数或类,使用装饰器可以在函数执行前和执行后添加相应操作. 2:至少两层函数 方式一: 理解方式 ...

  10. js实现复制功能

    JS 点击复制Copy 1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl ...