学习资源：
http://www.runoob.com/angularjs2/angularjs2-architecture.html
Angular 2 应用程序主要由以下8个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)
模块 Module
模块由一块代码组成，可用于执行一个简单的任务。
Angular 应用是由模块化的，它有自己的模块系统：NgModules。
每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。
Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。
几个重要的属性：
- declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
- exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
- imports - 本模块组件模板中需要由其它导出类的模块。
- providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
- bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。
app/app.module.ts 示例
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 { }
通过引导根模块来启动应用：
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
组件 Components
组件是构成 Angular应用的基础和核心，可用于整个应用程序中。
组件知道如何渲染自己及配置依赖注入。
创建Angular组件的方法：
- 从 @angular/core 中引入 Component 修饰器
- 建立一个普通的类，并用 @Component 修饰它
- 在 @Component 中，设置 selector 自定义标签，以及 template 模板
模板 Templates
<div> 网站地址 : {{site}} </div>
元数据 Metadata
元数据告诉Angular 如何处理一个类。
@Component({
selector : 'mylist',template : '<h2>菜鸟教程</h2>'
directives : [ComponentDetails]
})
export class ListComponent{...}
在TypeScript中，使用装饰器(decorator)来附加元数据。
@Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类。
Angular 会基于这些信息创建和展示组件及其视图。
@Component 中的配置项说明：
- selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 <mylist> 标签，然后创建该组件，并插入此标签中。
- templateUrl - 组件 HTML 模板的地址。
- directives - 一个数组，包含 此 模板需要依赖的组件或指令。
- providers - 一个数组，包含组件所依赖的服务所需要的依赖注入提供者。
数据绑定
<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" >
指令 Directives
<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>
服务 Services
示例：一个日志服务。
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
依赖注入
Angular 能通过查看构造函数的参数类型，来得知组件需要哪些服务。 例如， SiteListComponent 组件的构造函数需要一个 SiteService:
constructor(private service: HeroService) { }
当 Angular 创建组件时，会首先为组件所需的服务找一个注入器（ Injector ） 。 注入器是一个维护服务实例的容器，存放着以前创建的实例。 如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。 当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。
