Angular9 架構(gòu)概覽

架構(gòu)概覽

Angular 是一個用 HTML 和 TypeScript 構(gòu)建客戶端應用的平臺與框架。 Angular 本身就是用 TypeScript 寫成的。它將核心功能和可選功能作為一組 TypeScript 庫進行實現(xiàn)，你可以把它們導入你的應用中。

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

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

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

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

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

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

應用的組件通常會定義很多視圖，并進行分級組織。Angular 提供了 Router 服務來幫助你定義視圖之間的導航路徑。 路由器提供了先進的瀏覽器內(nèi)導航功能。

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

模塊

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

每個 Angular 應用都有一個根模塊，通常命名為 AppModule。根模塊提供了用來啟動應用的引導機制。 一個應用通常會包含很多特性模塊。

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

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

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

組件

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

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

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

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

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

• 事件綁定讓你的應用可以通過更新應用的數(shù)據(jù)來響應目標環(huán)境下的用戶輸入。

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

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

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

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

服務與依賴注入

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

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

注：
- 參考 [Angular9 服務和 DI 簡介]() 以深入了解服務與依賴注入。

路由

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

• 在地址欄輸入 URL，瀏覽器就會導航到相應的頁面。

• 在頁面中點擊鏈接，瀏覽器就會導航到一個新頁面。

• 點擊瀏覽器的前進和后退按鈕，瀏覽器就會在你的瀏覽歷史中向前或向后導航。

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

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

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

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

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