Creeper's Blog

Creeper's Blog

前一章介绍了指令的基础知识,这一章则关注自定义指令。从一个简单的例子来看怎么自定义指令。

1
2
3
4
5
6
7
8
9
10
var app = angular.module("myApp", [])

app.directive("myDirective", function(){
return {
restrict: "A",
link: function(){
alert("I'm working");
}
};
});

指令是使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.

表单控件(inputselecttextarea)是用户输入数据的途径。一个表单(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

定义以下术语:

  1. visual formatting model: 可视化格式模型,下文中简称模型。
  2. media: 媒介,CSS中的重要概念,即展示页面的介质,最常见的是screen(显示器),其它还有纸媒介等待。
  3. user agent: 用户代理,即浏览器。
  4. dom tree: 文档树,下文中简称树。
  5. box model: 盒模型。
  6. positioning scheme: 定位体系。
  7. containing blocks: 包含块,元素生成box,该box就是子元素的包含块。
  8. block-level elements, block box: 块级元素,块框
  9. inline-level elements, inline box: 行内级别元素,行内框
  10. inline-level box: 行内级别框
  11. replaced element: 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。

    比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

    CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

  12. non-replaced element: 非替换元素,替换元素之外的所有其他元素都是非替换元素,由CSS的视觉格式化模型负责非替换元素的渲染。

前一章在scope上定义了一个reverse函数,可以倒序输出字符串——这就是过滤器(filter)的雏形。

定义:filter格式化一个表达式的值,以展现给用户。filter可以在模板、控制器、指令或服务中使用,并且容易定义你自己的过滤器。

前面两章内容比较多,但看完前两章,对angular应该会有一个比较全面的了解。这章开始,会对angular中的每个部分做细致讲解,首先从数据绑定讲起。

1
2
3
4
5
6
7
8
<body>
<div ng-app="">
{ { "john" + "lindquist" } }
<input type="text" ng-model='data.msg' />
<h1>{ { data.msg } }</h1>
</div>
<script type="text/javascript" src="angular.js"></script>
</body>

angular的一个闪光点是你只需要对框架有个很少的了解就能顺利跑起Demo了。这很好,你可以边学边实际做,毕竟自学最重要的一点是动手,而不是biabiabia看些文档或视频就好。

首先,看怎么启动最简单的Angular应用。