Angular 有自己的詞匯表。 雖然大多數(shù) Angular 短語都是日常用語或計算機術語,但是在 Angular 體系中,它們有特別的含義。
本詞匯表列出了常用術語和少量具有反常或意外含義的不常用術語。
Angular 的預先(AOT)編譯器可以在編譯期間把 Angular 的 HTML 代碼和 TypeScript 代碼轉換成高效的 JavaScript 代碼,這樣瀏覽器就可以直接下載并運行它們。 對于產(chǎn)品環(huán)境,這是最好的編譯模式,相對于即時 (JIT) 編譯而言,它能減小加載時間,并提高性能。
使用命令行工具 ngc 來編譯你的應用之后,就可以直接啟動一個模塊工廠,這意味著你不必再在 JavaScript 打包文件中包含 Angular 編譯器。
被包裝成自定義元素的 Angular 組件。
注:
- 參考 [Angular 元素]() 一文。
一種為類提供元數(shù)據(jù)的結構。
注:
參見 [裝飾器]()。
應用外殼是一種在構建期間通過路由為應用渲染出部分內容的方式。 這樣就能為用戶快速渲染出一個有意義的首屏頁面,因為瀏覽器可以在初始化腳本之前渲染出靜態(tài)的 HTML 和 CSS。
欲知詳情,參見應用外殼模型。
你可以使用 Angular CLI 來生成一個應用外殼。 它可以在瀏覽器下載完整版應用之前,先快速啟動一個靜態(tài)渲染頁面(所有頁面的公共骨架)來增強用戶體驗,等代碼加載完畢后再自動切換到完整版。
注:
- 參考 [Service Worker 與 PWA]() 一文。
CLI 用來根據(jù)所提供的配置執(zhí)行復雜任務(比如編譯和執(zhí)行測試)的工具。 建筑師是一個外殼,它用來對一個指定的目標配置來執(zhí)行一個構建器(builder) (定義在一個 npm 包中)。
在工作空間配置文件中,"architect" 區(qū)可以為建筑師的各個構建器提供配置項。
比如,內置的 linting
構建器定義在 @angular-devkit/build_angular:tslin
t 包中,它使用 TSLint
工具來執(zhí)行 linting
操作,其配置是在 tslint.json
文件中指定的。
使用 CLI
命令 ng run
可以通過指定與某個構建器相關聯(lián)的目標配置來調用此構建器。 整合器(Integrator)可以添加一些構建器來啟用某些工具和工作流,以便通過 Angular CLI 來運行它。比如,自定義構建器可以把 CLI
命令(如 ng build
或 ng test
)的內置實現(xiàn)替換為第三方工具。
指令 (directive)的一種??梢员O(jiān)聽或修改其它 HTML 元素、特性 (attribute)、屬性 (property)、組件的行為。通常用作 HTML 屬性,就像它的名字所暗示的那樣。
注:
- 參考 [屬性型指令]() 一文。
廣義上是指把變量或屬性設置為某個數(shù)據(jù)值的一種實踐。 在 Angular 中,一般是指數(shù)據(jù)綁定,它會根據(jù)數(shù)據(jù)對象屬性的值來設置 DOM 對象的屬性。
有時也會指在“令牌(Token)”和依賴提供者(Provider) 之間的依賴注入 綁定。
一種用來初始化和啟動應用或系統(tǒng)的途徑。
在 Angular 中,應用的根模塊(AppModule)有一個 bootstrap
屬性,用于指出該應用的的頂層組件。 在引導期間,Angular 會創(chuàng)建這些組件,并插入到宿主頁面 index.html
中。 你可以在同一個 index.html
中引導多個應用,每個應用都有一些自己的組件。
注:
參考 [引導]() 一文。
一個函數(shù),它使用 Architect API 來執(zhí)行復雜的過程,比如構建或測試。 構建器的代碼定義在一個 npm 包中。
比如,BrowserBuilder
針對某個瀏覽器目標運行 webpack
構建,而 KarmaBuilder
則啟動 Karma
服務器,并且針對單元測試運行 webpack
構建。
CLI
命令 ng run
使用一個特定的目標配置來調用構建器。 工作空間配置文件 angular.json
中包含這些內置構建器的默認配置。
Angular 使用大小寫約定來區(qū)分多種名字,詳見風格指南中的 "命名" 一節(jié)。下面是這些大小寫類型的匯總表:
Angular 框架會通過此機制將應用程序 UI 的狀態(tài)與數(shù)據(jù)的狀態(tài)同步。變更檢測器在運行時會檢查數(shù)據(jù)模型的當前狀態(tài),并在下一輪迭代時將其和先前保存的狀態(tài)進行比較。
當應用邏輯更改組件數(shù)據(jù)時,綁定到視圖中 DOM 屬性上的值也要隨之更改。變更檢測器負責更新視圖以反映當前的數(shù)據(jù)模型。類似地,用戶也可以與 UI 進行交互,從而引發(fā)要更改數(shù)據(jù)模型狀態(tài)的事件。這些事件可以觸發(fā)變更檢測。
使用默認的(“CheckAlways”)變更檢測策略,變更檢測器將遍歷每個視圖模型上的視圖層次結構,以檢查模板中的每個數(shù)據(jù)綁定屬性。在第一階段,它將所依賴的數(shù)據(jù)的當前狀態(tài)與先前狀態(tài)進行比較,并收集更改。在第二階段,它將更新頁面上的 DOM 以反映出所有新的數(shù)據(jù)值。
如果設置了 OnPush(“CheckOnce”)變更檢測策略,則變更檢測器僅在顯式調用它或由 @Input 引用的變化或觸發(fā)事件處理程序時運行。這通常可以提高性能。
注:
參考 [優(yōu)化 Angular 的變更檢測]() 一文。
裝飾器會出現(xiàn)在類定義的緊前方,用來聲明該類具有指定的類型,并且提供適合該類型的元數(shù)據(jù)。
可以用下列裝飾器來聲明 Angular 的類:
出現(xiàn)在類定義中屬性緊前方的裝飾器語句用來聲明該字段的類型。比如 @Input
和 @Output
。
在 Angular 中,是指收錄在同一個 npm 包 中的一組原理圖(schematics)。
Angular CLI 是一個命令行工具,用于管理 Angular 的開發(fā)周期。它用于為工作區(qū)或項目創(chuàng)建初始的腳手架,并且運行生成器(schematics)來為初始生成的版本添加或修改各類代碼。 CLI 支持開發(fā)周期中的所有階段,比如構建、測試、打包和部署。
注:
參考 [Schematics CLI]() 一文。
一個帶有 @Component() 裝飾器的類,和它的伴生模板關聯(lián)在一起。組件類及其模板共同定義了一個視圖。
組件是指令的一種特例。@Component() 裝飾器擴展了 @Directive() 裝飾器,增加了一些與模板有關的特性。
Angular 的組件類負責暴露數(shù)據(jù),并通過數(shù)據(jù)綁定機制來處理絕大多數(shù)視圖的顯示和用戶交互邏輯。
注:
- 要了解更多關于組件類、模板和視圖的知識,參考 [架構概覽]() 一章。
參考 [工作空間配置]() 。
一種 Web 平臺的特性,目前已經(jīng)被絕大多數(shù)瀏覽器支持,在其它瀏覽器中也可以通過膩子腳本獲得支持(參考 [瀏覽器支持]())。
這種自定義元素特性通過允許你定義標簽(其內容是由 JavaScript 代碼來創(chuàng)建和控制的)來擴展 HTML。當自定義元素(也叫 Web Component)被添加到 CustomElementRegistry 之后就會被瀏覽器識別。
你可以使用 API 來轉換 Angular 組件,以便它能夠注冊進瀏覽器中,并且可以用在你往 DOM 中添加的任意 HTML 中。 自定義元素標簽可以把組件的視圖(包括變更檢測和數(shù)據(jù)綁定功能)插入到不受 Angular 控制的內容中。
注:
- 參考 [Angular 元素]()。
- 參考 [加載動態(tài)組件]()。
這個過程可以讓應用程序將數(shù)據(jù)展示給用戶,并對用戶的操作(點擊、觸屏、按鍵)做出回應。
在數(shù)據(jù)綁定機制下,你只要聲明一下 HTML 部件和數(shù)據(jù)源之間的關系,把細節(jié)交給框架去處理。 而以前的手動操作過程是:將數(shù)據(jù)推送到 HTML 頁面中、添加事件監(jiān)聽器、從屏幕獲取變化后的數(shù)據(jù),并更新應用中的值。
更多的綁定形式,見[模板語法]():
類的一種類型,你可以把它們添加到 NgModule 的 declarations 列表中。 你可以聲明組件、指令和管道。
不要聲明:
一個函數(shù),用來修飾緊隨其后的類或屬性定義。 裝飾器(也叫注解)是 JavaScript 的一種語言特性,是一項位于階段 2(stage 2)的試驗特性。
Angular 定義了一些裝飾器,用來為類或屬性附加元數(shù)據(jù),來讓自己知道那些類或屬性的含義,以及該如何處理它們。
注:
- 參考 [類裝飾器]()、[類屬性裝飾器]()。
依賴注入既是設計模式,同時又是一種機制:當應用程序的一些部件(即一些依賴)需要另一些部件時, 利用依賴注入來創(chuàng)建被請求的部件,并將它們注入到需要它們的部件中。
在 Angular 中,依賴通常是服務,但是也可以是值,比如字符串或函數(shù)。應用的注入器(它是在啟動期間自動創(chuàng)建的)會使用該服務或值的配置好的提供者來按需實例化這些依賴。各個不同的提供者可以為同一個服務提供不同的實現(xiàn)。
注:
參考 [Angular 中的依賴注入]() 一章。
一種用來查閱的令牌,它關聯(lián)到一個依賴提供者,用于依賴注入系統(tǒng)中。
差異化加載 一種構建技術,它會為同一個應用創(chuàng)建兩個發(fā)布包。一個是較小的發(fā)布包,是針對現(xiàn)代瀏覽器的。另一個是較大的發(fā)布包,能讓該應用正確的運行在像 IE 11 這樣的老式瀏覽器上,這些瀏覽器不能支持全部現(xiàn)代瀏覽器的 API。
注:
參考 [Deployment]() 一章。
一個可以修改 DOM 結構或修改 DOM 和組件數(shù)據(jù)模型中某些屬性的類。 指令類的定義緊跟在 @Directive()
裝飾器之后,以提供元數(shù)據(jù)。
指令類幾乎總與 HTML 元素或屬性 (attribute) 相關。 通常會把這些 HTML 元素或者屬性 (attribute) 當做指令本身。 當 Angular 在 HTML 模板中發(fā)現(xiàn)某個指令時,會創(chuàng)建與之相匹配的指令類的實例,并且把這部分 DOM 的控制權交給它。
指令分為三類:
Angular 提供了一些以 ng
為前綴的內置指令。你也可以創(chuàng)建新的指令來實現(xiàn)自己的功能。 你可以為自定義指令關聯(lián)一個選擇器(一種形如 <my-directive> 的 HTML 標記),以擴展模板語法,從而讓你能在應用中使用它。
一種特殊用途的庫或 API,參見領域特定語言詞條。
Angular 使用領域特定語言擴展了 TypeScript,用于與 Angular 應用相關的許多領域。這些 DSL 都定義在 NgModule 中,比如 動畫、表單和路由與導航。
一種在運行期間把組件添加到 DOM 中的技術,它需要你從編譯期間排除該組件,然后,當你把它添加到 DOM 中時,再把它接入 Angular 的變更檢測與事件處理框架。
注:
參考 [自定義元素](),它提供了一種更簡單的方式來達到相同的效果。
在啟動時加載的 NgModule 和組件被稱為急性加載,與之相對的是那些在運行期間才加載的方式(惰性加載)。 參見惰性加載。
[官方 JavaScript 語言規(guī)范]()
并不是所有瀏覽器都支持最新的 ECMAScript 標準,不過你可以使用轉譯器(比如TypeScript)來用最新特性寫代碼,然后它會被轉譯成可以在瀏覽器的其它版本上運行的代碼。
注:
參考 [瀏覽器支持]()。
Angular 定義了 ElementRef 類來包裝與渲染有關的原生 UI 元素。這讓你可以在大多數(shù)情況下使用 Angular 的模板和數(shù)據(jù)綁定機制來訪問 DOM 元素,而不必再引用原生元素。
本文檔中一般會使用元素(Element)來指代 ElementRef 的實例,注意與 DOM 元素(你必要時你可以直接訪問它)區(qū)分開。
可以對比下 [自定義元素]()。
JavaScript 模塊的目的是供 npm 包的用戶進行導入。入口點模塊通常會重新導出來自其它內部模塊的一些符號。每個包可以包含多個入口點。比如 @angular/core 就有兩個入口點模塊,它們可以使用名字 @angular/core 和 @angular/core/testing 進行導入。
一個 FormControl 實例,它是 Angular 表單的基本構造塊。它會和 FormGroup 和 FormArray 一起,跟蹤表單輸入元素的值、有效性和狀態(tài)。
注:
參考 [Angular 表單簡介]()。
是指在指定的時間點,表單輸入元素的值和驗證狀態(tài)的"權威數(shù)據(jù)源"。當使用響應式表單時,表單模型會在組件類中顯式創(chuàng)建。當使用模板驅動表單時,表單模型是由一些指令隱式創(chuàng)建的。
注:
參考 [Angular 表單簡介]()。
一種檢查,當表單值發(fā)生變化時運行,并根據(jù)預定義的約束來匯報指定的這些值是否正確并完全。響應式表單使用驗證器函數(shù),而模板驅動表單則使用驗證器指令。
注:
參考 [表單驗證器]()。
是否能夠在創(chuàng)建之后修改值的狀態(tài)。響應式表單會執(zhí)行不可變性的更改,每次更改數(shù)據(jù)模型都會生成一個新的數(shù)據(jù)模型,而不是修改現(xiàn)有的數(shù)據(jù)模型。 模板驅動表單則會執(zhí)行可變的更改,它通過 NgModel 和雙向數(shù)據(jù)綁定來就地修改現(xiàn)有的數(shù)據(jù)模型。
Angular 中的類或其它概念使用依賴注入機制來提供依賴。 可供注入的服務類必須使用 @Injectable() 裝飾器標出來。其它條目,比如常量值,也可用于注入。
Angular 依賴注入系統(tǒng)中可以在緩存中根據(jù)名字查找依賴,也可以通過配置過的提供者來創(chuàng)建依賴。 啟動過程中會自動為每個模塊創(chuàng)建一個注入器,并被組件樹繼承。
注入器會提供依賴的一個單例,并把這個單例對象注入到多個組件中。
模塊和組件級別的注入器樹可以為它們擁有的組件及其子組件提供同一個依賴的不同實例。
你可以為同一個依賴使用不同的提供者來配置這些注入器,這些提供者可以為同一個依賴提供不同的實現(xiàn)。
注:
參考 [多級依賴注入]()。
當定義指令時,指令屬性上的 @Input() 裝飾器讓該屬性可以作為屬性綁定的目標使用。 數(shù)據(jù)值會從等號右側的模板表達式所指定的數(shù)據(jù)源流入組件的輸入屬性。
注:
參考 [輸入與輸出屬性]()。
屬性數(shù)據(jù)綁定 (property data binding) 的一種形式,位于雙大括號中的模板表達式 (template expression)會被渲染成文本。 在被賦值給元素屬性或者顯示在元素標簽中之前,這些文本可能會先與周邊的文本合并,參見下面的例子。
<label>My current hero is {{hero.name}}</label>
Ivy 是 Angular 的下一代編譯和渲染管道的代號。在 Angular 的版本 9 中,默認情況下使用新的編譯器和運行時,而不再用舊的編譯器和運行時,也就是 View Engine。
注:
參考 [Angular Ivy]()。
參見 [ECMAScript]() 和 [TypeScript]()。
在啟動期間,Angular 的即時編譯器(JIT)會在運行期間把你的 Angular HTML 和 TypeScript 代碼轉換成高效的 JavaScript 代碼。
當你運行 Angular 的 CLI 命令 ng build 和 ng serve 時,JIT 編譯是默認選項,而且是開發(fā)期間的最佳實踐。但是強烈建議你不要在生產(chǎn)環(huán)境下使用 JIT 模式,因為它會導致巨大的應用負擔,從而拖累啟動時的性能。
注:
參考 [預先 (AOT) 編譯]()。
惰性加載過程會把應用拆分成多個包并且按需加載它們,從而提高應用加載速度。 比如,一些依賴可以根據(jù)需要進行惰性加載,與之相對的是那些 急性加載 的模塊,它們是根模塊所要用的,因此會在啟動期間加載。
路由器只有當父視圖激活時才需要加載子視圖。同樣,你還可以構建一些自定義元素,它們也可以在需要時才加載進 Angular 應用。
一種 Angular 項目。用來讓其它 Angular 應用包含它,以提供各種功能。庫不是一個完整的 Angular 應用,不能獨立運行。(要想為非 Angular 應用添加可復用的 Angular 功能,你可以使用 Angular 的自定義元素。)
庫的開發(fā)者可以使用 CLI 在現(xiàn)有的 工作區(qū) 中 generate 新庫的腳手架,還能把庫發(fā)布為 npm 包。
應用開發(fā)者可以使用 CLI 來把一個已發(fā)布的庫 add 進這個應用所在的工作區(qū)。
注:
參考 [原理圖(schematic)]()。
一種接口,它允許你監(jiān)聽指令和組件的生命周期,比如創(chuàng)建、更新和銷毀等。
每個接口只有一個鉤子方法,方法名是接口名加前綴 ng。例如,OnInit 接口的鉤子方法名為 ngOnInit。
Angular 會按以下順序調用鉤子方法:
注:
參考 [生命周期鉤子頁]()。
通常,模塊會收集一組專注于單一目的的代碼塊。Angular 既使用 JavaScript 的標準模塊,也定義了 Angular 自己的模塊,也就是 NgModule。
在 JavaScript (ECMAScript) 中,每個文件都是一個模塊,該文件中定義的所有對象都屬于這個模塊。這些對象可以導出為公共對象,而這些公共對象可以被其它模塊導入后使用。
Angular 就是用一組 JavaScript 模塊(也叫庫)的形式發(fā)布的。每個 Angular 庫都帶有 @angular 前綴。 使用 NPM 包管理器安裝它們,并且使用 JavaScript 的 import 聲明語句從中導入各個部件。
注:
參考 [NgModule]()。
Angular 兼容性編譯器。如果使用 Ivy 構建應用程序,但依賴未用 Ivy 編譯的庫,則 CLI 將使用 ngcc 自動更新依賴庫以使用 Ivy。
一種帶有 @NgModule() 裝飾器的類定義,它會聲明并提供一組專注于特定功能的代碼塊,比如業(yè)務領域、工作流或一組緊密相關的能力集等。
像 JavaScript 模塊一樣,NgModule 能導出那些可供其它 NgModule 使用的功能,也可以從其它 NgModule 中導入其公開的功能。 NgModule 類的元數(shù)據(jù)中包括一些供應用使用的組件、指令和管道,以及導入、導出列表。參見可聲明對象。
NgModule 通常會根據(jù)它導出的內容決定其文件名,比如,Angular 的 DatePipe 類就屬于 date_pipe.ts 文件中一個名叫 date_pipe 的特性模塊。 你可以從 Angular 的范圍化包中導入它們,比如 @angular/core。
每個 Angular 應用都有一個根模塊。通常,這個類會命名為 AppModule,并且位于一個名叫 app.module.ts 的文件中。
注:
參考 [NgModules]()。
npm 包管理器用于分發(fā)與加載 Angular 的模塊和庫。
注:
你還可以了解 Angular 如何使用 [Npm 包]() 的更多知識。
一個多值生成器,這些值會被推送給訂閱者。 Angular 中到處都會用到異步事件處理。你要通過調用可觀察對象的 subscribe() 方法來訂閱它,從而讓這個可觀察對象得以執(zhí)行,你還要給該方法傳入一些回調函數(shù)來接收 "有新值"、"錯誤" 或 "完成" 等通知。
可觀察對象可以把任意類型的一個或多個值傳給訂閱者,無論是同步(就像函數(shù)把值返回給它的調用者一樣)還是異步。 訂閱者會在生成了新值時收到包含這個新值的通知,以及正常結束或錯誤結束時的通知。
Angular 使用一個名叫響應式擴展 (RxJS)的第三方包來實現(xiàn)這些功能。
注:
參考 [可觀察對象]()。
傳給可觀察對象 的 subscribe() 方法的一個對象,其中定義了訂閱者的一組回調函數(shù)。
當定義指令時,指令屬性上的 @Output() 裝飾器會讓該屬性可用作事件綁定的目標。 事件從該屬性流出到等號右側指定的模板表達式中。
注:
參考 [輸入與輸出屬性]()。
一個帶有 @Pipe{} 裝飾器的類,它定義了一個函數(shù),用來把輸入值轉換成輸出值,以顯示在視圖中。 Angular 定義了很多管道,并且你還可可以自定義新的管道。
注:
參考 [管道]()。
在 Angular 術語中,平臺是供 Angular 應用程序在其中運行的上下文。Angular 應用程序最常見的平臺是 Web 瀏覽器,但它也可以是移動設備的操作系統(tǒng)或 Web 服務器。
@angular/platform-* 軟件包提供了對各種 Angular 運行時平臺的支持。這些軟件包通過提供用于收集用戶輸入和渲染指定平臺 UI 的實現(xiàn),以允許使用 @angular/core 和 @angular/common 的應用程序在不同的環(huán)境中執(zhí)行。隔離平臺相關的功能使開發(fā)人員可以獨立于平臺使用框架的其余部分。
一個 NPM 包,它負責彌補瀏覽器 JavaScript 實現(xiàn)與最新標準之間的 "縫隙"。參見瀏覽器支持頁,以了解要在特定平臺支持特定功能時所需的膩子腳本。
在 Angular CLI 中,CLI 命令可能會創(chuàng)建或修改獨立應用或庫。
由 ng new 創(chuàng)建的項目中包含一組源文件、資源和配置文件,當你用 CLI 開發(fā)或測試此應用時就會用到它們。此外,還可以用 ng generate application 或 ng generate library 命令創(chuàng)建項目。
angular.json 文件可以配置某個工作空間 中的所有項目。
注:
參考 [項目文件結構]()。
一個實現(xiàn)了 Provider 接口的對象。一個提供者對象定義了如何獲取與 DI 令牌(token) 相關聯(lián)的可注入依賴。 注入器會使用這個提供者來創(chuàng)建它所依賴的那些類的實例。
Angular 會為每個注入器注冊一些 Angular 自己的服務。你也可以注冊應用自己所需的服務提供者。
參見服務和依賴注入。
注:
參考 [依賴注入]()。
通過組件中代碼構建 Angular 表單的一個框架。 另一種技術是模板驅動表單
構建響應式表單時:
"權威數(shù)據(jù)源"(表單模型)定義在組件類中。
表單驗證在組件代碼而不是驗證器指令中定義。
在組件類中,使用 new FormControl() 或者 FormBuilder 顯性地創(chuàng)建每個控件。
模板中的 input 元素不使用 ngModel。
相關聯(lián)的 Angular 指令全部以 Form 開頭,例如 FormGroup()、FormControl() 和 FormControlName()。
另一種方式是模板驅動表單。模板驅動表單的簡介和這兩種方式的比較,參見 [Angular 表單簡介]()。
一種工具,用來配置和實現(xiàn) Angular 應用中各個狀態(tài)和視圖之間的導航。
Router 模塊是一個 NgModule,它提供在應用視圖間導航時需要的服務提供者和指令。路由組件是一種組件,它導入了 Router 模塊,并且其模板中包含 RouterOutlet 元素,路由器生成的視圖就會被顯示在那里。
路由器定義了在單頁面中的各個視圖之間導航的方式,而不是在頁面之間。它會解釋類似 URL 的鏈接,以決定該創(chuàng)建或銷毀哪些視圖,以及要加載或卸載哪些組件。它讓你可以在 Angular 應用中獲得惰性加載的好處。
注:
參考 [路由與導航]()。
一種指令,它在路由組件的模板中扮演占位符的角色,Angular 會根據(jù)當前的路由狀態(tài)動態(tài)填充它。
一個模板中帶有 RouterOutlet 指令的 Angular 組件,用于根據(jù)路由器的導航顯示相應的視圖。
注:
參考 [路由與導航]()。
在原理圖 中,是指一個在文件樹上運行的函數(shù),用于以指定方式創(chuàng)建、刪除或修改文件,并返回一個新的 Tree 對象。
腳手架庫會定義如何借助創(chuàng)建、修改、重構或移動文件和代碼等操作來生成或轉換某個項目。每個原理圖定義了一些規(guī)則,以操作一個被稱為文件樹的虛擬文件系統(tǒng)。
Angular CLI 使用原理圖來生成和修改 Angular 項目及其部件。
Angular 提供了一組用于 CLI 的原理圖。參見 Angular CLI 命令參考手冊。當 ng add 命令向項目中添加某個庫時,就會運行原理圖。ng generate 命令則會運行原理圖,來創(chuàng)建應用、庫和 Angular 代碼塊。
公共庫的開發(fā)者可以創(chuàng)建原理圖,來讓 CLI 生成他們自己的發(fā)布的庫。欲知詳情,參見 devkit 文檔。
注:
參考 [原理圖]()和[把庫與 CLI 集成]()。
Schematics 自帶了一個命令行工具。 使用 Node 6.9 或更高版本,可以全局安裝這個 Schematics CLI:
npm install -g @angular-devkit/schematics-cli
這會安裝可執(zhí)行文件 schematics,你可以用它來創(chuàng)建新工程、往現(xiàn)有工程中添加新的 schematic,或擴展某個現(xiàn)有的 schematic。
一種把相關的 npm 包分組到一起的方式。 Angular 的 NgModule 都是在一些以 @angular 為范圍名的范圍化包中發(fā)布的。比如 @angular/core、@angular/common、@angular/forms 和 @angular/router。
和導入普通包相同的方式導入范圍化包。
import { Component } from '@angular/core';
一項在服務端生成靜態(tài)應用頁面的技術,它可以在對來自瀏覽器的請求進行響應時生成這些頁面或用它們提供服務。 它還可以提前把這些頁面生成為 HTML 文件,以便稍后用它們來提供服務。
該技術可以增強手機和低功耗設備的性能,而且會在應用加載通過快速展示一個靜態(tài)首屏來提升用戶體驗。這個靜態(tài)版本還能讓你的應用對網(wǎng)絡蜘蛛更加友好。
你可以通過 CLI 運行 Angular Universal 工具,借助 @nguniversal/express-engine schematic 原理圖來更輕松的讓應用支持服務端渲染。
在 Angular 中,服務就是一個帶有 @Injectable 裝飾器的類,它封裝了可以在應用程序中復用的非 UI 邏輯和代碼。 Angular 把組件和服務分開,是為了增進模塊化程度和可復用性。
@Injectable 元數(shù)據(jù)讓服務類能用于依賴注入機制中。可注入的類是用提供者進行實例化的。 各個注入器會維護一個提供者的列表,并根據(jù)組件或其它服務的需要,用它們來提供服務的實例。
注:
參考 [服務與依賴注入簡介]()。
一種指令類型,它能通過修改 DOM (添加、刪除或操縱元素及其子元素)來修整或重塑 HTML 的布局。
注:
參考 [結構型指令頁]()。
一個函數(shù),用于定義如何獲取或生成要發(fā)布的值或消息。 當有消費者調用可觀察對象的 subscribe() 方法時,該函數(shù)就會執(zhí)行。
訂閱一個可觀察對象就會觸發(fā)該對象的執(zhí)行、為該對象關聯(lián)一些回調函數(shù),并創(chuàng)建一個 Subscription(訂閱記錄)對象來讓你能取消訂閱。
subscribe() 方法接收一個 JavaScript 對象(叫做觀察者(observer)),其中最多可以包含三個回調,分別對應可觀察對象可以發(fā)出的幾種通知類型:
項目的一個可構建或可運行的子集,它是工作空間配置文件中的一個子對象,它會被建筑師(Architect)的構建器(Builder)執(zhí)行。
在 angular.json 文件中,每個項目都有一個 architect 分區(qū),其中包含一些用于配置構建器的目標。其中一些目標對應于 CLI 命令,比如 build、serve、test 和 lint。
比如,ng build 命令用來編譯項目時所調用的構建器會使用一個特定的構建工具,并且具有一份默認配置,此配置中的值可以通過命令行參數(shù)進行覆蓋。目標 build 還為 "生產(chǎn)環(huán)境" 構建定義了另一個配置,可以通過在 build 命令上添加 --prod 標志來調用它。
建筑師工具提供了一組構建器。ng new 命令為初始應用項目提供了一組目標。ng generate application 和 ng generate library 命令則為每個新項目提供了一組目標。這些目標的選項和配置都可以進行自定義,以便適應你項目的需求。比如,你可能會想為項目的 "build" 目標添加一個 "staging" 或 "testing" 配置。
你還可以定義一個自定義構建器,并且往項目配置中添加一個目標,來使用你的自定義構建器。然后你就可以通過 ng run 命令來運行此目標。
用來定義要如何在 HTML 中渲染組件視圖的代碼。
模板會把純 HTML 和 Angular 的數(shù)據(jù)綁定語法、指令和模板表達式組合起來。Angular 的元素會插入或計算那些值,以便在頁面顯示出來之前修改 HTML 元素。
模板通過 @Component() 裝飾器與組件類類關聯(lián)起來。模板代碼可以作為 template 屬性的值用內聯(lián)的方式提供,也可以通過 templateUrl 屬性鏈接到一個獨立的 HTML 文件。
用 TemplateRef 對象表示的其它模板用來定義一些備用視圖或內嵌視圖,它們可以來自多個不同的組件。
一種在視圖中使用 HTML 表單和輸入類元素構建 Angular 表單的格式。 它的替代方案是響應式表單框架。
當構建模板驅動表單時:
模板是“權威數(shù)據(jù)源”。使用屬性 (attribute) 在單個輸入元素上定義驗證規(guī)則。
使用 ngModel 進行雙向綁定,保持組件模型和用戶輸入之間的同步。
在幕后,Angular 為每個帶有 name 屬性和雙向綁定的輸入元素創(chuàng)建了一個新的控件。
相關的 Angular 指令都帶有 ng 前綴,例如 ngForm、ngModel 和 ngModelGroup。
另一種方式是響應式表單。響應式表單的簡介和兩種方式的比較參見 [Angular 表單簡介]()。
一種類似 TypeScript 的語法,Angular 用它對數(shù)據(jù)綁定 (data binding)進行求值。
到[模板表達式]()部分了解更多模板表達式的知識。
用于高效查表的不透明標識符(譯注:不透明是指你不必了解其細節(jié))。在 Angular 中,DI 令牌用于在依賴注入系統(tǒng)中查找服務提供者。
一種翻譯過程,它會把一個版本的 JavaScript 轉換成另一個版本,比如把下一版的 ES2015 轉換成老版本的 ES5。
在 schematics 中,一個用 Tree 類表示的虛擬文件系統(tǒng)。 Schematic 規(guī)則以一個 tree 對象作為輸入,對它們進行操作,并且返回一個新的 tree 對象。
TypeScript 是一種基于 JavaScript 的程序設計語言,以其可選類型系統(tǒng)著稱。 TypeScript 提供了編譯時類型檢查和強大的工具支持(比如代碼補齊、重構、內聯(lián)文檔和智能搜索等)。 許多代碼編輯器和 IDE 都原生支持 TypeScript 或通過插件提供支持。
TypeScript 是 Angular 的首選語言。要了解更多,參見 [typescriptlang.org]()。
用來幫 Angular 應用實現(xiàn)服務端渲染的工具。 當與應用集成在一起時,Universal 可以在服務端生成靜態(tài)頁面并用它們來響應來自瀏覽器的請求。 當瀏覽器正準備運行完整版應用的時候,這個初始的靜態(tài)頁可以用作一個可快速加載的占位符。
欲知詳情,參見 [Angular Universal: 服務端渲染]()。
視圖是可顯示元素的最小分組單位,它們會被同時創(chuàng)建和銷毀。 Angular 在一個或多個指令 (directive) 的控制下渲染視圖。
組件 (component) 類及其關聯(lián)的模板 (template)定義了一個視圖。 具體實現(xiàn)上,視圖由一個與該組件相關的 ViewRef 實例表示。 直屬于某個組件的視圖叫做宿主視圖。 通常會把視圖組織成一些視圖樹(view hierarchies)。
視圖中各個元素的屬性可以動態(tài)修改以響應用戶的操作,而這些元素的結構(數(shù)量或順序)則不能。你可以通過在它們的視圖容器中插入、移動或移除內嵌視圖來修改這些元素的結構。
當用戶在應用中導航時(比如使用路由器),視圖樹可以動態(tài)加載或卸載。
Angular 9 之前的版本使用的編譯和渲染管道??蓪Ρ?Ivy。
一棵相關視圖的樹,它們可以作為一個整體行動。其根視圖就是組件的宿主視圖。宿主視圖可以是內嵌視圖樹的根,它被收集到了宿主組件上的一個視圖容器(ViewContainerRef)中。視圖樹是 Angular 變更檢測的關鍵部件之一。
視圖樹和組件樹并不是一一對應的。那些嵌入到指定視圖樹上下文中的視圖也可能是其它組件的宿主視圖。那些組件可能和宿主組件位于同一個 NgModule 中,也可能屬于其它 NgModule。
參見 [自定義元素]()。
一組基于 Angular CLI 的 Angular 項目(也就是說應用或庫),它們通常共同位于一個單一的源碼倉庫(比如 git)中。
CLI 的 ng new 命令會在文件系統(tǒng)中創(chuàng)建一個目錄(也就是工作空間的根目錄)。 在工作空間根目錄下,還會創(chuàng)建此工作空間的配置文件(angular.json),并且還會默認初始化一個同名的應用項目。
而用來創(chuàng)建或操作應用和庫的命令(比如 add 和 generate)必須在工作區(qū)目錄下才能執(zhí)行。
欲知詳情,參見 [工作空間配置]()。
一個名叫 angular.json 的文件,它位于 Angular 工作空間 的根目錄下,并為 Angular CLI 提供的或集成的各個構建/開發(fā)工具提供工作空間級和項目專屬的默認配置項。
欲知詳情,參見工作空間配置。
還有一些項目專屬的配置文件是給某些工具使用的。比如 package.json 是給 npm 包管理器使用的,tsconfig.json 是給 TypeScript 轉譯器使用的,而 tslint.json 是給 TSLint 使用的。
欲知詳情,參見[工作空間]()和[項目文件結構]()。
一組異步任務的執(zhí)行上下文。它對于調試、性能分析和測試那些包含了異步操作(如事件處理、承諾、遠程服務器調用等)的應用是非常有用的。
Angular 應用會運行在一個 Zone 區(qū)域中,在這里,它可以對異步事件做出反應,可以通過檢查數(shù)據(jù)變更、利用數(shù)據(jù)綁定 (data bindings) 來更新信息顯示。
Zone 的使用方可以在異步操作完成之前或之后采取行動。
更多建議: