前言：
angular2官方將框架按以下結構划分：
- Module
- Component
- Template
- Metadata
- Data Binding
- Directive
- Service
- Dependency Injection
本文簡單介紹一下，這些知識點，以淺入的方式理解angular2的基礎概念和結構。
一、Module （模塊）
- Angular 是模塊化的.
- Modules 導出 classes, function, values ， 以便在其他模塊導入使用.
- angular應用由模塊組成，每個模塊都做此模塊相關的事情
組件、方法、類、服務等，他們都可以成為模塊。
module基本使用
自定義一個模塊文件和main入口文件：
app.component.ts
main.ts
export class AppComponent { } //新建 app.component.ts 並導出當前自定義模塊：
import { AppComponent } from './app.component'; //在入口文件main.ts 引用自定義模塊app.component：
import { Component } from 'angular/core'; //引入angular自帶模塊Component：
引用自定義模塊，需要加上路徑，ng會根據路徑找到模塊，而框架本身的模塊不需要路徑，它會自動匹配到相應模塊。
學習過node的，相信都應該理解。
二、Component （組件）
在angular2中，Component 是我們構建頁面元素和邏輯的主要方式，而在angular1中要實現這些需要directives, controllers和scope。
在angular2， 他們都被合成到了Component里。
例子：
import {Component} from 'angular2/core'
@Component({
selector: 'my-component',
template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log('My name is', this.name)
}
}
selector 指定了自定義標簽，template配置好了dom元素、綁定了數據和事件， this實際代替了angular1中的scope
最后，在html里我們可以用<my-component></my-component>標簽創建當前Component。
三、Template （模板）
angular2 的 html template大部分還是一般的html，只是會混合一些框架可識別的屬性或者指令，比如：()、{}、 {{}}、 [()] 等。實際就和一般的模板引擎差不多
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
四、Metadata （元數據）
什么是元數據？元數據是關於數據的組織、數據域及其關系的信息。
在angular2中，如下例：
selector、templateUrl、directives、providers 他們都是元數據
import {Component} from 'angular2/core';
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
export class HeroesComponent { ... }
template, metadata, component 相互作用組成視圖，而metadata就是關聯組件和模板的數據。
五、Data Binding （數據綁定）
用過angular的一個特色就是雙向綁定，這個在ng1里就已經赫赫有名了。
如下圖，
圖中告知了數據的流動方向，
{{value}}和[property]='value'，變量綁定在Component中，只要在Component中控制變量值改變，dom中就會更新，它是單向的。
(event)是事件綁定，是單向的，在dom中觸發，從而告知Component。
[(ng-model)]或者[(ngModel)]實現雙向綁定， angular1中，我們要實現雙向綁定是用ng-model="xx"，angular2中從用法上來說確實只是多加了兩個括號。
angular2中有個通用規則，ng-model ngModel，中線分割和駝峰命名相等。
六、Directive（指令）
angular模板是動態的，渲染模板的時候dom根據directive的規則轉換並渲染。
<div *ngFor="let hero of heroes"></div> //*ngFor循環遍歷heroes
<input [(ngModel)]="hero.name"> //[(no-model])雙向綁定
以上這些都是angular2自帶的指令。
我們也可以自己定義指令。
單從概念上來說，angular1和2的指令幾乎是一樣的。他們改變的不過是寫法和使用方式。
七、Service(服務）
幾乎一切我們開發的代碼都可以算是服務。比如：一個特定的class、一個工具類或者一個組件。
服務就是一個概念，angular本身沒有為它實現什么基類。angular只是讓我們遵循一個規則，按照規則，我們寫出我們想要的實質代碼，
組成一個個小的服務，最后通過框架把它們組成我們的應用。這些服務都通過 “依賴注入”（Dependency Injection) 的方式為我們的應用提供服務。
八、Dependency Injection（依賴注入)
“依賴注入”連接和應用在整個框架，當你想在一個“組件”里使用一個“服務”時，你需要通過“依賴注入”的方式，把服務載入到當前組件，
並在組件申明使用它。有兩種方法
第一種：
bootstrap(AppComponent, [TheService]);
這樣直接把這個service注入到整個app里面。然后這個app-component包括它所有的子模塊都能使用 TheService這個service。
在Angular2里面所有的service是單例的，一旦在當前模塊生成了單例service，它的子模塊都將共同使用它。他們都將操作同一個service。
如果需要每個子模塊都使用唯一的service，就要使用第二種方式：
@Component({ selector: 'hero-editor', providers: [RestoreService] })
在component的providers里面直接注入service。
“依賴注入” 就是把我們需要的服務提供給我們應用的其他服務，讓它們之間能夠相互使用。
小結：
我們這里大致介紹了下angular2的結構和這八個基礎知識，從入門來說，我們僅僅是了解一些淺顯的知識。
搞清楚基本結構和它們之間的關系，有利於后期的深入學習和使用。
通過本文， 再實踐一下angular2官網的 5 MIN QUICKSTART 會不會要好理解一些了呢？
最后附一張總結圖：
以上圖片來自angular2官網，內容經過本人理解過濾，此文僅僅是學習筆記分享, 理解不深， 有望后續更新。