Angular9 架構(gòu)概覽

2020-06-29 17:40 更新

架構(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 路由與導航]() 以深入了解路由。

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號