Angular9 架構(gòu)概覽

架構(gòu)概覽

Angular 是一個(gè)用 HTML 和 TypeScript 構(gòu)建客戶(hù)端應(yīng)用的平臺(tái)與框架。 Angular 本身就是用 TypeScript 寫(xiě)成的。它將核心功能和可選功能作為一組 TypeScript 庫(kù)進(jìn)行實(shí)現(xiàn)，你可以把它們導(dǎo)入你的應(yīng)用中。

Angular 的基本構(gòu)造塊是 NgModule，它為組件提供了編譯的上下文環(huán)境。 NgModule 會(huì)把相關(guān)的代碼收集到一些功能集中。 Angular 應(yīng)用就是由一組 NgModule 定義出的。 應(yīng)用至少會(huì)有一個(gè)用于引導(dǎo)應(yīng)用的根模塊，通常還會(huì)有很多特性模塊。

• 組件定義視圖。視圖是一組可見(jiàn)的屏幕元素，Angular 可以根據(jù)你的程序邏輯和數(shù)據(jù)來(lái)選擇和修改它們。 每個(gè)應(yīng)用都至少有一個(gè)根組件。

• 組件使用服務(wù)。服務(wù)會(huì)提供那些與視圖不直接相關(guān)的功能。服務(wù)提供者可以作為依賴(lài)被注入到組件中， 這能讓你的代碼更加模塊化、更加可復(fù)用、更加高效。

組件和服務(wù)都是簡(jiǎn)單的類(lèi)，這些類(lèi)使用裝飾器來(lái)標(biāo)出它們的類(lèi)型，并提供元數(shù)據(jù)以告知 Angular 該如何使用它們。

• 組件類(lèi)的元數(shù)據(jù)將組件類(lèi)和一個(gè)用來(lái)定義視圖的模板關(guān)聯(lián)起來(lái)。 模板把普通的 HTML 和 Angular 指令與綁定標(biāo)記（markup）組合起來(lái)，這樣 Angular 就可以在渲染 HTML 之前先修改這些 HTML。

• 服務(wù)類(lèi)的元數(shù)據(jù)提供了一些信息，Angular 要用這些信息來(lái)讓組件可以通過(guò)依賴(lài)注入（DI）使用該服務(wù)。

應(yīng)用的組件通常會(huì)定義很多視圖，并進(jìn)行分級(jí)組織。Angular 提供了 Router 服務(wù)來(lái)幫助你定義視圖之間的導(dǎo)航路徑。 路由器提供了先進(jìn)的瀏覽器內(nèi)導(dǎo)航功能。

注：
- 參考 [Angular9 詞匯表]() 以了解對(duì) Angular 重要名詞和用法的基本定義。

模塊

Angular 定義了 NgModule，它和 JavaScript（ES2015） 的模塊不同而且有一定的互補(bǔ)性。 NgModule 為一個(gè)組件集聲明了編譯的上下文環(huán)境，它專(zhuān)注于某個(gè)應(yīng)用領(lǐng)域、某個(gè)工作流或一組緊密相關(guān)的能力。 NgModule 可以將其組件和一組相關(guān)代碼（如服務(wù)）關(guān)聯(lián)起來(lái)，形成功能單元。

每個(gè) Angular 應(yīng)用都有一個(gè)根模塊，通常命名為 AppModule。根模塊提供了用來(lái)啟動(dòng)應(yīng)用的引導(dǎo)機(jī)制。 一個(gè)應(yīng)用通常會(huì)包含很多特性模塊。

像 JavaScript 模塊一樣，NgModule 也可以從其它 NgModule 中導(dǎo)入功能，并允許導(dǎo)出它們自己的功能供其它 NgModule 使用。 比如，要在你的應(yīng)用中使用路由器（Router）服務(wù)，就要導(dǎo)入 Router 這個(gè) NgModule。

把你的代碼組織成一些清晰的特性模塊，可以幫助管理復(fù)雜應(yīng)用的開(kāi)發(fā)工作并實(shí)現(xiàn)可復(fù)用性設(shè)計(jì)。 另外，這項(xiàng)技術(shù)還能讓你獲得惰性加載（也就是按需加載模塊）的優(yōu)點(diǎn)，以盡可能減小啟動(dòng)時(shí)需要加載的代碼體積。

注：
- 參考 [Angular9 模塊簡(jiǎn)介]() 以深入了解模塊。

組件

每個(gè) Angular 應(yīng)用都至少有一個(gè)組件，也就是根組件，它會(huì)把組件樹(shù)和頁(yè)面中的 DOM 連接起來(lái)。 每個(gè)組件都會(huì)定義一個(gè)類(lèi)，其中包含應(yīng)用的數(shù)據(jù)和邏輯，并與一個(gè) HTML 模板相關(guān)聯(lián)，該模板定義了一個(gè)供目標(biāo)環(huán)境下顯示的視圖。

@Component() 裝飾器表明緊隨它的那個(gè)類(lèi)是一個(gè)組件，并提供模板和該組件專(zhuān)屬的元數(shù)據(jù)。

注：
- 裝飾器是一些用于修飾 JavaScript 類(lèi)的函數(shù)。Angular 定義了許多裝飾器，這些裝飾器會(huì)把一些特定種類(lèi)的元數(shù)據(jù)附加到類(lèi)上，以便 Angular 了解這些這些類(lèi)的含義以及該如何使用它們。

模塊、指令及數(shù)據(jù)綁定

模板會(huì)把 HTML 和 Angular 的標(biāo)記（markup）組合起來(lái)，這些標(biāo)記可以在 HTML 元素顯示出來(lái)之前修改它們。 模板中的指令會(huì)提供程序邏輯，而綁定標(biāo)記會(huì)把你應(yīng)用中的數(shù)據(jù)和 DOM 連接在一起。 有兩種類(lèi)型的數(shù)據(jù)綁定：

• 事件綁定讓你的應(yīng)用可以通過(guò)更新應(yīng)用的數(shù)據(jù)來(lái)響應(yīng)目標(biāo)環(huán)境下的用戶(hù)輸入。

• 屬性綁定讓你將從應(yīng)用數(shù)據(jù)中計(jì)算出來(lái)的值插入到 HTML 中。

在視圖顯示出來(lái)之前，Angular 會(huì)先根據(jù)你的應(yīng)用數(shù)據(jù)和邏輯來(lái)運(yùn)行模板中的指令并解析綁定表達(dá)式，以修改 HTML 元素和 DOM。 Angular 支持雙向數(shù)據(jù)綁定，這意味著 DOM 中發(fā)生的變化（比如用戶(hù)的選擇）同樣可以反映回你的程序數(shù)據(jù)中。

你的模板也可以用管道轉(zhuǎn)換要顯示的值以增強(qiáng)用戶(hù)體驗(yàn)。比如，可以使用管道來(lái)顯示適合用戶(hù)所在語(yǔ)言環(huán)境的日期和貨幣格式。 Angular 為一些通用的轉(zhuǎn)換提供了預(yù)定義管道，你還可以定義自己的管道。

注：
- 參考 [Angular9 組件簡(jiǎn)介]() 以深入了解組件。

服務(wù)與依賴(lài)注入

對(duì)于與特定視圖無(wú)關(guān)并希望跨組件共享的數(shù)據(jù)或邏輯，可以創(chuàng)建服務(wù)類(lèi)。 服務(wù)類(lèi)的定義通常緊跟在 “@Injectable()” 裝飾器之后。該裝飾器提供的元數(shù)據(jù)可以讓你的服務(wù)作為依賴(lài)被注入到客戶(hù)組件中。

依賴(lài)注入（或 DI）讓你可以保持組件類(lèi)的精簡(jiǎn)和高效。有了 DI，組件就不用從服務(wù)器獲取數(shù)據(jù)、驗(yàn)證用戶(hù)輸入或直接把日志寫(xiě)到控制臺(tái)，而是會(huì)把這些任務(wù)委托給服務(wù)。

注：
- 參考 [Angular9 服務(wù)和 DI 簡(jiǎn)介]() 以深入了解服務(wù)與依賴(lài)注入。

路由

Angular 的 Router 模塊提供了一個(gè)服務(wù)，它可以讓你定義在應(yīng)用的各個(gè)不同狀態(tài)和視圖層次結(jié)構(gòu)之間導(dǎo)航時(shí)要使用的路徑。 它的工作模型基于人們熟知的瀏覽器導(dǎo)航約定：

• 在地址欄輸入 URL，瀏覽器就會(huì)導(dǎo)航到相應(yīng)的頁(yè)面。

• 在頁(yè)面中點(diǎn)擊鏈接，瀏覽器就會(huì)導(dǎo)航到一個(gè)新頁(yè)面。

• 點(diǎn)擊瀏覽器的前進(jìn)和后退按鈕，瀏覽器就會(huì)在你的瀏覽歷史中向前或向后導(dǎo)航。

不過(guò)路由器會(huì)把類(lèi)似 URL 的路徑映射到視圖而不是頁(yè)面。 當(dāng)用戶(hù)執(zhí)行一個(gè)動(dòng)作時(shí)（比如點(diǎn)擊鏈接），本應(yīng)該在瀏覽器中加載一個(gè)新頁(yè)面，但是路由器攔截了瀏覽器的這個(gè)行為，并顯示或隱藏一個(gè)視圖層次結(jié)構(gòu)。

如果路由器認(rèn)為當(dāng)前的應(yīng)用狀態(tài)需要某些特定的功能，而定義此功能的模塊尚未加載，路由器就會(huì)按需惰性加載此模塊。

路由器會(huì)根據(jù)你應(yīng)用中的導(dǎo)航規(guī)則和數(shù)據(jù)狀態(tài)來(lái)攔截 URL。 當(dāng)用戶(hù)點(diǎn)擊按鈕、選擇下拉框或收到其它任何來(lái)源的輸入時(shí)，你可以導(dǎo)航到一個(gè)新視圖。 路由器會(huì)在瀏覽器的歷史日志中記錄這個(gè)動(dòng)作，所以前進(jìn)和后退按鈕也能正常工作。

要定義導(dǎo)航規(guī)則，你就要把導(dǎo)航路徑和你的組件關(guān)聯(lián)起來(lái)。 路徑（path）使用類(lèi)似 URL 的語(yǔ)法來(lái)和程序數(shù)據(jù)整合在一起，就像模板語(yǔ)法會(huì)把你的視圖和程序數(shù)據(jù)整合起來(lái)一樣。 然后你就可以用程序邏輯來(lái)決定要顯示或隱藏哪些視圖，以根據(jù)你制定的訪(fǎng)問(wèn)規(guī)則對(duì)用戶(hù)的輸入做出響應(yīng)。

注：
- 參考 [Angular9 路由與導(dǎo)航]() 以深入了解路由。