Angular 有自己的詞匯表。 雖然大多數(shù) Angular 短語(yǔ)都是日常用語(yǔ)或計(jì)算機(jī)術(shù)語(yǔ),但是在 Angular 體系中,它們有特別的含義。
本詞匯表列出了常用術(shù)語(yǔ)和少量具有反常或意外含義的不常用術(shù)語(yǔ)。
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 組件。
注:
- 參考 [Angular 元素]() 一文。
一種為類提供元數(shù)據(jù)的結(jié)構(gòu)。
注:
參見(jiàn) [裝飾器]()。
應(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]() 一文。
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:tslin
t 包中,它使用 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 build
或 ng test
)的內(nèi)置實(shí)現(xiàn)替換為第三方工具。
指令 (directive)的一種??梢员O(jiān)聽(tīng)或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、組件的行為。通常用作 HTML 屬性,就像它的名字所暗示的那樣。
注:
- 參考 [屬性型指令]() 一文。
廣義上是指把變量或?qū)傩栽O(shè)置為某個(gè)數(shù)據(jù)值的一種實(shí)踐。 在 Angular 中,一般是指數(shù)據(jù)綁定,它會(huì)根據(jù)數(shù)據(jù)對(duì)象屬性的值來(lái)設(shè)置 DOM 對(duì)象的屬性。
有時(shí)也會(huì)指在“令牌(Token)”和依賴提供者(Provider) 之間的依賴注入 綁定。
一種用來(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è)函數(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)配置。
Angular 使用大小寫約定來(lái)區(qū)分多種名字,詳見(jiàn)風(fēng)格指南中的 "命名" 一節(jié)。下面是這些大小寫類型的匯總表:
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è)]() 一文。
裝飾器會(huì)出現(xiàn)在類定義的緊前方,用來(lái)聲明該類具有指定的類型,并且提供適合該類型的元數(shù)據(jù)。
可以用下列裝飾器來(lái)聲明 Angular 的類:
出現(xiàn)在類定義中屬性緊前方的裝飾器語(yǔ)句用來(lái)聲明該字段的類型。比如 @Input
和 @Output
。
在 Angular 中,是指收錄在同一個(gè) npm 包 中的一組原理圖(schematics)。
Angular CLI 是一個(gè)命令行工具,用于管理 Angular 的開(kāi)發(fā)周期。它用于為工作區(qū)或項(xiàng)目創(chuàng)建初始的腳手架,并且運(yùn)行生成器(schematics)來(lái)為初始生成的版本添加或修改各類代碼。 CLI 支持開(kāi)發(fā)周期中的所有階段,比如構(gòu)建、測(cè)試、打包和部署。
注:
參考 [Schematics CLI]() 一文。
一個(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)概覽]() 一章。
參考 [工作空間配置]() 。
一種 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)組件]()。
這個(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ǔ)法]():
類的一種類型,你可以把它們添加到 NgModule 的 declarations 列表中。 你可以聲明組件、指令和管道。
不要聲明:
一個(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,以及該如何處理它們。
注:
- 參考 [類裝飾器]()、[類屬性裝飾器]()。
依賴注入既是設(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 中的依賴注入]() 一章。
一種用來(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]() 一章。
一個(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)交給它。
指令分為三類:
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)用中使用它。
一種特殊用途的庫(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)航。
一種在運(yùn)行期間把組件添加到 DOM 中的技術(shù),它需要你從編譯期間排除該組件,然后,當(dāng)你把它添加到 DOM 中時(shí),再把它接入 Angular 的變更檢測(cè)與事件處理框架。
注:
參考 [自定義元素](),它提供了一種更簡(jiǎn)單的方式來(lái)達(dá)到相同的效果。
在啟動(dòng)時(shí)加載的 NgModule 和組件被稱為急性加載,與之相對(duì)的是那些在運(yùn)行期間才加載的方式(惰性加載)。 參見(jiàn)惰性加載。
[官方 JavaScript 語(yǔ)言規(guī)范]()
并不是所有瀏覽器都支持最新的 ECMAScript 標(biāo)準(zhǔn),不過(guò)你可以使用轉(zhuǎn)譯器(比如TypeScript)來(lái)用最新特性寫代碼,然后它會(huì)被轉(zhuǎn)譯成可以在瀏覽器的其它版本上運(yùn)行的代碼。
注:
參考 [瀏覽器支持]()。
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ì)比下 [自定義元素]()。
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)入。
一個(gè) FormControl 實(shí)例,它是 Angular 表單的基本構(gòu)造塊。它會(huì)和 FormGroup 和 FormArray 一起,跟蹤表單輸入元素的值、有效性和狀態(tài)。
注:
參考 [Angular 表單簡(jiǎn)介]()。
是指在指定的時(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)介]()。
一種檢查,當(dāng)表單值發(fā)生變化時(shí)運(yùn)行,并根據(jù)預(yù)定義的約束來(lái)匯報(bào)指定的這些值是否正確并完全。響應(yīng)式表單使用驗(yàn)證器函數(shù),而模板驅(qū)動(dòng)表單則使用驗(yàn)證器指令。
注:
參考 [表單驗(yàn)證器]()。
是否能夠在創(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ù)模型。
Angular 中的類或其它概念使用依賴注入機(jī)制來(lái)提供依賴。 可供注入的服務(wù)類必須使用 @Injectable() 裝飾器標(biāo)出來(lái)。其它條目,比如常量值,也可用于注入。
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í)依賴注入]()。
當(dāng)定義指令時(shí),指令屬性上的 @Input() 裝飾器讓該屬性可以作為屬性綁定的目標(biāo)使用。 數(shù)據(jù)值會(huì)從等號(hào)右側(cè)的模板表達(dá)式所指定的數(shù)據(jù)源流入組件的輸入屬性。
注:
參考 [輸入與輸出屬性]()。
屬性數(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 是 Angular 的下一代編譯和渲染管道的代號(hào)。在 Angular 的版本 9 中,默認(rèn)情況下使用新的編譯器和運(yùn)行時(shí),而不再用舊的編譯器和運(yùn)行時(shí),也就是 View Engine。
注:
參考 [Angular Ivy]()。
參見(jiàn) [ECMAScript]() 和 [TypeScript]()。
在啟動(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) 編譯]()。
惰性加載過(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)用。
一種 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)]()。
一種接口,它允許你監(jiān)聽(tīng)指令和組件的生命周期,比如創(chuàng)建、更新和銷毀等。
每個(gè)接口只有一個(gè)鉤子方法,方法名是接口名加前綴 ng。例如,OnInit 接口的鉤子方法名為 ngOnInit。
Angular 會(huì)按以下順序調(diào)用鉤子方法:
注:
參考 [生命周期鉤子頁(yè)]()。
通常,模塊會(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]()。
Angular 兼容性編譯器。如果使用 Ivy 構(gòu)建應(yīng)用程序,但依賴未用 Ivy 編譯的庫(kù),則 CLI 將使用 ngcc 自動(dòng)更新依賴庫(kù)以使用 Ivy。
一種帶有 @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 包管理器用于分發(fā)與加載 Angular 的模塊和庫(kù)。
注:
你還可以了解 Angular 如何使用 [Npm 包]() 的更多知識(shí)。
一個(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ì)象]()。
傳給可觀察對(duì)象 的 subscribe() 方法的一個(gè)對(duì)象,其中定義了訂閱者的一組回調(diào)函數(shù)。
當(dāng)定義指令時(shí),指令屬性上的 @Output() 裝飾器會(huì)讓該屬性可用作事件綁定的目標(biāo)。 事件從該屬性流出到等號(hào)右側(cè)指定的模板表達(dá)式中。
注:
參考 [輸入與輸出屬性]()。
一個(gè)帶有 @Pipe{} 裝飾器的類,它定義了一個(gè)函數(shù),用來(lái)把輸入值轉(zhuǎn)換成輸出值,以顯示在視圖中。 Angular 定義了很多管道,并且你還可可以自定義新的管道。
注:
參考 [管道]()。
在 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)使用框架的其余部分。
一個(gè) NPM 包,它負(fù)責(zé)彌補(bǔ)瀏覽器 JavaScript 實(shí)現(xiàn)與最新標(biāo)準(zhǔn)之間的 "縫隙"。參見(jiàn)瀏覽器支持頁(yè),以了解要在特定平臺(tái)支持特定功能時(shí)所需的膩?zhàn)幽_本。
在 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)]()。
一個(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ù)和依賴注入。
注:
參考 [依賴注入]()。
通過(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)介]()。
一種工具,用來(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)航]()。
一種指令,它在路由組件的模板中扮演占位符的角色,Angular 會(huì)根據(jù)當(dāng)前的路由狀態(tài)動(dòng)態(tài)填充它。
一個(gè)模板中帶有 RouterOutlet 指令的 Angular 組件,用于根據(jù)路由器的導(dǎo)航顯示相應(yīng)的視圖。
注:
參考 [路由與導(dǎo)航]()。
在原理圖 中,是指一個(gè)在文件樹(shù)上運(yùn)行的函數(shù),用于以指定方式創(chuàng)建、刪除或修改文件,并返回一個(gè)新的 Tree 對(duì)象。
腳手架庫(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 自帶了一個(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。
一種把相關(guān)的 npm 包分組到一起的方式。 Angular 的 NgModule 都是在一些以 @angular 為范圍名的范圍化包中發(fā)布的。比如 @angular/core、@angular/common、@angular/forms 和 @angular/router。
和導(dǎo)入普通包相同的方式導(dǎo)入范圍化包。
import { Component } from '@angular/core';
一項(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ù)端渲染。
在 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)介]()。
一種指令類型,它能通過(guò)修改 DOM (添加、刪除或操縱元素及其子元素)來(lái)修整或重塑 HTML 的布局。
注:
參考 [結(jié)構(gòu)型指令頁(yè)]()。
一個(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ā)出的幾種通知類型:
項(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)。
用來(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è)不同的組件。
一種在視圖中使用 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)介]()。
一種類似 TypeScript 的語(yǔ)法,Angular 用它對(duì)數(shù)據(jù)綁定 (data binding)進(jìn)行求值。
到[模板表達(dá)式]()部分了解更多模板表達(dá)式的知識(shí)。
用于高效查表的不透明標(biāo)識(shí)符(譯注:不透明是指你不必了解其細(xì)節(jié))。在 Angular 中,DI 令牌用于在依賴注入系統(tǒng)中查找服務(wù)提供者。
一種翻譯過(guò)程,它會(huì)把一個(gè)版本的 JavaScript 轉(zhuǎn)換成另一個(gè)版本,比如把下一版的 ES2015 轉(zhuǎn)換成老版本的 ES5。
在 schematics 中,一個(gè)用 Tree 類表示的虛擬文件系統(tǒng)。 Schematic 規(guī)則以一個(gè) tree 對(duì)象作為輸入,對(duì)它們進(jìn)行操作,并且返回一個(gè)新的 tree 對(duì)象。
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]()。
用來(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ù)端渲染]()。
視圖是可顯示元素的最小分組單位,它們會(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)加載或卸載。
Angular 9 之前的版本使用的編譯和渲染管道??蓪?duì)比 Ivy。
一棵相關(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。
參見(jiàn) [自定義元素]()。
一組基于 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) [工作空間配置]()。
一個(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)]()。
一組異步任務(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)。
更多建議: