模板

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. Lighttpd

    一.简介 Lighttpd 是一个德国人领导的开源Web服务器软件,其根本的目的是提供一个专门针对高性能网站,安全.快速.兼容性好并且灵活的web server环境.具有非常低的内存开销,cpu占用率 ...

  2. virtualbox 在window10上的兼容性调整

    更新完windows10后,打开当时的virtualbox 4.3.3已经是最新的啦,打开原来安装的几个虚拟机(hadoop),发现均失败. 打开setting一看,网络一栏有问题,桥接模式的虚拟机都 ...

  3. Oracle常用plsql

    String aggr http://www.oracle-base.com/articles/misc/string-aggregation-techniques.php     SELECT 'S ...

  4. ZBrush中的纹理-水手该怎样进行绘制

    如下是一张使用ZBrush3D图形绘制软件绘制的栩栩如生的水手图片,那么有人要问了,如何创建水手渲染的皮肤纹理呢?接下来,小编将教大家学习如何创建皮肤颜色,顺便说一下,这里所选取的颜色仅仅是在ZBru ...

  5. hdu-5521 Meeting(最短路)

    题目链接: Meeting Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  6. codeforces 711A A. Bus to Udayland(水题)

    题目链接: A. Bus to Udayland 题意: 找一对空位坐下来,水; 思路: AC代码: #include <iostream> #include <cstdio> ...

  7. mantis安装

    curl -O http://jaist.dl.sourceforge.net/project/mantisbt/mantis-stable/1.2.19/mantisbt-1.2.19.tar.gz ...

  8. scp: command not found如何解决

    今天给一台新的服务器,准备源码安装一些软件,需要使用scp复制文件时报错如下:-bash: scp: command not found 解决办法如下:安装scp的软件包:# yum install ...

  9. java7-3 继承

    1.继承概述: 把多个类中相同的内容给提取出来定义到一个类中. 如何实现继承呢? Java提供了关键字:extends 格式: class 子类名 extends 父类名 {} 父类也称为基类.超类: ...

  10. Android优化——UI优化（一）优化布局层次

    优化布局层次 1.避免布局镶嵌过深(如下) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...