• typescript
• angular

typescript是js的拓展，本質(zhì)上在瀏覽器中運(yùn)行的還是javascript，且編譯完成后的js版本是es5，所以不存在兼容性問(wèn)題。主要添加的概念大致有接口（interface）、類（class）、繼承（extends）、箭頭函數(shù)，將js包裝得更像其他的后端語(yǔ)言的功能，這些類似于es6中的概念。ts中可以包含js代碼，這部分代碼不會(huì)被編譯。ts中含有類型檢查，也就是說(shuō)可以為變量定制類型。接口可以作為定制類型（相當(dāng)于面向?qū)ο笾械膶?shí)例化接口？）。

官網(wǎng)教程：
示例使用了typescript，js的一個(gè)超集。angular 使用typescript讓程序員使用工具提高開(kāi)發(fā)效率，你也可以使用js來(lái)寫(xiě)angular

注意：vue與react中模板最外層需要一個(gè)標(biāo)簽將組件整體包起來(lái)，ng2則不需要，可以利用es6中的模板字符串提高模板的可讀性（主要是換行，保持代碼縮進(jìn)規(guī)范）

單向綁定

單向數(shù)據(jù)綁定的典型：{{}}插值
還可以為組件或者dom元素綁定屬性或者事件

雙向綁定

ng中的數(shù)據(jù)雙向綁定由ngModel指令實(shí)現(xiàn)，需要從@angular/forms中導(dǎo)入FormsModule模塊，從而使用其中的ngModel。

修飾器（decoration）

一般以@開(kāi)頭，如@Component()、@Injectable()、@NgModule()，有一些可以以傳入一個(gè)對(duì)象作為配置數(shù)據(jù)，但其后都必須跟著一個(gè)普通的類，意味著將這個(gè)類修飾成對(duì)應(yīng)的組件，依賴注入，模塊等等。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

元數(shù)據(jù)(metadata)

上述例子中，配置對(duì)象中的屬性都可以視為元數(shù)據(jù)，元數(shù)據(jù)告訴 Angular 如何處理一個(gè)類。

指令(directives)

可以通過(guò)@Directive()將指令元數(shù)據(jù)綁定到類上，指令可以通過(guò)添加元素屬性的方式進(jìn)行使用。當(dāng) Angular 開(kāi)始渲染時(shí)，它會(huì)根據(jù)指令對(duì) DOM 進(jìn)行修改。類似ngIf與ngFor這類指令會(huì)直接影響到dom樹(shù)的結(jié)構(gòu)。組件作為指令的一個(gè)重要子類，組件本質(zhì)上可以看作是一個(gè)帶有模板的指令。

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>