預(yù) (ahead-of-time, AoT) 編譯

在打包項(xiàng)目的時(shí)候提前編譯好應(yīng)用，打包好之后可以直接啟動(dòng)，而不是把編譯器打包在應(yīng)用中用的時(shí)候再編譯。生產(chǎn)環(huán)境使用。

即時(shí) (just-in-time, JiT) 編譯

瀏覽器中啟動(dòng)并編譯所有的組件和模塊，動(dòng)態(tài)運(yùn)行應(yīng)用程序。開(kāi)發(fā)過(guò)程中使用。

指令 (directive)

告訴Angular怎么創(chuàng)建或改變HTML 元素。
分為三類(lèi)：

• 屬性型指令
• 結(jié)構(gòu)性指令
• 組件

屬性型指令

監(jiān)聽(tīng)或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、組件的行為的命令，通常用作修改 HTML 屬性（樣式等）。
如ngClass、ngStyle。

結(jié)構(gòu)性指令

監(jiān)聽(tīng)或者修改元素的結(jié)構(gòu)，刪除或者增加dom。如ngIf這個(gè)“條件化元素”指令，ngFor這個(gè)“重復(fù)器”指令。

組件 (component)

一個(gè)網(wǎng)頁(yè)中一切皆可以視為組件。
一個(gè)按鈕或者一個(gè)表格都可以是一個(gè)組件，其實(shí)組件就相當(dāng)于汽車(chē)零件，一個(gè)零件由各種材料（html、css、js等構(gòu)成），它只維護(hù)自身的邏輯。

封裝桶

就是把一個(gè)組件的部分文件放在一個(gè)index.ts一起拋出去供別的地方引用。

├─login
│ ├─login.component.ts
│ ├─login.service.ts
│ ├─login.directive.ts
│ ├─ index.ts
...
index.ts里面引入 login.component.ts等文件

export * from './login.component.ts'; 
export * from './login.service.ts'; 

別的地方引用

import { loginComponent, LoginService } from '../login';

直接寫(xiě)組件的文件夾會(huì)默認(rèn)尋找下面的index.ts

Angular 模塊同樣可以把組件、服務(wù)指令等放在一起拋出去。

數(shù)據(jù)綁定（data binding）

把后臺(tái)數(shù)據(jù)展示出來(lái)，把用戶(hù)操作轉(zhuǎn)換為數(shù)據(jù)獲取到。

駝峰式命名法 (camelCase)

首字母小寫(xiě)，其他字母或縮寫(xiě)首字母大寫(xiě)。又叫小寫(xiě)駝峰式命名法 (lower camel case) 。
函數(shù)、屬性和方法命名一般用在這個(gè)寫(xiě)法。

Pascal 命名法 (PascalCase)

每個(gè)單詞或縮寫(xiě)都以大寫(xiě)開(kāi)頭，也稱(chēng)大寫(xiě)駝峰式命名法。
類(lèi)名一般用這個(gè)寫(xiě)法。

中線命名法 (dash-case)

使用中線 (-) 分隔每個(gè)單詞，也稱(chēng)為烤串命名法 kebab-case。
指令的選擇器（例如my-app）和文件名（例如hero-list.component.ts）通常是用中線命名法來(lái)命名。

蛇形命名法

在多個(gè)詞之間用下劃線(_)分隔。也叫下劃線命名法。

裝飾器（decorator | decoration）

用一個(gè)不恰當(dāng)?shù)脑~語(yǔ)：人模狗樣。
其實(shí)就是把一個(gè)未知的東西打扮一下讓Angular知道它是什么。
@component告訴Angular它是組件，@input告訴Angular它是輸入數(shù)據(jù)，@Injectable告訴Angular它是服務(wù)。

依賴(lài)注入（dependency injection）

需要的東西（依賴(lài)）直接從提供者（providers）那里拿過(guò)來(lái)用，不需要就不帶提供者玩。

注入器 (injector)

Angular 依賴(lài)注入系統(tǒng) (Dependency Injection System)中的一個(gè)對(duì)象， 它可以在自己的緩存中找到一個(gè)命名的“依賴(lài)”或者利用已注冊(cè)的提供商 (provider) 創(chuàng)建這樣一個(gè)依賴(lài)。

提供商 (provider)

依賴(lài)注入系統(tǒng)依靠提供商來(lái)創(chuàng)建依賴(lài)的實(shí)例。 它把一個(gè)查找令牌和代碼（有時(shí)也叫“配方”）關(guān)聯(lián)到一起，以便創(chuàng)建依賴(lài)值。

ECMAScript 語(yǔ)言

JavaScript統(tǒng)稱(chēng)，有多個(gè)JavaScript版本。最新批準(zhǔn)的 JavaScript 版本是ECMAScript 2016（也稱(chēng)“ES2016”或“ES7”）。

ECMAScript 2015

簡(jiǎn)寫(xiě)： ES6 語(yǔ)言
縮寫(xiě)： ES2015 語(yǔ)言

ES5 語(yǔ)言

“ECMAScript 5”的簡(jiǎn)寫(xiě)，大部分現(xiàn)代瀏覽器使用的 JavaScript 版本。

輸入屬性(input)

別的組件傳過(guò)來(lái)的數(shù)據(jù)，數(shù)據(jù)值會(huì)從模板表達(dá)式等號(hào)右側(cè)的數(shù)據(jù)源流入這個(gè)屬性 。它和輸出屬性一般用作父子組件傳遞信息。
別人（父組件）眼里的我：

// 等號(hào)右側(cè)往左側(cè)流入
<me [receiver]='別的傳來(lái)的'></me>

其實(shí)我(子組件)是這樣的

@Component({
  selector: 'me'
  ...
})
..
@input()  receiver : string;

ngOnChanges(){
    console.log("傳過(guò)來(lái)的數(shù)據(jù)",this.receiver); // 打印出來(lái)‘別的傳來(lái)的’
}

輸出屬性

通過(guò)觸發(fā)父組件的事件進(jìn)行傳遞數(shù)據(jù)。
事件流從這個(gè)屬性流出到模板表達(dá)式等號(hào)的右邊的接收者。
子組件ts

@Output() sendHero: EventEmitter<any> = new EventEmitter();

ngOnInit() {
    this.sendHero.emit('timo');
}

父組件：

html:
<me (sendHero)="getHero($event)"></me>
ts:
getHero(hero ：string){
   console.log("傳遞過(guò)來(lái)的是哪個(gè)召喚師",hero); //傳遞過(guò)來(lái)的是提莫
}

插值表達(dá)式 (interpolation)

把變量插入html中。
ts：

public me = '萬(wàn)年青桐五';

html:

<div>我是{{me}},求帶飛。</div> // 我是萬(wàn)年青桐五，求帶飛。

生命周期鉤子 (lifecycle hook)

不同時(shí)候可以做什么事情。比如20分鐘才可以打大龍。

• ngOnChanges - 在輸入屬性 (input)/輸出屬性 (output)的綁定值發(fā)生變化時(shí)調(diào)用。
• ngOnInit - 在第一次ngOnChanges完成后調(diào)用。
• ngDoCheck - 開(kāi)發(fā)者自定義變更檢測(cè)。
• ngAfterContentInit - 在組件內(nèi)容初始化后調(diào)用。
• ngAfterContentChecked - 在組件內(nèi)容每次檢查后調(diào)用。
• ngAfterViewInit - 在組件視圖初始化后調(diào)用。
• ngAfterViewChecked - 在組件視圖每次檢查后調(diào)用。
• ngOnDestroy - 在指令銷(xiāo)毀前調(diào)用。

模塊 (module)

模塊是一個(gè)內(nèi)聚的代碼塊，具有單一用途。就像前端和后端是兩個(gè)模塊，如果想要交流的話通過(guò)接口（Angular里面是引用）。

可觀察對(duì)象 (observable)

在接口請(qǐng)求的時(shí)候會(huì)用到，將異步數(shù)據(jù)轉(zhuǎn)化為數(shù)據(jù)流，自身也可以生成一些自定義的數(shù)據(jù)流。它是引自的RxJS(Reactive Extensions for JavaScript)，一個(gè)第三方包。

管道

一個(gè)可以把米做成米飯的函數(shù)，管道起到一個(gè)轉(zhuǎn)換的作用。
Angular內(nèi)置一些管道：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。
也可以自定義管道。
如：
假設(shè)

ts:
birthday = 1510156800000;
html:
<p> {{ birthday | date:"yy/MM/dd" }} </p>
轉(zhuǎn)換后：
<p> 2017/11/9 </p>

響應(yīng)式表單 (reactive forms)

通過(guò)組件中代碼構(gòu)建 Angular 表單的一種技術(shù)。 另一種技術(shù)是模板驅(qū)動(dòng)表單。
構(gòu)建響應(yīng)式表單時(shí)：

• 組件是“真理之源”。表單驗(yàn)證在組件代碼中定義。
• 在組件類(lèi)中，使用new FormControl()或者FormBuilder顯性地創(chuàng)建每個(gè)控件。
• 模板中的input元素不使用ngModel。
• 相關(guān)聯(lián)的 Angular 指令全部以Form開(kāi)頭，例如FormGroup、FormControl和FormControlName。

動(dòng)態(tài)表單非常強(qiáng)大、靈活，它在復(fù)雜數(shù)據(jù)輸入的場(chǎng)景下尤其好用，例如動(dòng)態(tài)的生成表單控制器。

路由器 (router)

通過(guò)配置不同的路由，加載不同的組件或模塊，組合成不同的頁(yè)面。

路由組件 (routing component)

一個(gè)帶有路由插座 ( RouterOutlet ) 的 Angular 組件。
那什么是路由插座？其實(shí)可以理解為我們平時(shí)用的插排，每個(gè)孔都是一個(gè)路由，插上這個(gè)孔的電器是路由對(duì)應(yīng)的組件。這個(gè)插座加上插上的電器才是我們想要的組件。

路由插座怎么用？里面的過(guò)程是什么樣的？看下面。
文件形如：
├─list
│ ├─list.component.ts
│ ├─list.routes.ts
│ ├─lol
│ │ ├─ lol.component.ts // 里面包含了html,css等

list.component.ts

@Component({
  ..
  template: '
    <h1>擁有路由插座的組件</h1>
    <router-outlet></router-outlet>
  '
})

list.routes.ts

import { ListComponent } from './list.component';
import { LolComponent } from './lol/lol.component';

export const listRoutes = [{
     path: 'list',
        component: ListComponent,
        children: [
            {
                path: 'lol', 
                component: LolComponent
            }
}]

首先是匹配到list路由，這時(shí)候發(fā)現(xiàn)list的html里面有路由插座（router-outlet），就去找子路由，根據(jù)子路由把對(duì)應(yīng)的組件插入到路由插座的位置。

范圍化包 (scoped package)

是指Angular的框架源碼，它根據(jù)不同功能分成不同模塊的包，每個(gè)包都有一定的作用范圍。以@angular開(kāi)頭。

• @angular/core：核心模塊，包含變化監(jiān)測(cè)、依賴(lài)注入、渲染等核心功能的代碼；
• @angular/common：通用模塊，包含一些常用的內(nèi)置指令的代碼；
• @angular/compiler：編譯相關(guān)功能；
• @angular/platform-browser 和 @angular/platform-browser-dynamic 是跟平臺(tái)相關(guān)的，這兩個(gè)模塊支持 Angular應(yīng)用運(yùn)行在瀏覽器里，對(duì)應(yīng)的還有 @angular/platform-server，用于服務(wù)器端渲染；
• @angular/forms： 引入表單相關(guān)；
• @angular/http： 網(wǎng)絡(luò)請(qǐng)求相關(guān)；
• @angular/router ： 路由相關(guān)；
• @angular/animations： 動(dòng)畫(huà)相關(guān)。

分成模塊的好處是不用的話就不需要引入這個(gè)包，比如我不寫(xiě)動(dòng)畫(huà)就不用引入@angular/animations這個(gè)包。
題外話：和本主題無(wú)關(guān)的其他幾個(gè)包的作用：

• core-js： 它是一個(gè)polyfill（填充庫(kù)：不同的瀏覽器對(duì)Web標(biāo)準(zhǔn)的支持程度也不同，填充庫(kù)（polyfill）能幫我們把這些不同點(diǎn)進(jìn)行標(biāo)準(zhǔn)化 ），用于兼容一些高級(jí)的語(yǔ)言特性以兼容更多瀏覽器平臺(tái)。
• rxjs：用于解決異步和事件組合問(wèn)題，多用于管理接口請(qǐng)求到的數(shù)據(jù)。
• zone.js： 用來(lái)幫助處理瀏覽器異步事件的工具庫(kù)，Angular的變化檢測(cè)機(jī)制基于這個(gè)庫(kù)實(shí)現(xiàn)的，這是必須引入的。

服務(wù) (service)

服務(wù)用于封裝不與任何特定視圖相關(guān)的數(shù)據(jù)和邏輯，或者用于在組件之間共享數(shù)據(jù)和邏輯。一般用于接口請(qǐng)求或傳遞數(shù)據(jù)。

模板 (template)

其實(shí)就是個(gè)html

@Component({
  template: `<div>其實(shí)就是個(gè)html</div>`
})

模板表達(dá)式 (template expression)

html里面的表達(dá)式。Angular會(huì) 執(zhí)行這個(gè)表達(dá)式得到值，并把它賦值給綁定目標(biāo)的屬性，這個(gè)綁定目標(biāo)可能是 HTML 元素、組件或指令。

<div [property]="1+1"></div>

轉(zhuǎn)譯（transpile)

把一種形式的 JavaScript（例如 TypeScript）轉(zhuǎn)換成另一種形式的 JavaScript（例如 ES5）的過(guò)程。

視圖 (view)

視圖是屏幕中一小塊，用來(lái)顯示信息并響應(yīng)用戶(hù)動(dòng)作，例如點(diǎn)擊、移動(dòng)鼠標(biāo)和按鍵。