白話Angular詞彙

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

在打包項目的時候提早編譯好應用，打包好以後能夠直接啓動，而不是把編譯器打包在應用中用的時候再編譯。生產環境使用。

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

瀏覽器中啓動並編譯全部的組件和模塊，動態運行應用程序。開發過程當中使用。

指令 (directive)

告訴Angular怎麼建立或改變HTML 元素。
分爲三類：

• 屬性型指令
• 結構性指令
• 組件

屬性型指令

監聽或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、組件的行爲的命令，一般用做修改 HTML 屬性（樣式等）。 如ngClass、ngStyle。

結構性指令

監聽或者修改元素的結構，刪除或者增長dom。如ngIf這個「條件化元素」指令，ngFor這個「重複器」指令。

組件 (component)

一個網頁中一切皆能夠視爲組件。
一個按鈕或者一個表格均可以是一個組件，其實組件就至關於汽車零件，一個零件由各類材料（html、css、js等構成），它只維護自身的邏輯。

封裝桶

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

直接寫組件的文件夾會默認尋找下面的index.ts

Angular 模塊一樣能夠把組件、服務指令等放在一塊兒拋出去。

註解 ？

實際上，是裝飾 (decoration) 的同義詞。

綁定（binding） ？

幾乎都是指的數據綁定 (data binding) 和將 HTML 對象屬性綁定到數據對象屬性的行爲。

有時也會指在「令牌」（也稱爲鍵）和依賴提供商 (provider) 之間的依賴注入 (dependency injection) 綁定。 這種用法不多，並且通常都會在上下文中寫清楚。

數據綁定（data binding）

把後臺數據展現出來，把用戶操做轉換爲數據獲取到。

啓動/引導 (bootstrap) ？

You launch an Angular application by "bootstrapping" it using the application root NgModule (AppModule).

經過應用程序根 Angular 模塊來啓動 Angular 應用程序。 啓動過程標識應用的頂級「根」組件 (component)，也就是應用加載的第一個組件。 更多信息，見設置。

你能夠在同一個index.html中引導多個應用，每一個應用都有它本身的頂級根組件。

駝峯式命名法 (camelCase)

首字母小寫，其餘字母或縮寫首字母大寫。又叫小寫駝峯式命名法 (lower camel case) 。
函數、屬性和方法命名通常用在這個寫法。

Pascal 命名法 (PascalCase)

每一個單詞或縮寫都以大寫開頭，也稱大寫駝峯式命名法。
類名通常用這個寫法。

中線命名法 (dash-case)

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

蛇形命名法

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

裝飾器（decorator | decoration）

用一個不恰當的詞語：人模狗樣。
其實就是把一個未知的東西打扮一下讓Angular知道它是什麼。
@component告訴Angular它是組件，@input告訴Angular它是輸入數據，@Injectable告訴Angular它是服務。

依賴注入（dependency injection）

須要的東西（依賴）直接從提供者（providers）那裏拿過來用，不須要就不帶提供者玩。

注入器 (injector) ？

Angular 依賴注入系統 (Dependency Injection System)中的一個對象， 它能夠在本身的緩存中找到一個命名的「依賴」或者利用已註冊的提供商 (provider) 建立這樣一個依賴。

提供商 (provider) ?

依賴注入系統依靠提供商來建立依賴的實例。 它把一個查找令牌和代碼（有時也叫「配方」）關聯到一塊兒，以便建立依賴值。

ECMAScript 語言

JavaScript統稱，有多個JavaScript版本。最新批准的 JavaScript 版本是ECMAScript 2016（也稱「ES2016」或「ES7」）。

ECMAScript 2015

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

ES5 語言

「ECMAScript 5」的簡寫，大部分現代瀏覽器使用的 JavaScript 版本。

輸入屬性(input)

別的組件傳過來的數據，數據值會從模板表達式等號右側的數據源流入這個屬性 。它和輸出屬性通常用做父子組件傳遞信息。
別人（父組件）眼裏的我：

// 等號右側往左側流入
<me [receiver]='別的傳來的'></me>
複製代碼

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

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

ngOnChanges(){
    console.log("傳過來的數據",this.receiver); // 打印出來‘別的傳來的’
}
複製代碼

輸出屬性

經過觸發父組件的事件進行傳遞數據。 事件流從這個屬性流出到模板表達式等號的右邊的接收者。
子組件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); //傳遞過來的是提莫
}
複製代碼

插值表達式 (interpolation)

把變量插入html中。 ts：

public me = '萬年青桐五';
複製代碼

html:

<div>我是{{me}},求帶飛。</div> // 我是萬年青桐五，求帶飛。
複製代碼

生命週期鉤子 (lifecycle hook)

不一樣時候能夠作什麼事情。好比20分鐘才能夠打大龍。

• ngOnChanges - 在輸入屬性 (input)/輸出屬性 (output)的綁定值發生變化時調用。
• ngOnInit - 在第一次ngOnChanges完成後調用。
• ngDoCheck - 開發者自定義變動檢測。
• ngAfterContentInit - 在組件內容初始化後調用。
• ngAfterContentChecked - 在組件內容每次檢查後調用。
• ngAfterViewInit - 在組件視圖初始化後調用。
• ngAfterViewChecked - 在組件視圖每次檢查後調用。
• ngOnDestroy - 在指令銷燬前調用。

模塊 (module)

模塊是一個內聚的代碼塊，具備單一用途。就像前端和後端是兩個模塊，若是想要交流的話經過接口（Angular裏面是引用）。

可觀察對象 (observable)

在接口請求的時候會用到，將異步數據轉化爲數據流，自身也能夠生成一些自定義的數據流。它是引自的RxJS(Reactive Extensions for JavaScript)，一個第三方包。

管道

一個能夠把米作成米飯的函數，管道起到一個轉換的做用。
Angular內置一些管道：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。 也能夠自定義管道。
如： 假設

ts:
birthday = 1510156800000;
html:
<p> {{ birthday | date:"yy/MM/dd" }} </p>
轉換後：
<p> 2017/11/9 </p>
複製代碼

響應式表單 (reactive forms) ?

經過組件中代碼構建 Angular 表單的一種技術。 另外一種技術是模板驅動表單。 構建響應式表單時：

• 組件是「真理之源」。表單驗證在組件代碼中定義。
• 在組件類中，使用new FormControl()或者FormBuilder顯性地建立每一個控件。
• 模板中的input元素不使用ngModel。
• 相關聯的 Angular 指令所有以Form開頭，例如FormGroup、FormControl和FormControlName。

動態表單很是強大、靈活，它在複雜數據輸入的場景下尤爲好用，例如動態的生成表單控制器。

路由器 (router)

經過配置不一樣的路由，加載不一樣的組件或模塊，組合成不一樣的頁面。

路由組件 (routing component)

一個帶有路由插座 ( RouterOutlet ) 的 Angular 組件。
那什麼是路由插座？其實能夠理解爲咱們平時用的插排，每一個孔都是一個路由，插上這個孔的電器是路由對應的組件。這個插座加上插上的電器纔是咱們想要的組件。

路由插座怎麼用？裏面的過程是什麼樣的？看下面。
文件形如：
├─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路由，這時候發現list的html裏面有路由插座（router-outlet），就去找子路由，根據子路由把對應的組件插入到路由插座的位置。

範圍化包 (scoped package)

是指Angular的框架源碼，它根據不一樣功能分紅不一樣模塊的包，每一個包都有必定的做用範圍。以@angular開頭。

• @angular/core：核心模塊，包含變化監測、依賴注入、渲染等核心功能的代碼；
• @angular/common：通用模塊，包含一些經常使用的內置指令的代碼；
• @angular/compiler：編譯相關功能；
• @angular/platform-browser 和 @angular/platform-browser-dynamic 是跟平臺相關的，這兩個模塊支持 Angular應用運行在瀏覽器裏，對應的還有 @angular/platform-server，用於服務器端渲染；
• @angular/forms： 引入表單相關；
• @angular/http： 網絡請求相關；
• @angular/router ： 路由相關；
• @angular/animations： 動畫相關。

分紅模塊的好處是不用的話就不須要引入這個包，好比我不寫動畫就不用引入@angular/animations這個包。
題外話：和本主題無關的其餘幾個包的做用：

• core-js： 它是一個polyfill（填充庫：不一樣的瀏覽器對Web標準的支持程度也不一樣，填充庫（polyfill）能幫咱們把這些不一樣點進行標準化 ），用於兼容一些高級的語言特性以兼容更多瀏覽器平臺。
• rxjs：用於解決異步和事件組合問題，多用於管理接口請求到的數據。
• zone.js： 用來幫助處理瀏覽器異步事件的工具庫，Angular的變化檢測機制基於這個庫實現的，這是必須引入的。

服務 (service)

服務用於封裝不與任何特定視圖相關的數據和邏輯，或者用於在組件之間共享數據和邏輯。通常用於接口請求或傳遞數據。

模板 (template)

其實就是個html

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

模板表達式 (template expression)

html裏面的表達式。Angular會 執行這個表達式獲得值，並把它賦值給綁定目標的屬性，這個綁定目標多是 HTML 元素、組件或指令。

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

複製代碼

轉譯（transpile)

把一種形式的 JavaScript（例如 TypeScript）轉換成另外一種形式的 JavaScript（例如 ES5）的過程。

視圖 (view)

視圖是屏幕中一小塊，用來顯示信息並響應用戶動做，例如點擊、移動鼠標和按鍵。