Angualr 2介绍

语言选择

无类型

ES5是Angular 1 所使用的语言，无需编译；
ES6/ES2015 包含最新语言的特性，比如classes,（模块的）import,export，ES6解构赋值，简单但有效的let 声明。它可以通过使用Babel 编译器来让所有浏览器兼容。

有类型

TypeScript支持类型。它是JavaScript的演化，采用JavaScript的标准并且增加了一些新特性。口头禅是JavaScript is a valid TypeScript。Angular team在用TypeScript写Angular 2。Most notably(显著的，尤其)，它加入了接口和类型。它最大的优势就是在我们写代码的时候，可以检测错误。
Dart 是使用最少的。

关系

ES6/ES2015 是ES5的超集，TypeScript是ES6的超集。TypeScript采用了刚出现的标准例如decorators。

Components

Components是LOGIC,template是渲染。
首先导入Component 从angular2/core,得到Component 对象

component.png

使用模板的2种方法：

Paste_Image.png

Paste_Image.png

然后定义一个类StoryComponent ,story 是 property ,会在template中展现，接着

decorator.png

利用装饰器去装饰StoryComponent 类。（装饰器是metadata(描述组件)）

QQ截图20160616100103.png

选择器是一个HTML element

QQ截图20160616100316.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Root component 可能是整个应用的container 或者shell ，在里面有其他东西。

Paste_Image.png

Paste_Image.png

bootstrap.png

首先导入模块，然后调用bootstrap函数，传入入口构件（整个应用的父构件）。

Structural Built-In Directives

Paste_Image.png

ngFor小驼峰法
变量一般用小驼峰法标识。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

ngIf 改变结构 ：h3 不会显示，如果vehicles的长度为0。

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Metadata

Paste_Image.png

Paste_Image.png

Paste_Image.png

因此上面这些无需导入，如果是自定义的子组件需要导入

Paste_Image.png

template 和style 有2种方式可以使用：inLine or embedded(嵌入)

Paste_Image.png

plural:复数的

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

estate :身份
a patch of :一片
directives:声明使用其他组件

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Output 装饰器，有一个member named changed

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

@Input()

Paste_Image.png

Paste_Image.png

Input and Output

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

emit 后，父组件可以hear from it.

Paste_Image.png

Data Binding

从component 里获得数据，把数据传送到（get over to ）DOM(view) 。有多种方法：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Interpolation（插值法）

curly braces(花括号)

Paste_Image.png

1 Way Binding

use square brackets around a property

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

不是 attributes.attributes初始化DOM properties。

Event Binding

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

2 Way Binding

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

value property?难道不是attribute?

Remove the Need for Many Directives (Fewer Built-in Directives )

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png