这张是ng2的基础架构全景图。
文档的示例都是ts语法！
都是一些自己的看文档的一些的摘抄，有一起学的小伙伴留言一起研究下哈
模块（module）
angular有自己的模块系统，称为angular模块或者NgModules
每个angular至少有一个模块（AppModule根模块，大多数应用会有很多特性模块）
angular模块都是一个带有@NgModule装饰器的类
装饰器是用来修饰javascript类的函数，负责将元数据加到类上
NgModule是一个装饰器函数，参数为一个描述模块属性的元数据对象，其中重要的属性是：
declarations- 声明本模块中拥有的视图类。 Angular 有三种视图类：组件、指令和管道。exports- declarations 的子集，可用于其它模块的组件模板。imports- 本模块声明的组件模板需要的类所在的其它模块。providers- 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。bootstrap- 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
文档中简单的根模块示例：
import { NgModule } from ‘@angular/core‘;
import { BrowserModule } from ‘@angular/platform-browser‘;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import、export、装饰器（还有诸如类型注解等等）的概念都是typescript的一些重要的概念。
通过引导根模块启动app。开发时，通常在一个main.ts文件中引导AppModule。
angular库的名字都带有@angular前缀，用npm安装，用js的import导入某些部件。
组件（component）
负责控制视图。
在类中定义组件的应用逻辑，为视图提供支持。组件通过api的属性和方法与视图交互。
文档中的示例
export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } }
在这个应用中，ng会创建、更新和销毁组件。
模板（template）
通过组件的模板来定义组件的视图。以html形式存在，去渲染组件。
文档中的组件模板示例：
<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><ul><li *ngFor="let hero of heroes" (click)="selectHero(hero)">{{hero.name}}</li></ul><hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
多数情况下与html相同，还可以使用ng的指令以及例如模板最后一行的标签是用来表示组件的自定义元素
元数据（metadata）
如何处理一个类。（用装饰器来附加元数据）
文档中的示例：
@Component({ moduleId: module.id, selector: ‘hero-list‘, templateUrl: ‘hero-list.component.html‘, providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
@Component装饰器把紧随其后的类标记成了组件类
moduleId: 为与模块相关的 URL（例如templateUrl）提供基地址。selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件。 例如，如果应用的 HTML 包含<hero-list></hero-list>， Angular 就会把HeroListComponent的一个实例插入到这个标签中。templateUrl：组件 HTML 模板的模块相对地址，如前所示。providers- 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。
数据绑定（data binding）
数据绑定的四种形式如文档中的图，插值表达式、属性绑定、事件绑定、双向数据绑定
双向数据绑定中，数据属性通过属性绑定从组件流到输入框。而用户的修改通过事件绑定流回组件，把属性值设置为最新的值。
文档中的示例：
<li>{{hero.name}}</li> //插值表达式 <hero-detail [hero]="selectedHero"></hero-detail> //属性绑定 <li (click)="selectHero(hero)"></li> //事件绑定<input [(ngModel)]="hero.name"> //双向数据绑定
指令（directive）
angular模板是动态的。根据指令提供的操作对dom进行转换，渲染模板。
指令是一个带有“指令元数据”的类。
组件是一个带模板的指令。
指令分为 组件、结构型指令、属性型指令。
结构型指令示例：
<li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"></hero-detail>
属性型指令示例：
<input [(ngModel)]="hero.name">
服务（service）
组件介于视图（由模板渲染）和应用逻辑之间。设计良好的组件为数据绑定提供属性和方法，把其它琐事委托给服务。
依赖注入（注入器inject）
提供类的新实例的一种方式，负责处理好类所需的全部依赖。
服务和依赖注入不是很清晰的明白，后面文档的学习应该会加深我对这些的理解：）