白話Angular詞彙

莫莫莫發表於2019-02-22
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)

檢視是螢幕中一小塊，用來顯示資訊並響應使用者動作，例如點選、移動滑鼠和按鍵。

相關文章