模块
- 每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。
- Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。
- declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
- exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
- imports - 本模块组件模板中需要由其它导出类的模块。
- providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
- bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。
组件(Components)
- 从 @angular/core 中引入 Component 修饰器
- 建立一个普通的类，并用 @Component 修饰它
- 在 @Component 中，设置 selector 自定义标签，以及 template 模板
元数据(Metadata)
- 元数据告诉 Angular 如何处理一个类。在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
- 例如@Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类。Angular 会基于这些信息创建和展示组件及其视图。
数据绑定
- 插值 : 在 HTML 标签中显示组件值。
<h3>
{{title}}
<img src="{{ImageUrl}}">
</h3>
- 属性绑定: 把元素的属性设置为组件中属性的值。
<img [src]="userImageUrl">
- 事件绑定: 在组件方法名被点击时触发。
<button (click)="onSave()">保存</button>
- 双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。
<input [value]="currentUser.firstName"
(input)="currentUser.firstName=$event.target.value">
数据绑定
指令
component的用途是创建一个组件并附上一些行为，而directive则是在已经存在的dom元素上附加一些行为；二期详细区别如下：
（1）component使用的注解@Component修饰，directive使用注解@Directive来修饰
（2）component是通过组件化思想，基于组件来创建应用，把应用划分成细小的各个可重复使用的组件，遵循DRY原则（Don't repeat youself！），directive是用来在已经存在的dom元素上实现一些行为
（3）component是可重复使用的组件，directive是可重复使用的行为
（4）component有创建一个视图view，即有template或者templateUrl，directive则没有。
服务
封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块
模板引用变量
通过在标识符前加上井号 (#) 来实现
@Component({
selector: 'loop-back',
template: `
<input #box (keyup.enter)="0">
<p>{{box.value}}</p>
`
})
export class LoopbackComponent { }
可以将模板引用变量初始化为 "ngForm" ，它代表的是表单的整体。
<form *ngIf="active" (ngSubmit)="onSubmit()" #siteForm="ngForm">
<input type="text" required>
</form>
<button type="submit" [disabled]="!siteForm.form.valid">提交</button>
模板语法
<!-- 通过绑定重设或覆盖样式类 -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- 通过一个属性值来添加或移除special样式类 -->
<div [class.special]="isSpecial">这个样式比较特殊</div>
<button [style.color] = "isSpecial ? 'red': 'green'">红色</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >保存</button>
