Angular9 詞匯表

2020-06-29 17:42 更新

詞匯表

Angular 有自己的詞匯表。 雖然大多數(shù) Angular 短語(yǔ)都是日常用語(yǔ)或計(jì)算機(jī)術(shù)語(yǔ),但是在 Angular 體系中,它們有特別的含義。

本詞匯表列出了常用術(shù)語(yǔ)和少量具有反常或意外含義的不常用術(shù)語(yǔ)。

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

Angular 的預(yù)先(AOT)編譯器可以在編譯期間把 Angular 的 HTML 代碼和 TypeScript 代碼轉(zhuǎn)換成高效的 JavaScript 代碼,這樣瀏覽器就可以直接下載并運(yùn)行它們。 對(duì)于產(chǎn)品環(huán)境,這是最好的編譯模式,相對(duì)于即時(shí) (JIT) 編譯而言,它能減小加載時(shí)間,并提高性能。

使用命令行工具 ngc 來(lái)編譯你的應(yīng)用之后,就可以直接啟動(dòng)一個(gè)模塊工廠,這意味著你不必再在 JavaScript 打包文件中包含 Angular 編譯器。

Angular 元素(element)

被包裝成自定義元素的 Angular 組件。

注:
- 參考 [Angular 元素]() 一文。

注解(Annotation)

一種為類提供元數(shù)據(jù)的結(jié)構(gòu)。

注:
參見(jiàn) [裝飾器]()。

應(yīng)用外殼(app-shell)

應(yīng)用外殼是一種在構(gòu)建期間通過(guò)路由為應(yīng)用渲染出部分內(nèi)容的方式。 這樣就能為用戶快速渲染出一個(gè)有意義的首屏頁(yè)面,因?yàn)闉g覽器可以在初始化腳本之前渲染出靜態(tài)的 HTML 和 CSS。

欲知詳情,參見(jiàn)應(yīng)用外殼模型。

你可以使用 Angular CLI 來(lái)生成一個(gè)應(yīng)用外殼。 它可以在瀏覽器下載完整版應(yīng)用之前,先快速啟動(dòng)一個(gè)靜態(tài)渲染頁(yè)面(所有頁(yè)面的公共骨架)來(lái)增強(qiáng)用戶體驗(yàn),等代碼加載完畢后再自動(dòng)切換到完整版。

注:
- 參考 [Service Worker 與 PWA]() 一文。

建筑師(Architect)

CLI 用來(lái)根據(jù)所提供的配置執(zhí)行復(fù)雜任務(wù)(比如編譯和執(zhí)行測(cè)試)的工具。 建筑師是一個(gè)外殼,它用來(lái)對(duì)一個(gè)指定的目標(biāo)配置來(lái)執(zhí)行一個(gè)構(gòu)建器(builder) (定義在一個(gè) npm 包中)。

在工作空間配置文件中,"architect" 區(qū)可以為建筑師的各個(gè)構(gòu)建器提供配置項(xiàng)。

比如,內(nèi)置的 linting 構(gòu)建器定義在 @angular-devkit/build_angular:tslint 包中,它使用 TSLint 工具來(lái)執(zhí)行 linting 操作,其配置是在 tslint.json 文件中指定的。

使用 CLI 命令 ng run可以通過(guò)指定與某個(gè)構(gòu)建器相關(guān)聯(lián)的目標(biāo)配置來(lái)調(diào)用此構(gòu)建器。 整合器(Integrator)可以添加一些構(gòu)建器來(lái)啟用某些工具和工作流,以便通過(guò) Angular CLI 來(lái)運(yùn)行它。比如,自定義構(gòu)建器可以把 CLI 命令(如 ng buildng test)的內(nèi)置實(shí)現(xiàn)替換為第三方工具。

屬性型指令(attribute directives)

指令 (directive)的一種??梢员O(jiān)聽(tīng)或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、組件的行為。通常用作 HTML 屬性,就像它的名字所暗示的那樣。

注:
- 參考 [屬性型指令]() 一文。

綁定 (binding)

廣義上是指把變量或?qū)傩栽O(shè)置為某個(gè)數(shù)據(jù)值的一種實(shí)踐。 在 Angular 中,一般是指數(shù)據(jù)綁定,它會(huì)根據(jù)數(shù)據(jù)對(duì)象屬性的值來(lái)設(shè)置 DOM 對(duì)象的屬性。

有時(shí)也會(huì)指在“令牌(Token)”和依賴提供者(Provider) 之間的依賴注入 綁定。

啟動(dòng)/引導(dǎo) (bootstrap)

一種用來(lái)初始化和啟動(dòng)應(yīng)用或系統(tǒng)的途徑。

在 Angular 中,應(yīng)用的根模塊(AppModule)有一個(gè) bootstrap 屬性,用于指出該應(yīng)用的的頂層組件。 在引導(dǎo)期間,Angular 會(huì)創(chuàng)建這些組件,并插入到宿主頁(yè)面 index.html 中。 你可以在同一個(gè) index.html 中引導(dǎo)多個(gè)應(yīng)用,每個(gè)應(yīng)用都有一些自己的組件。

注:
參考 [引導(dǎo)]() 一文。

構(gòu)建器(Builder)

一個(gè)函數(shù),它使用 Architect API 來(lái)執(zhí)行復(fù)雜的過(guò)程,比如構(gòu)建或測(cè)試。 構(gòu)建器的代碼定義在一個(gè) npm 包中。

比如,BrowserBuilder 針對(duì)某個(gè)瀏覽器目標(biāo)運(yùn)行 webpack 構(gòu)建,而 KarmaBuilder 則啟動(dòng) Karma 服務(wù)器,并且針對(duì)單元測(cè)試運(yùn)行 webpack 構(gòu)建。

CLI 命令 ng run 使用一個(gè)特定的目標(biāo)配置來(lái)調(diào)用構(gòu)建器。 工作空間配置文件 angular.json 中包含這些內(nèi)置構(gòu)建器的默認(rèn)配置。

大小寫類型(case types)

Angular 使用大小寫約定來(lái)區(qū)分多種名字,詳見(jiàn)風(fēng)格指南中的 "命名" 一節(jié)。下面是這些大小寫類型的匯總表:

  • 小駝峰形式(camelCase):符號(hào)、屬性、方法、管道名、非組件指令的選擇器、常量。 小駝峰(也叫標(biāo)準(zhǔn)駝峰)形式的第一個(gè)字母要使用小寫形式。比如 "selectedHero"。

  • 大駝峰形式(UpperCamelCase)或叫帕斯卡形式(PascalCase):類名(包括用來(lái)定義組件、接口、NgModule、指令、管道等的類)。 大駝峰形式的第一個(gè)字母要使用大寫形式。比如 "HeroListComponent"。

  • 中線形式(dash-case)或叫烤串形式(kebab-case):文件名中的描述部分,組件的選擇器。比如 "app-hero-list"。

  • 下劃線形式(underscore_case)或叫蛇形形式(snake_case):在 Angular 中沒(méi)有典型用法。蛇形形式使用下劃線連接各個(gè)單詞。 比如 "convert_link_mode"。

  • 大寫下劃線形式(UPPER_UNDERSCORE_CASE)或叫大寫蛇形形式(UPPER_SNAKE_CASE):傳統(tǒng)的常量寫法(可以接受,但更推薦用小駝峰形式(camelCase)) 大蛇形形式使用下劃線分隔的全大寫單詞。比如 "FIX_ME"。

變更檢測(cè)(change detection)

Angular 框架會(huì)通過(guò)此機(jī)制將應(yīng)用程序 UI 的狀態(tài)與數(shù)據(jù)的狀態(tài)同步。變更檢測(cè)器在運(yùn)行時(shí)會(huì)檢查數(shù)據(jù)模型的當(dāng)前狀態(tài),并在下一輪迭代時(shí)將其和先前保存的狀態(tài)進(jìn)行比較。

當(dāng)應(yīng)用邏輯更改組件數(shù)據(jù)時(shí),綁定到視圖中 DOM 屬性上的值也要隨之更改。變更檢測(cè)器負(fù)責(zé)更新視圖以反映當(dāng)前的數(shù)據(jù)模型。類似地,用戶也可以與 UI 進(jìn)行交互,從而引發(fā)要更改數(shù)據(jù)模型狀態(tài)的事件。這些事件可以觸發(fā)變更檢測(cè)。

使用默認(rèn)的(“CheckAlways”)變更檢測(cè)策略,變更檢測(cè)器將遍歷每個(gè)視圖模型上的視圖層次結(jié)構(gòu),以檢查模板中的每個(gè)數(shù)據(jù)綁定屬性。在第一階段,它將所依賴的數(shù)據(jù)的當(dāng)前狀態(tài)與先前狀態(tài)進(jìn)行比較,并收集更改。在第二階段,它將更新頁(yè)面上的 DOM 以反映出所有新的數(shù)據(jù)值。

如果設(shè)置了 OnPush(“CheckOnce”)變更檢測(cè)策略,則變更檢測(cè)器僅在顯式調(diào)用它或由 @Input 引用的變化或觸發(fā)事件處理程序時(shí)運(yùn)行。這通??梢蕴岣咝阅?。

注:
參考 [優(yōu)化 Angular 的變更檢測(cè)]() 一文。

類裝飾器(class decorator)

裝飾器會(huì)出現(xiàn)在類定義的緊前方,用來(lái)聲明該類具有指定的類型,并且提供適合該類型的元數(shù)據(jù)。

可以用下列裝飾器來(lái)聲明 Angular 的類:

  • @Component()

  • @Directive()

  • @Pipe()

  • @Injectable()

  • @NgModule()

類字段裝飾器(class field decorator)

出現(xiàn)在類定義中屬性緊前方的裝飾器語(yǔ)句用來(lái)聲明該字段的類型。比如 @Input@Output

集合(collection)

在 Angular 中,是指收錄在同一個(gè) npm 包 中的一組原理圖(schematics)。

命令行界面(CLI)

Angular CLI 是一個(gè)命令行工具,用于管理 Angular 的開(kāi)發(fā)周期。它用于為工作區(qū)或項(xiàng)目創(chuàng)建初始的腳手架,并且運(yùn)行生成器(schematics)來(lái)為初始生成的版本添加或修改各類代碼。 CLI 支持開(kāi)發(fā)周期中的所有階段,比如構(gòu)建、測(cè)試、打包和部署。

  • 要開(kāi)始使用 CLI 來(lái)創(chuàng)建新項(xiàng)目,參考 [建立本地開(kāi)發(fā)環(huán)境]()。

  • 要了解 CLI 的全部功能,參考 [CLI 命令參考手冊(cè)]()。

注:
參考 [Schematics CLI]() 一文。

組件 (component)

一個(gè)帶有 @Component() 裝飾器的類,和它的伴生模板關(guān)聯(lián)在一起。組件類及其模板共同定義了一個(gè)視圖。

組件是指令的一種特例。@Component() 裝飾器擴(kuò)展了 @Directive() 裝飾器,增加了一些與模板有關(guān)的特性。

Angular 的組件類負(fù)責(zé)暴露數(shù)據(jù),并通過(guò)數(shù)據(jù)綁定機(jī)制來(lái)處理絕大多數(shù)視圖的顯示和用戶交互邏輯。

注:
- 要了解更多關(guān)于組件類、模板和視圖的知識(shí),參考 [架構(gòu)概覽]() 一章。

配置(configuration)

參考 [工作空間配置]() 。

自定義元素(Custom element)

一種 Web 平臺(tái)的特性,目前已經(jīng)被絕大多數(shù)瀏覽器支持,在其它瀏覽器中也可以通過(guò)膩?zhàn)幽_本獲得支持(參考 [瀏覽器支持]())。

這種自定義元素特性通過(guò)允許你定義標(biāo)簽(其內(nèi)容是由 JavaScript 代碼來(lái)創(chuàng)建和控制的)來(lái)擴(kuò)展 HTML。當(dāng)自定義元素(也叫 Web Component)被添加到 CustomElementRegistry 之后就會(huì)被瀏覽器識(shí)別。

你可以使用 API 來(lái)轉(zhuǎn)換 Angular 組件,以便它能夠注冊(cè)進(jìn)瀏覽器中,并且可以用在你往 DOM 中添加的任意 HTML 中。 自定義元素標(biāo)簽可以把組件的視圖(包括變更檢測(cè)和數(shù)據(jù)綁定功能)插入到不受 Angular 控制的內(nèi)容中。

注:
- 參考 [Angular 元素]()。
- 參考 [加載動(dòng)態(tài)組件]()。

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

這個(gè)過(guò)程可以讓應(yīng)用程序?qū)?shù)據(jù)展示給用戶,并對(duì)用戶的操作(點(diǎn)擊、觸屏、按鍵)做出回應(yīng)。

在數(shù)據(jù)綁定機(jī)制下,你只要聲明一下 HTML 部件和數(shù)據(jù)源之間的關(guān)系,把細(xì)節(jié)交給框架去處理。 而以前的手動(dòng)操作過(guò)程是:將數(shù)據(jù)推送到 HTML 頁(yè)面中、添加事件監(jiān)聽(tīng)器、從屏幕獲取變化后的數(shù)據(jù),并更新應(yīng)用中的值。

更多的綁定形式,見(jiàn)[模板語(yǔ)法]():

  • [插值]()

  • [property 綁定]()

  • [事件綁定]()

  • [attribute 綁定]()

  • [CSS 類綁定]()

  • [樣式綁定]()

  • [基于 ngModel 的雙向數(shù)據(jù)綁定]()

可聲明對(duì)象(declarable)

類的一種類型,你可以把它們添加到 NgModule 的 declarations 列表中。 你可以聲明組件、指令和管道。

不要聲明:

  • 已經(jīng)在其它 NgModule 中聲明過(guò)的類

  • 從其它包中導(dǎo)入的指令數(shù)組。比如,不要再次聲明來(lái)自 @angular/forms 中的 FORMS_DIRECTIVES

  • NgModule 類

  • 服務(wù)類

  • 非 Angular 的類和對(duì)象,比如:字符串、數(shù)字、函數(shù)、實(shí)體模型、配置、業(yè)務(wù)邏輯和輔助類

裝飾器(decorator | decoration)

一個(gè)函數(shù),用來(lái)修飾緊隨其后的類或?qū)傩远x。 裝飾器(也叫注解)是 JavaScript 的一種語(yǔ)言特性,是一項(xiàng)位于階段 2(stage 2)的試驗(yàn)特性。

Angular 定義了一些裝飾器,用來(lái)為類或?qū)傩愿郊釉獢?shù)據(jù),來(lái)讓自己知道那些類或?qū)傩缘暮x,以及該如何處理它們。

注:
- 參考 [類裝飾器]()、[類屬性裝飾器]()。

依賴注入(dependency injection)

依賴注入既是設(shè)計(jì)模式,同時(shí)又是一種機(jī)制:當(dāng)應(yīng)用程序的一些部件(即一些依賴)需要另一些部件時(shí), 利用依賴注入來(lái)創(chuàng)建被請(qǐng)求的部件,并將它們注入到需要它們的部件中。

在 Angular 中,依賴通常是服務(wù),但是也可以是值,比如字符串或函數(shù)。應(yīng)用的注入器(它是在啟動(dòng)期間自動(dòng)創(chuàng)建的)會(huì)使用該服務(wù)或值的配置好的提供者來(lái)按需實(shí)例化這些依賴。各個(gè)不同的提供者可以為同一個(gè)服務(wù)提供不同的實(shí)現(xiàn)。

注:
參考 [Angular 中的依賴注入]() 一章。

DI 令牌(Token)

一種用來(lái)查閱的令牌,它關(guān)聯(lián)到一個(gè)依賴提供者,用于依賴注入系統(tǒng)中。

差異化加載 一種構(gòu)建技術(shù),它會(huì)為同一個(gè)應(yīng)用創(chuàng)建兩個(gè)發(fā)布包。一個(gè)是較小的發(fā)布包,是針對(duì)現(xiàn)代瀏覽器的。另一個(gè)是較大的發(fā)布包,能讓該應(yīng)用正確的運(yùn)行在像 IE 11 這樣的老式瀏覽器上,這些瀏覽器不能支持全部現(xiàn)代瀏覽器的 API。

注:
參考 [Deployment]() 一章。

指令 (directive)

一個(gè)可以修改 DOM 結(jié)構(gòu)或修改 DOM 和組件數(shù)據(jù)模型中某些屬性的類。 指令類的定義緊跟在 @Directive() 裝飾器之后,以提供元數(shù)據(jù)。

指令類幾乎總與 HTML 元素或?qū)傩?(attribute) 相關(guān)。 通常會(huì)把這些 HTML 元素或者屬性 (attribute) 當(dāng)做指令本身。 當(dāng) Angular 在 HTML 模板中發(fā)現(xiàn)某個(gè)指令時(shí),會(huì)創(chuàng)建與之相匹配的指令類的實(shí)例,并且把這部分 DOM 的控制權(quán)交給它。

指令分為三類:

  • 組件使用 @Component()(繼承自 @Directive())為某個(gè)類關(guān)聯(lián)一個(gè)模板。

  • [屬性型指令]() 修改頁(yè)面元素的行為和外觀。

  • [結(jié)構(gòu)型指令]() 修改 DOM 的結(jié)構(gòu)。

Angular 提供了一些以 ng 為前綴的內(nèi)置指令。你也可以創(chuàng)建新的指令來(lái)實(shí)現(xiàn)自己的功能。 你可以為自定義指令關(guān)聯(lián)一個(gè)選擇器(一種形如 <my-directive> 的 HTML 標(biāo)記),以擴(kuò)展模板語(yǔ)法,從而讓你能在應(yīng)用中使用它。

領(lǐng)域特定語(yǔ)言(DSL)

一種特殊用途的庫(kù)或 API,參見(jiàn)領(lǐng)域特定語(yǔ)言詞條。

Angular 使用領(lǐng)域特定語(yǔ)言擴(kuò)展了 TypeScript,用于與 Angular 應(yīng)用相關(guān)的許多領(lǐng)域。這些 DSL 都定義在 NgModule 中,比如 動(dòng)畫、表單和路由與導(dǎo)航。

動(dòng)態(tài)組件加載(dynamic component loading)

一種在運(yùn)行期間把組件添加到 DOM 中的技術(shù),它需要你從編譯期間排除該組件,然后,當(dāng)你把它添加到 DOM 中時(shí),再把它接入 Angular 的變更檢測(cè)與事件處理框架。

注:
參考 [自定義元素](),它提供了一種更簡(jiǎn)單的方式來(lái)達(dá)到相同的效果。

急性加載(Eager Loading)

在啟動(dòng)時(shí)加載的 NgModule 和組件被稱為急性加載,與之相對(duì)的是那些在運(yùn)行期間才加載的方式(惰性加載)。 參見(jiàn)惰性加載。

ECMAScript 語(yǔ)言

[官方 JavaScript 語(yǔ)言規(guī)范]()

并不是所有瀏覽器都支持最新的 ECMAScript 標(biāo)準(zhǔn),不過(guò)你可以使用轉(zhuǎn)譯器(比如TypeScript)來(lái)用最新特性寫代碼,然后它會(huì)被轉(zhuǎn)譯成可以在瀏覽器的其它版本上運(yùn)行的代碼。

注:
參考 [瀏覽器支持]()。

元素(Element)

Angular 定義了 ElementRef 類來(lái)包裝與渲染有關(guān)的原生 UI 元素。這讓你可以在大多數(shù)情況下使用 Angular 的模板和數(shù)據(jù)綁定機(jī)制來(lái)訪問(wèn) DOM 元素,而不必再引用原生元素。

本文檔中一般會(huì)使用元素(Element)來(lái)指代 ElementRef 的實(shí)例,注意與 DOM 元素(你必要時(shí)你可以直接訪問(wèn)它)區(qū)分開(kāi)。

可以對(duì)比下 [自定義元素]()。

入口點(diǎn)(Entry Point)

JavaScript 模塊的目的是供 npm 包的用戶進(jìn)行導(dǎo)入。入口點(diǎn)模塊通常會(huì)重新導(dǎo)出來(lái)自其它內(nèi)部模塊的一些符號(hào)。每個(gè)包可以包含多個(gè)入口點(diǎn)。比如 @angular/core 就有兩個(gè)入口點(diǎn)模塊,它們可以使用名字 @angular/core 和 @angular/core/testing 進(jìn)行導(dǎo)入。

表單控件(form control)

一個(gè) FormControl 實(shí)例,它是 Angular 表單的基本構(gòu)造塊。它會(huì)和 FormGroup 和 FormArray 一起,跟蹤表單輸入元素的值、有效性和狀態(tài)。

注:
參考 [Angular 表單簡(jiǎn)介]()。

表單模型(form model)

是指在指定的時(shí)間點(diǎn),表單輸入元素的值和驗(yàn)證狀態(tài)的"權(quán)威數(shù)據(jù)源"。當(dāng)使用響應(yīng)式表單時(shí),表單模型會(huì)在組件類中顯式創(chuàng)建。當(dāng)使用模板驅(qū)動(dòng)表單時(shí),表單模型是由一些指令隱式創(chuàng)建的。

注:
參考 [Angular 表單簡(jiǎn)介]()。

表單驗(yàn)證(form validation)

一種檢查,當(dāng)表單值發(fā)生變化時(shí)運(yùn)行,并根據(jù)預(yù)定義的約束來(lái)匯報(bào)指定的這些值是否正確并完全。響應(yīng)式表單使用驗(yàn)證器函數(shù),而模板驅(qū)動(dòng)表單則使用驗(yàn)證器指令。

注:
參考 [表單驗(yàn)證器]()。

不可變性(immutability)

是否能夠在創(chuàng)建之后修改值的狀態(tài)。響應(yīng)式表單會(huì)執(zhí)行不可變性的更改,每次更改數(shù)據(jù)模型都會(huì)生成一個(gè)新的數(shù)據(jù)模型,而不是修改現(xiàn)有的數(shù)據(jù)模型。 模板驅(qū)動(dòng)表單則會(huì)執(zhí)行可變的更改,它通過(guò) NgModel 和雙向數(shù)據(jù)綁定來(lái)就地修改現(xiàn)有的數(shù)據(jù)模型。

可注入對(duì)象(injectable)

Angular 中的類或其它概念使用依賴注入機(jī)制來(lái)提供依賴。 可供注入的服務(wù)類必須使用 @Injectable() 裝飾器標(biāo)出來(lái)。其它條目,比如常量值,也可用于注入。

注入器 (injector)

Angular 依賴注入系統(tǒng)中可以在緩存中根據(jù)名字查找依賴,也可以通過(guò)配置過(guò)的提供者來(lái)創(chuàng)建依賴。 啟動(dòng)過(guò)程中會(huì)自動(dòng)為每個(gè)模塊創(chuàng)建一個(gè)注入器,并被組件樹(shù)繼承。

注入器會(huì)提供依賴的一個(gè)單例,并把這個(gè)單例對(duì)象注入到多個(gè)組件中。

模塊和組件級(jí)別的注入器樹(shù)可以為它們擁有的組件及其子組件提供同一個(gè)依賴的不同實(shí)例。

你可以為同一個(gè)依賴使用不同的提供者來(lái)配置這些注入器,這些提供者可以為同一個(gè)依賴提供不同的實(shí)現(xiàn)。

注:
參考 [多級(jí)依賴注入]()。

輸入屬性 (input)

當(dāng)定義指令時(shí),指令屬性上的 @Input() 裝飾器讓該屬性可以作為屬性綁定的目標(biāo)使用。 數(shù)據(jù)值會(huì)從等號(hào)右側(cè)的模板表達(dá)式所指定的數(shù)據(jù)源流入組件的輸入屬性。

注:
參考 [輸入與輸出屬性]()。

插值 (interpolation)

屬性數(shù)據(jù)綁定 (property data binding) 的一種形式,位于雙大括號(hào)中的模板表達(dá)式 (template expression)會(huì)被渲染成文本。 在被賦值給元素屬性或者顯示在元素標(biāo)簽中之前,這些文本可能會(huì)先與周邊的文本合并,參見(jiàn)下面的例子。

<label>My current hero is {{hero.name}}</label>

常春藤引擎(Ivy)

Ivy 是 Angular 的下一代編譯和渲染管道的代號(hào)。在 Angular 的版本 9 中,默認(rèn)情況下使用新的編譯器和運(yùn)行時(shí),而不再用舊的編譯器和運(yùn)行時(shí),也就是 View Engine。

注:
參考 [Angular Ivy]()。

JavaScript

參見(jiàn) [ECMAScript]() 和 [TypeScript]()。

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

在啟動(dòng)期間,Angular 的即時(shí)編譯器(JIT)會(huì)在運(yùn)行期間把你的 Angular HTML 和 TypeScript 代碼轉(zhuǎn)換成高效的 JavaScript 代碼。

當(dāng)你運(yùn)行 Angular 的 CLI 命令 ng build 和 ng serve 時(shí),JIT 編譯是默認(rèn)選項(xiàng),而且是開(kāi)發(fā)期間的最佳實(shí)踐。但是強(qiáng)烈建議你不要在生產(chǎn)環(huán)境下使用 JIT 模式,因?yàn)樗鼤?huì)導(dǎo)致巨大的應(yīng)用負(fù)擔(dān),從而拖累啟動(dòng)時(shí)的性能。

注:
參考 [預(yù)先 (AOT) 編譯]()。

惰性加載(Lazy loading)

惰性加載過(guò)程會(huì)把應(yīng)用拆分成多個(gè)包并且按需加載它們,從而提高應(yīng)用加載速度。 比如,一些依賴可以根據(jù)需要進(jìn)行惰性加載,與之相對(duì)的是那些 急性加載 的模塊,它們是根模塊所要用的,因此會(huì)在啟動(dòng)期間加載。

路由器只有當(dāng)父視圖激活時(shí)才需要加載子視圖。同樣,你還可以構(gòu)建一些自定義元素,它們也可以在需要時(shí)才加載進(jìn) Angular 應(yīng)用。

庫(kù)(Library)

一種 Angular 項(xiàng)目。用來(lái)讓其它 Angular 應(yīng)用包含它,以提供各種功能。庫(kù)不是一個(gè)完整的 Angular 應(yīng)用,不能獨(dú)立運(yùn)行。(要想為非 Angular 應(yīng)用添加可復(fù)用的 Angular 功能,你可以使用 Angular 的自定義元素。)

庫(kù)的開(kāi)發(fā)者可以使用 CLI 在現(xiàn)有的 工作區(qū) 中 generate 新庫(kù)的腳手架,還能把庫(kù)發(fā)布為 npm 包。

應(yīng)用開(kāi)發(fā)者可以使用 CLI 來(lái)把一個(gè)已發(fā)布的庫(kù) add 進(jìn)這個(gè)應(yīng)用所在的工作區(qū)。

注:
參考 [原理圖(schematic)]()。

生命周期鉤子(Lifecycle hook)

一種接口,它允許你監(jiān)聽(tīng)指令和組件的生命周期,比如創(chuàng)建、更新和銷毀等。

每個(gè)接口只有一個(gè)鉤子方法,方法名是接口名加前綴 ng。例如,OnInit 接口的鉤子方法名為 ngOnInit。

Angular 會(huì)按以下順序調(diào)用鉤子方法:

  • 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 - 在指令銷毀前調(diào)用。

注:
參考 [生命周期鉤子頁(yè)]()。

模塊 (module)

通常,模塊會(huì)收集一組專注于單一目的的代碼塊。Angular 既使用 JavaScript 的標(biāo)準(zhǔn)模塊,也定義了 Angular 自己的模塊,也就是 NgModule。

在 JavaScript (ECMAScript) 中,每個(gè)文件都是一個(gè)模塊,該文件中定義的所有對(duì)象都屬于這個(gè)模塊。這些對(duì)象可以導(dǎo)出為公共對(duì)象,而這些公共對(duì)象可以被其它模塊導(dǎo)入后使用。

Angular 就是用一組 JavaScript 模塊(也叫庫(kù))的形式發(fā)布的。每個(gè) Angular 庫(kù)都帶有 @angular 前綴。 使用 NPM 包管理器安裝它們,并且使用 JavaScript 的 import 聲明語(yǔ)句從中導(dǎo)入各個(gè)部件。

注:
參考 [NgModule]()。

ngcc

Angular 兼容性編譯器。如果使用 Ivy 構(gòu)建應(yīng)用程序,但依賴未用 Ivy 編譯的庫(kù),則 CLI 將使用 ngcc 自動(dòng)更新依賴庫(kù)以使用 Ivy。

NgModule

一種帶有 @NgModule() 裝飾器的類定義,它會(huì)聲明并提供一組專注于特定功能的代碼塊,比如業(yè)務(wù)領(lǐng)域、工作流或一組緊密相關(guān)的能力集等。

像 JavaScript 模塊一樣,NgModule 能導(dǎo)出那些可供其它 NgModule 使用的功能,也可以從其它 NgModule 中導(dǎo)入其公開(kāi)的功能。 NgModule 類的元數(shù)據(jù)中包括一些供應(yīng)用使用的組件、指令和管道,以及導(dǎo)入、導(dǎo)出列表。參見(jiàn)可聲明對(duì)象。

NgModule 通常會(huì)根據(jù)它導(dǎo)出的內(nèi)容決定其文件名,比如,Angular 的 DatePipe 類就屬于 date_pipe.ts 文件中一個(gè)名叫 date_pipe 的特性模塊。 你可以從 Angular 的范圍化包中導(dǎo)入它們,比如 @angular/core。

每個(gè) Angular 應(yīng)用都有一個(gè)根模塊。通常,這個(gè)類會(huì)命名為 AppModule,并且位于一個(gè)名叫 app.module.ts 的文件中。

注:
參考 [NgModules]()。

npm 包

npm 包管理器用于分發(fā)與加載 Angular 的模塊和庫(kù)。

注:
你還可以了解 Angular 如何使用 [Npm 包]() 的更多知識(shí)。

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

一個(gè)多值生成器,這些值會(huì)被推送給訂閱者。 Angular 中到處都會(huì)用到異步事件處理。你要通過(guò)調(diào)用可觀察對(duì)象的 subscribe() 方法來(lái)訂閱它,從而讓這個(gè)可觀察對(duì)象得以執(zhí)行,你還要給該方法傳入一些回調(diào)函數(shù)來(lái)接收 "有新值"、"錯(cuò)誤" 或 "完成" 等通知。

可觀察對(duì)象可以把任意類型的一個(gè)或多個(gè)值傳給訂閱者,無(wú)論是同步(就像函數(shù)把值返回給它的調(diào)用者一樣)還是異步。 訂閱者會(huì)在生成了新值時(shí)收到包含這個(gè)新值的通知,以及正常結(jié)束或錯(cuò)誤結(jié)束時(shí)的通知。

Angular 使用一個(gè)名叫響應(yīng)式擴(kuò)展 (RxJS)的第三方包來(lái)實(shí)現(xiàn)這些功能。

注:
參考 [可觀察對(duì)象]()。

觀察者(Observer)

傳給可觀察對(duì)象 的 subscribe() 方法的一個(gè)對(duì)象,其中定義了訂閱者的一組回調(diào)函數(shù)。

輸出屬性 (output)

當(dāng)定義指令時(shí),指令屬性上的 @Output() 裝飾器會(huì)讓該屬性可用作事件綁定的目標(biāo)。 事件從該屬性流出到等號(hào)右側(cè)指定的模板表達(dá)式中。

注:
參考 [輸入與輸出屬性]()。

管道(pipe)

一個(gè)帶有 @Pipe{} 裝飾器的類,它定義了一個(gè)函數(shù),用來(lái)把輸入值轉(zhuǎn)換成輸出值,以顯示在視圖中。 Angular 定義了很多管道,并且你還可可以自定義新的管道。

注:
參考 [管道]()。

平臺(tái)(platform)

在 Angular 術(shù)語(yǔ)中,平臺(tái)是供 Angular 應(yīng)用程序在其中運(yùn)行的上下文。Angular 應(yīng)用程序最常見(jiàn)的平臺(tái)是 Web 瀏覽器,但它也可以是移動(dòng)設(shè)備的操作系統(tǒng)或 Web 服務(wù)器。

@angular/platform-* 軟件包提供了對(duì)各種 Angular 運(yùn)行時(shí)平臺(tái)的支持。這些軟件包通過(guò)提供用于收集用戶輸入和渲染指定平臺(tái) UI 的實(shí)現(xiàn),以允許使用 @angular/core 和 @angular/common 的應(yīng)用程序在不同的環(huán)境中執(zhí)行。隔離平臺(tái)相關(guān)的功能使開(kāi)發(fā)人員可以獨(dú)立于平臺(tái)使用框架的其余部分。

  • 在 Web 瀏覽器中運(yùn)行時(shí),BrowserModule 是從 platform-browser 軟件包中導(dǎo)入的,并支持簡(jiǎn)化安全性和事件處理的服務(wù),并允許應(yīng)用程序訪問(wèn)瀏覽器專有的功能,例如解釋鍵盤輸入和控制文檔要顯示的標(biāo)題。瀏覽器中運(yùn)行的所有應(yīng)用程序都使用同一個(gè)平臺(tái)服務(wù)。

  • 使用服務(wù)端渲染(SSR)時(shí),platform-server 包將提供 DOM、XMLHttpRequest 和其它不依賴瀏覽器的其它底層功能的 Web 服務(wù)器端實(shí)現(xiàn)。

膩?zhàn)幽_本(polyfill)

一個(gè) NPM 包,它負(fù)責(zé)彌補(bǔ)瀏覽器 JavaScript 實(shí)現(xiàn)與最新標(biāo)準(zhǔn)之間的 "縫隙"。參見(jiàn)瀏覽器支持頁(yè),以了解要在特定平臺(tái)支持特定功能時(shí)所需的膩?zhàn)幽_本。

項(xiàng)目(project)

在 Angular CLI 中,CLI 命令可能會(huì)創(chuàng)建或修改獨(dú)立應(yīng)用或庫(kù)。

由 ng new 創(chuàng)建的項(xiàng)目中包含一組源文件、資源和配置文件,當(dāng)你用 CLI 開(kāi)發(fā)或測(cè)試此應(yīng)用時(shí)就會(huì)用到它們。此外,還可以用 ng generate application 或 ng generate library 命令創(chuàng)建項(xiàng)目。

angular.json 文件可以配置某個(gè)工作空間 中的所有項(xiàng)目。

注:
參考 [項(xiàng)目文件結(jié)構(gòu)]()。

提供者 (provider)

一個(gè)實(shí)現(xiàn)了 Provider 接口的對(duì)象。一個(gè)提供者對(duì)象定義了如何獲取與 DI 令牌(token) 相關(guān)聯(lián)的可注入依賴。 注入器會(huì)使用這個(gè)提供者來(lái)創(chuàng)建它所依賴的那些類的實(shí)例。

Angular 會(huì)為每個(gè)注入器注冊(cè)一些 Angular 自己的服務(wù)。你也可以注冊(cè)應(yīng)用自己所需的服務(wù)提供者。

參見(jiàn)服務(wù)和依賴注入。

注:
參考 [依賴注入]()。

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

通過(guò)組件中代碼構(gòu)建 Angular 表單的一個(gè)框架。 另一種技術(shù)是模板驅(qū)動(dòng)表單

構(gòu)建響應(yīng)式表單時(shí):

"權(quán)威數(shù)據(jù)源"(表單模型)定義在組件類中。

表單驗(yàn)證在組件代碼而不是驗(yàn)證器指令中定義。

在組件類中,使用 new FormControl() 或者 FormBuilder 顯性地創(chuàng)建每個(gè)控件。

模板中的 input 元素不使用 ngModel。

相關(guān)聯(lián)的 Angular 指令全部以 Form 開(kāi)頭,例如 FormGroup()、FormControl() 和 FormControlName()。

另一種方式是模板驅(qū)動(dòng)表單。模板驅(qū)動(dòng)表單的簡(jiǎn)介和這兩種方式的比較,參見(jiàn) [Angular 表單簡(jiǎn)介]()。

路由器 (router)

一種工具,用來(lái)配置和實(shí)現(xiàn) Angular 應(yīng)用中各個(gè)狀態(tài)和視圖之間的導(dǎo)航。

Router 模塊是一個(gè) NgModule,它提供在應(yīng)用視圖間導(dǎo)航時(shí)需要的服務(wù)提供者和指令。路由組件是一種組件,它導(dǎo)入了 Router 模塊,并且其模板中包含 RouterOutlet 元素,路由器生成的視圖就會(huì)被顯示在那里。

路由器定義了在單頁(yè)面中的各個(gè)視圖之間導(dǎo)航的方式,而不是在頁(yè)面之間。它會(huì)解釋類似 URL 的鏈接,以決定該創(chuàng)建或銷毀哪些視圖,以及要加載或卸載哪些組件。它讓你可以在 Angular 應(yīng)用中獲得惰性加載的好處。

注:
參考 [路由與導(dǎo)航]()。

路由出口(router outlet)

一種指令,它在路由組件的模板中扮演占位符的角色,Angular 會(huì)根據(jù)當(dāng)前的路由狀態(tài)動(dòng)態(tài)填充它。

路由組件 (routing component)

一個(gè)模板中帶有 RouterOutlet 指令的 Angular 組件,用于根據(jù)路由器的導(dǎo)航顯示相應(yīng)的視圖。

注:
參考 [路由與導(dǎo)航]()。

規(guī)則(rule)

在原理圖 中,是指一個(gè)在文件樹(shù)上運(yùn)行的函數(shù),用于以指定方式創(chuàng)建、刪除或修改文件,并返回一個(gè)新的 Tree 對(duì)象。

原理圖(schematic)

腳手架庫(kù)會(huì)定義如何借助創(chuàng)建、修改、重構(gòu)或移動(dòng)文件和代碼等操作來(lái)生成或轉(zhuǎn)換某個(gè)項(xiàng)目。每個(gè)原理圖定義了一些規(guī)則,以操作一個(gè)被稱為文件樹(shù)的虛擬文件系統(tǒng)。

Angular CLI 使用原理圖來(lái)生成和修改 Angular 項(xiàng)目及其部件。

Angular 提供了一組用于 CLI 的原理圖。參見(jiàn) Angular CLI 命令參考手冊(cè)。當(dāng) ng add 命令向項(xiàng)目中添加某個(gè)庫(kù)時(shí),就會(huì)運(yùn)行原理圖。ng generate 命令則會(huì)運(yùn)行原理圖,來(lái)創(chuàng)建應(yīng)用、庫(kù)和 Angular 代碼塊。

公共庫(kù)的開(kāi)發(fā)者可以創(chuàng)建原理圖,來(lái)讓 CLI 生成他們自己的發(fā)布的庫(kù)。欲知詳情,參見(jiàn) devkit 文檔。

注:
參考 [原理圖]()和[把庫(kù)與 CLI 集成]()。

Schematics CLI

Schematics 自帶了一個(gè)命令行工具。 使用 Node 6.9 或更高版本,可以全局安裝這個(gè) Schematics CLI:

npm install -g @angular-devkit/schematics-cli

這會(huì)安裝可執(zhí)行文件 schematics,你可以用它來(lái)創(chuàng)建新工程、往現(xiàn)有工程中添加新的 schematic,或擴(kuò)展某個(gè)現(xiàn)有的 schematic。

范圍化包 (scoped package)

一種把相關(guān)的 npm 包分組到一起的方式。 Angular 的 NgModule 都是在一些以 @angular 為范圍名的范圍化包中發(fā)布的。比如 @angular/core、@angular/common、@angular/forms 和 @angular/router。

和導(dǎo)入普通包相同的方式導(dǎo)入范圍化包。

import { Component } from '@angular/core';

服務(wù)端渲染

一項(xiàng)在服務(wù)端生成靜態(tài)應(yīng)用頁(yè)面的技術(shù),它可以在對(duì)來(lái)自瀏覽器的請(qǐng)求進(jìn)行響應(yīng)時(shí)生成這些頁(yè)面或用它們提供服務(wù)。 它還可以提前把這些頁(yè)面生成為 HTML 文件,以便稍后用它們來(lái)提供服務(wù)。

該技術(shù)可以增強(qiáng)手機(jī)和低功耗設(shè)備的性能,而且會(huì)在應(yīng)用加載通過(guò)快速展示一個(gè)靜態(tài)首屏來(lái)提升用戶體驗(yàn)。這個(gè)靜態(tài)版本還能讓你的應(yīng)用對(duì)網(wǎng)絡(luò)蜘蛛更加友好。

你可以通過(guò) CLI 運(yùn)行 Angular Universal 工具,借助 @nguniversal/express-engine schematic 原理圖來(lái)更輕松的讓應(yīng)用支持服務(wù)端渲染。

服務(wù) (service)

在 Angular 中,服務(wù)就是一個(gè)帶有 @Injectable 裝飾器的類,它封裝了可以在應(yīng)用程序中復(fù)用的非 UI 邏輯和代碼。 Angular 把組件和服務(wù)分開(kāi),是為了增進(jìn)模塊化程度和可復(fù)用性。

@Injectable 元數(shù)據(jù)讓服務(wù)類能用于依賴注入機(jī)制中。可注入的類是用提供者進(jìn)行實(shí)例化的。 各個(gè)注入器會(huì)維護(hù)一個(gè)提供者的列表,并根據(jù)組件或其它服務(wù)的需要,用它們來(lái)提供服務(wù)的實(shí)例。

注:
參考 [服務(wù)與依賴注入簡(jiǎn)介]()。

結(jié)構(gòu)型指令(Structural directives)

一種指令類型,它能通過(guò)修改 DOM (添加、刪除或操縱元素及其子元素)來(lái)修整或重塑 HTML 的布局。

注:
參考 [結(jié)構(gòu)型指令頁(yè)]()。

訂閱者(Subscriber)

一個(gè)函數(shù),用于定義如何獲取或生成要發(fā)布的值或消息。 當(dāng)有消費(fèi)者調(diào)用可觀察對(duì)象的 subscribe() 方法時(shí),該函數(shù)就會(huì)執(zhí)行。

訂閱一個(gè)可觀察對(duì)象就會(huì)觸發(fā)該對(duì)象的執(zhí)行、為該對(duì)象關(guān)聯(lián)一些回調(diào)函數(shù),并創(chuàng)建一個(gè) Subscription(訂閱記錄)對(duì)象來(lái)讓你能取消訂閱。

subscribe() 方法接收一個(gè) JavaScript 對(duì)象(叫做觀察者(observer)),其中最多可以包含三個(gè)回調(diào),分別對(duì)應(yīng)可觀察對(duì)象可以發(fā)出的幾種通知類型:

  • next(下一個(gè))通知會(huì)發(fā)送一個(gè)值,比如數(shù)字、字符串、對(duì)象。

  • error(錯(cuò)誤)通知會(huì)發(fā)送 JavaScript 錯(cuò)誤或異常。

  • complete(完成)通知不會(huì)發(fā)送值,但是當(dāng)調(diào)用結(jié)束時(shí)會(huì)調(diào)用這個(gè)處理器。異步的值可能會(huì)在調(diào)用了完成之后繼續(xù)發(fā)送過(guò)來(lái)。

目標(biāo)

項(xiàng)目的一個(gè)可構(gòu)建或可運(yùn)行的子集,它是工作空間配置文件中的一個(gè)子對(duì)象,它會(huì)被建筑師(Architect)的構(gòu)建器(Builder)執(zhí)行。

在 angular.json 文件中,每個(gè)項(xiàng)目都有一個(gè) architect 分區(qū),其中包含一些用于配置構(gòu)建器的目標(biāo)。其中一些目標(biāo)對(duì)應(yīng)于 CLI 命令,比如 build、serve、test 和 lint。

比如,ng build 命令用來(lái)編譯項(xiàng)目時(shí)所調(diào)用的構(gòu)建器會(huì)使用一個(gè)特定的構(gòu)建工具,并且具有一份默認(rèn)配置,此配置中的值可以通過(guò)命令行參數(shù)進(jìn)行覆蓋。目標(biāo) build 還為 "生產(chǎn)環(huán)境" 構(gòu)建定義了另一個(gè)配置,可以通過(guò)在 build 命令上添加 --prod 標(biāo)志來(lái)調(diào)用它。

建筑師工具提供了一組構(gòu)建器。ng new 命令為初始應(yīng)用項(xiàng)目提供了一組目標(biāo)。ng generate application 和 ng generate library 命令則為每個(gè)新項(xiàng)目提供了一組目標(biāo)。這些目標(biāo)的選項(xiàng)和配置都可以進(jìn)行自定義,以便適應(yīng)你項(xiàng)目的需求。比如,你可能會(huì)想為項(xiàng)目的 "build" 目標(biāo)添加一個(gè) "staging" 或 "testing" 配置。

你還可以定義一個(gè)自定義構(gòu)建器,并且往項(xiàng)目配置中添加一個(gè)目標(biāo),來(lái)使用你的自定義構(gòu)建器。然后你就可以通過(guò) ng run 命令來(lái)運(yùn)行此目標(biāo)。

模板 (template)

用來(lái)定義要如何在 HTML 中渲染組件視圖的代碼。

模板會(huì)把純 HTML 和 Angular 的數(shù)據(jù)綁定語(yǔ)法、指令和模板表達(dá)式組合起來(lái)。Angular 的元素會(huì)插入或計(jì)算那些值,以便在頁(yè)面顯示出來(lái)之前修改 HTML 元素。

模板通過(guò) @Component() 裝飾器與組件類類關(guān)聯(lián)起來(lái)。模板代碼可以作為 template 屬性的值用內(nèi)聯(lián)的方式提供,也可以通過(guò) templateUrl 屬性鏈接到一個(gè)獨(dú)立的 HTML 文件。

用 TemplateRef 對(duì)象表示的其它模板用來(lái)定義一些備用視圖或內(nèi)嵌視圖,它們可以來(lái)自多個(gè)不同的組件。

模板驅(qū)動(dòng)表單(template-driven forms)

一種在視圖中使用 HTML 表單和輸入類元素構(gòu)建 Angular 表單的格式。 它的替代方案是響應(yīng)式表單框架。

當(dāng)構(gòu)建模板驅(qū)動(dòng)表單時(shí):

模板是“權(quán)威數(shù)據(jù)源”。使用屬性 (attribute) 在單個(gè)輸入元素上定義驗(yàn)證規(guī)則。

使用 ngModel 進(jìn)行雙向綁定,保持組件模型和用戶輸入之間的同步。

在幕后,Angular 為每個(gè)帶有 name 屬性和雙向綁定的輸入元素創(chuàng)建了一個(gè)新的控件。

相關(guān)的 Angular 指令都帶有 ng 前綴,例如 ngForm、ngModel 和 ngModelGroup。

另一種方式是響應(yīng)式表單。響應(yīng)式表單的簡(jiǎn)介和兩種方式的比較參見(jiàn) [Angular 表單簡(jiǎn)介]()。

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

一種類似 TypeScript 的語(yǔ)法,Angular 用它對(duì)數(shù)據(jù)綁定 (data binding)進(jìn)行求值。

到[模板表達(dá)式]()部分了解更多模板表達(dá)式的知識(shí)。

令牌(Token)

用于高效查表的不透明標(biāo)識(shí)符(譯注:不透明是指你不必了解其細(xì)節(jié))。在 Angular 中,DI 令牌用于在依賴注入系統(tǒng)中查找服務(wù)提供者。

轉(zhuǎn)譯(transpile)

一種翻譯過(guò)程,它會(huì)把一個(gè)版本的 JavaScript 轉(zhuǎn)換成另一個(gè)版本,比如把下一版的 ES2015 轉(zhuǎn)換成老版本的 ES5。

目錄樹(shù)(tree)

在 schematics 中,一個(gè)用 Tree 類表示的虛擬文件系統(tǒng)。 Schematic 規(guī)則以一個(gè) tree 對(duì)象作為輸入,對(duì)它們進(jìn)行操作,并且返回一個(gè)新的 tree 對(duì)象。

TypeScript

TypeScript 是一種基于 JavaScript 的程序設(shè)計(jì)語(yǔ)言,以其可選類型系統(tǒng)著稱。 TypeScript 提供了編譯時(shí)類型檢查和強(qiáng)大的工具支持(比如代碼補(bǔ)齊、重構(gòu)、內(nèi)聯(lián)文檔和智能搜索等)。 許多代碼編輯器和 IDE 都原生支持 TypeScript 或通過(guò)插件提供支持。

TypeScript 是 Angular 的首選語(yǔ)言。要了解更多,參見(jiàn) [typescriptlang.org]()。

Universal

用來(lái)幫 Angular 應(yīng)用實(shí)現(xiàn)服務(wù)端渲染的工具。 當(dāng)與應(yīng)用集成在一起時(shí),Universal 可以在服務(wù)端生成靜態(tài)頁(yè)面并用它們來(lái)響應(yīng)來(lái)自瀏覽器的請(qǐng)求。 當(dāng)瀏覽器正準(zhǔn)備運(yùn)行完整版應(yīng)用的時(shí)候,這個(gè)初始的靜態(tài)頁(yè)可以用作一個(gè)可快速加載的占位符。

欲知詳情,參見(jiàn) [Angular Universal: 服務(wù)端渲染]()。

視圖 (view)

視圖是可顯示元素的最小分組單位,它們會(huì)被同時(shí)創(chuàng)建和銷毀。 Angular 在一個(gè)或多個(gè)指令 (directive) 的控制下渲染視圖。

組件 (component) 類及其關(guān)聯(lián)的模板 (template)定義了一個(gè)視圖。 具體實(shí)現(xiàn)上,視圖由一個(gè)與該組件相關(guān)的 ViewRef 實(shí)例表示。 直屬于某個(gè)組件的視圖叫做宿主視圖。 通常會(huì)把視圖組織成一些視圖樹(shù)(view hierarchies)。

視圖中各個(gè)元素的屬性可以動(dòng)態(tài)修改以響應(yīng)用戶的操作,而這些元素的結(jié)構(gòu)(數(shù)量或順序)則不能。你可以通過(guò)在它們的視圖容器中插入、移動(dòng)或移除內(nèi)嵌視圖來(lái)修改這些元素的結(jié)構(gòu)。

當(dāng)用戶在應(yīng)用中導(dǎo)航時(shí)(比如使用路由器),視圖樹(shù)可以動(dòng)態(tài)加載或卸載。

視圖引擎(View Engine)

Angular 9 之前的版本使用的編譯和渲染管道??蓪?duì)比 Ivy。

視圖樹(shù)(View hierarchy)

一棵相關(guān)視圖的樹(shù),它們可以作為一個(gè)整體行動(dòng)。其根視圖就是組件的宿主視圖。宿主視圖可以是內(nèi)嵌視圖樹(shù)的根,它被收集到了宿主組件上的一個(gè)視圖容器(ViewContainerRef)中。視圖樹(shù)是 Angular 變更檢測(cè)的關(guān)鍵部件之一。

視圖樹(shù)和組件樹(shù)并不是一一對(duì)應(yīng)的。那些嵌入到指定視圖樹(shù)上下文中的視圖也可能是其它組件的宿主視圖。那些組件可能和宿主組件位于同一個(gè) NgModule 中,也可能屬于其它 NgModule。

Web 組件

參見(jiàn) [自定義元素]()。

工作空間(Workspace)

一組基于 Angular CLI 的 Angular 項(xiàng)目(也就是說(shuō)應(yīng)用或庫(kù)),它們通常共同位于一個(gè)單一的源碼倉(cāng)庫(kù)(比如 git)中。

CLI 的 ng new 命令會(huì)在文件系統(tǒng)中創(chuàng)建一個(gè)目錄(也就是工作空間的根目錄)。 在工作空間根目錄下,還會(huì)創(chuàng)建此工作空間的配置文件(angular.json),并且還會(huì)默認(rèn)初始化一個(gè)同名的應(yīng)用項(xiàng)目。

而用來(lái)創(chuàng)建或操作應(yīng)用和庫(kù)的命令(比如 add 和 generate)必須在工作區(qū)目錄下才能執(zhí)行。

欲知詳情,參見(jiàn) [工作空間配置]()。

工作空間配置(Workspace configuration)

一個(gè)名叫 angular.json 的文件,它位于 Angular 工作空間 的根目錄下,并為 Angular CLI 提供的或集成的各個(gè)構(gòu)建/開(kāi)發(fā)工具提供工作空間級(jí)和項(xiàng)目專屬的默認(rèn)配置項(xiàng)。

欲知詳情,參見(jiàn)工作空間配置。

還有一些項(xiàng)目專屬的配置文件是給某些工具使用的。比如 package.json 是給 npm 包管理器使用的,tsconfig.json 是給 TypeScript 轉(zhuǎn)譯器使用的,而 tslint.json 是給 TSLint 使用的。

欲知詳情,參見(jiàn)[工作空間]()和[項(xiàng)目文件結(jié)構(gòu)]()。

區(qū)域 (zone)

一組異步任務(wù)的執(zhí)行上下文。它對(duì)于調(diào)試、性能分析和測(cè)試那些包含了異步操作(如事件處理、承諾、遠(yuǎn)程服務(wù)器調(diào)用等)的應(yīng)用是非常有用的。

Angular 應(yīng)用會(huì)運(yùn)行在一個(gè) Zone 區(qū)域中,在這里,它可以對(duì)異步事件做出反應(yīng),可以通過(guò)檢查數(shù)據(jù)變更、利用數(shù)據(jù)綁定 (data bindings) 來(lái)更新信息顯示。

Zone 的使用方可以在異步操作完成之前或之后采取行動(dòng)。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)