Angular2学习笔记

模板语法

模板是包在反引号 (`) 中的一个多行字符串。反引号 (`) ——注意，不是单引号 (') ——有很多好用的特性，比如允许多行字符串和模板字面量。

装饰器

@Component 装饰器，这个装饰器类（和我们随后将会学到的 @Directive 和 @Pipe 一样）是 InjectableMetadata 的子类型。实际上，这个 InjectableMetadata 装饰器是把一个类标识为依赖注入器实例化的目标。

TypeScript接口

接口只是 TypeScript 的一个设计期概念。JavaScript 没有接口。在生成 JavaScript 代码时，TypeScript 的接口就消失了。在运行期，没有接口类型信息可供 Angular 查找。

HTML Attribute 与 DOM Property

Attribute 是由 HTML 定义的。Property 是由 DOM(Document Object Model) 定义的。

就算名字相同，HTML Attribute 和 DOM Property 也不是同一样东西。

组件交互

组件定义了一个 deleteRequest 属性，它是一个 EventEmitter 实例。（译注：deleteRequest 属性是导出 Output 属性，是组件与父级组件交互的主要方式之一。参见 输入和输出属性 和 父组件监听子组件的事件。我们需要用 @Output() 来装饰它，或者把它添加到组件元数据的 outputs 数组中，它才能在父级组件可见。）

NgFor 与 trackBy

现在，把 NgForTrackBy 指令设置为那个追踪函数：

<div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>

追踪函数不会排除所有 DOM 更改。如果用来判断是否同一个英雄的属性变化了，Angular 就可能不得不更新 DOM 元素。但是如果这个属性没有变化——而且大多数时候它们不会变化——Angular 就能留下这些 DOM 元素。列表界面就会更加平滑，提供更好的响应。

安全导航操作符

Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。这意味着，当 currentHero 为空时，保护视图渲染器，让它免于失败。

其他重要概念

数据绑定

Angular 支持多种数据绑定形式：

• 插值表达式：{{value}}
• 属性绑定：[property]="value"
• 事件绑定：(event)="handler()"
• 双向绑定：[(ngModel)]="property"

指令

Angular 有三种类型的指令：

• 组件：带有模板的指令
• 结构型指令：改变 DOM 布局的指令（如 *ngIf、*ngFor）
• 属性型指令：改变元素、组件或其他指令的外观和行为的指令（如 ngClass、ngStyle）

服务与依赖注入

Angular 服务是一个广义的概念，它包括应用所需的任何值、函数或特性。通常是一个具有明确用途的类。服务通过依赖注入系统被注入到需要它们的组件中。

模块

Angular 应用是模块化的，它拥有自己的模块系统，称作 NgModule。每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。