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

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

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

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

指令 (directive)

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

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

屬性型指令

監(jiān)聽或修改其它 HTML 元素、特性 (attribute)、屬性 (property)软啼、組件的行為的命令桑谍，通常用作修改 HTML 屬性（樣式等）。
如ngClass祸挪、ngStyle锣披。

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

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

組件 (component)

一個網(wǎng)頁中一切皆可以視為組件闪唆。
一個按鈕或者一個表格都可以是一個組件盅粪，其實組件就相當(dāng)于汽車零件钓葫，一個零件由各種材料（html悄蕾、css、js等構(gòu)成）础浮，它只維護(hù)自身的邏輯帆调。

封裝桶

就是把一個組件的部分文件放在一個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';

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

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

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

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

駝峰式命名法 (camelCase)

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

Pascal 命名法 (PascalCase)

每個單詞或縮寫都以大寫開頭辆床，也稱大寫駝峰式命名法佳晶。
類名一般用這個寫法。

中線命名法 (dash-case)

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

蛇形命名法

在多個詞之間用下劃線(_)分隔咨堤。也叫下劃線命名法菇篡。

裝飾器（decorator | decoration）

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

依賴注入（dependency injection）

需要的東西（依賴）直接從提供者（providers）那里拿過來用铝侵，不需要就不帶提供者玩灼伤。

注入器 (injector)

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

提供商 (provider)

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

ECMAScript 語言

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

ECMAScript 2015

簡寫： ES6 語言
縮寫： ES2015 語言

ES5 語言

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

輸入屬性(input)

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

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

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

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

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

輸出屬性

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

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

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

父組件：

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

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

把變量插入html中。
ts：

public me = '萬年青桐五';

html:

<div>我是{{me}},求帶飛团赏。</div> // 我是萬年青桐五箕般，求帶飛。

生命周期鉤子 (lifecycle hook)

不同時候可以做什么事情舔清。比如20分鐘才可以打大龍丝里。

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

模塊 (module)

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

可觀察對象 (observable)

在接口請求的時候會用到，將異步數(shù)據(jù)轉(zhuǎn)化為數(shù)據(jù)流惨缆，自身也可以生成一些自定義的數(shù)據(jù)流糜值。它是引自的RxJS(Reactive Extensions for JavaScript)丰捷，一個第三方包。

管道

一個可以把米做成米飯的函數(shù)寂汇，管道起到一個轉(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)

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

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

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

路由器 (router)

通過配置不同的路由会烙，加載不同的組件或模塊，組合成不同的頁面筒捺。

路由組件 (routing component)

一個帶有路由插座 ( RouterOutlet ) 的 Angular 組件柏腻。
那什么是路由插座？其實可以理解為我們平時用的插排系吭，每個孔都是一個路由五嫂，插上這個孔的電器是路由對應(yīng)的組件。這個插座加上插上的電器才是我們想要的組件肯尺。

路由插座怎么用沃缘？里面的過程是什么樣的？看下面则吟。
文件形如：
├─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路由槐臀，這時候發(fā)現(xiàn)list的html里面有路由插座（router-outlet），就去找子路由氓仲，根據(jù)子路由把對應(yīng)的組件插入到路由插座的位置水慨。

范圍化包 (scoped package)

是指Angular的框架源碼得糜，它根據(jù)不同功能分成不同模塊的包，每個包都有一定的作用范圍晰洒。以@angular開頭朝抖。

• @angular/core：核心模塊，包含變化監(jiān)測谍珊、依賴注入槽棍、渲染等核心功能的代碼；
• @angular/common：通用模塊抬驴，包含一些常用的內(nèi)置指令的代碼炼七；
• @angular/compiler：編譯相關(guān)功能；
• @angular/platform-browser 和 @angular/platform-browser-dynamic 是跟平臺相關(guān)的布持，這兩個模塊支持 Angular應(yīng)用運(yùn)行在瀏覽器里豌拙，對應(yīng)的還有 @angular/platform-server，用于服務(wù)器端渲染题暖；
• @angular/forms： 引入表單相關(guān)按傅；
• @angular/http： 網(wǎng)絡(luò)請求相關(guān)；
• @angular/router ： 路由相關(guān)胧卤；
• @angular/animations： 動畫相關(guān)唯绍。

分成模塊的好處是不用的話就不需要引入這個包，比如我不寫動畫就不用引入@angular/animations這個包枝誊。
題外話：和本主題無關(guān)的其他幾個包的作用：

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

服務(wù) (service)

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

模板 (template)

其實就是個html

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

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

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

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

轉(zhuǎn)譯（transpile)

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

視圖 (view)

視圖是屏幕中一小塊朝氓，用來顯示信息并響應(yīng)用戶動作魔市，例如點(diǎn)擊主届、移動鼠標(biāo)和按鍵。