前一章介绍了指令的基础知识,这一章则关注自定义指令。从一个简单的例子来看怎么自定义指令。
1 | var app = angular.module("myApp", []) |
指令是使angular特殊的基础。指令是angular这个框架最重要的部分之一。
指令是什么?
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
表单控件(input
、select
、textarea
)是用户输入数据的途径。一个表单(form)是表单控件的集合,用来组织相关的表单控件。
表单和表单控件提供验证服务,所以无效输入时会提示用户。这会提高用户体验,因为用户可以获得连续的提示来改正错误。但注意,客户端的验证不能代替服务端验证,因为客户端验证容易被绕过而不太可信,必须在服务端再次验证以保证安全。
控制器可能是angular中最常接触的部分,前面几章都说到或者在用控制器,这章具体说一说。
理解控制器
在angular中,控制器是一个js构造函数(constructor function
),这个构造函数用来扩张Angular Scope(augment the Angular Scope,为scope添加属性)。
JavaScript对象在第六章讲过了,之前我们只是把对象当作独一无二的属性的集合,每个对象都不同。但现在,我们要讲讲一类对象(a class of objects)共享某些属性。类的实例(instance)有自己的自由属性存储或定义自己的状态,也会有属性(方法)来定义自己的行为,这种行为通常是由类来定义并被所有实例共享。
在JavaScript中,类基于JavaScript的以原型为基础的继承机制。
JavaScript对象是什么?
- js的基础数据类型(fundamental datatype)是对象(object);
- 对象是无序的属性(properties)集合,每个属性是个key-value对;
- 但对象不仅仅是字符串到值的映射。除去有自己的属性集合,每个js对象都会从另一个对象继承属性,即原型(prototype);
- 原型式继承(prototypal inheritance)是js的核心特性。
JS对象是动态的,属性可以添加或删除。除去string、number、true/false、null、undefined,在js中其他值都是对象。
声明:
本文参考http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
定义以下术语:
- visual formatting model: 可视化格式模型,下文中简称模型。
- media: 媒介,CSS中的重要概念,即展示页面的介质,最常见的是screen(显示器),其它还有纸媒介等待。
- user agent: 用户代理,即浏览器。
- dom tree: 文档树,下文中简称树。
- box model: 盒模型。
- positioning scheme: 定位体系。
- containing blocks: 包含块,元素生成box,该box就是子元素的包含块。
- block-level elements, block box: 块级元素,块框
- inline-level elements, inline box: 行内级别元素,行内框
- inline-level box: 行内级别框
replaced element: 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。
比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
non-replaced element: 非替换元素,替换元素之外的所有其他元素都是非替换元素,由CSS的视觉格式化模型负责非替换元素的渲染。
前一章在scope上定义了一个reverse函数,可以倒序输出字符串——这就是过滤器(filter)的雏形。
定义:filter格式化一个表达式的值,以展现给用户。filter可以在模板、控制器、指令或服务中使用,并且容易定义你自己的过滤器。
前面两章内容比较多,但看完前两章,对angular应该会有一个比较全面的了解。这章开始,会对angular中的每个部分做细致讲解,首先从数据绑定讲起。
1 | <body> |
angular的一个闪光点是你只需要对框架有个很少的了解就能顺利跑起Demo了。这很好,你可以边学边实际做,毕竟自学最重要的一点是动手,而不是biabiabia
看些文档或视频就好。
首先,看怎么启动最简单的Angular应用。