Angular框架簡述

banq發表於2018-11-23
Angular框架

Angular是一個前端Javascript框架，Angular是用TypeScript編寫的，它將核心和附加功能實現為一組TypeScript庫。 Angular架構並不難理解。特別是，當您熟悉基於它的各種概念時：

Angular應用程式有幾個部分。任何Angular應用程式都由7個基本組成部分組成。這些是：
  1. 元件
  2. 模板
  3. 後設資料
  4. 資料繫結
  5. 指令
  6. 服務
  7. 依賴注入又名DI


元件
任何Angular應用程式都必須至少擁有一個元件。這稱為根元件。它透過元件層次結構與頁面DOM（文件物件模型）對應連線起來。無論Angular應用程式具有多少元件，每個元件都定義了一個有關資料邏輯的類，元件在應用中扮演的角色取決於該元件的類。每個類都與一個HTML模板相關聯，該模板定義了介面檢視。
在元件 @Component () 下定義的是裝飾器decorator，每個裝飾器都將特定型別的後設資料附加到使用它們的原始類中，裝飾漆作用是讓系統知道這些類是什麼以及它們應該做什麼。


模板
顧名思義，這些是將HTML與Angular標記結合起來的，它們能夠在將HTML元素投射到螢幕上之前對其進行修改。模板利用管道來改善使用者體驗。管道透過轉換顯示值來實現。這僅僅意味著可以使用管道根據使用者的區域設定新增時間和貨幣等單位。Angular帶有大量預定義的管道。但是，也可以定義自己的管道。

後設資料
類如何處理取決於後設資料，類裝飾器用於將後設資料附加到類。任何附加了@Component類裝飾器的類都稱為Component類。為了提供Angular建立元件所需的必要資訊，類Decorator透過配置選項進行配置，這些配置選項是指令，選擇器和templateURL。

資料繫結
繫結標記負責將應用程式資料與DOM連線。有兩種型別的資料繫結，即：

  • 事件繫結 - 允許應用程式響應目標環境中的使用者輸入。它透過更新應用程式資料來實現
  • 屬性繫結 - 允許插值，這些值是從應用程式資料計算到HTML中的


與使用者選擇一樣，DOM的變化會反映在程式資料中。這稱為[雙向資料繫結]。它是透過ngModel指令實現的。

指令
模板指令負責提供邏輯。在顯示檢視之前，Angular會評估指令並解析模板中存在的繫結語法，以便修改DOM和HTML元素。這是根據程式資料和邏輯完成的。有三種型別的指令：

  1. 屬性指令 - 修改元件，元素或其他指令的行為或外觀
  2. 元件 - 這些是帶有模板的指令
  3. 結構指令 - 透過新增或刪除DOM元素來修改DOM佈局


服務
當需要某些與特定檢視無關的資料或邏輯時，將建立服務類。此外，這些資料或邏輯需要跨元件共享。
服務類定義緊跟在@Injectable（）裝飾器之前。它的作用是提供後設資料，允許服務以依賴的形式注入客戶端元件。

依賴注入（DI）
簡單地說，DI可以使元件類保持精簡和高效。這使類能夠委派任務，例如從伺服器獲取資料，直接登入到控制檯，以及驗證使用者對服務的輸入。

其他重要概念
除了典型的Angular應用程式的7個基本部分外，還有兩個概念在起作用。分別是模組和路由，每個模組和路由描述如下：
1.模組
每個Angular應用程式都有一個名為AppModule的根模組。它提供了啟動應用程式的引導機制。通常，Angular應用程式包含多個功能模組。

雖然NgModules與JavaScript（ES2015）模組不同，但前者補充後者。儘管如此，NgModules允許分別從其他NgModule匯入和匯出功能。這類似於JavaScript模組。NgModule的目的是宣告一組元件的編譯上下文。這些元件可能屬於應用程式域或工作流。為了形成功能單元，NgModule可以將其元件與相關程式碼（如服務）相關聯

為了便於開發複雜的應用程式，可以將程式碼組織成不同的功能模組。此外，這樣做有助於設計可重用性並從延遲載入中受益，從而最小化程式碼在應用程式啟動時載入所需的時間。

2.路由
Router NgModule有助於在Angular應用程式中定義許多應用程式狀態和檢視層次結構之間的導航路徑。這個特殊的NgModule是根據流行的瀏覽器導航約定建模的，它們是：

  1. 在瀏覽器的位址列中輸入一些URL以導航到相應的頁面
  2. 單擊網頁上的連結允許瀏覽器導航到新的網頁
  3. 點選瀏覽器中的後退和前進按鈕，按照相應的順序，透過瀏覽器歷史記錄向後和向前導航，

一旦使用者執行某些操作，路由器就會攔截瀏覽器的行為並透過隱藏或顯示檢視層次結構來響應。路由器如何解釋連結URL取決於應用程式的檢視導航規則和資料狀態。
路由器也使用延遲載入。如果路由器發現尚未載入定義當前應用程式狀態所需的某些特定功能的模組，則完成此操作。
路由器在瀏覽器歷史記錄中記錄活動。這允許後退和前進按鈕工作。當使用者單擊按鈕或從投遞箱中選擇某些內容時，將導航到新檢視。或者，它可能是對來自某個來源的某些其他操作的回應。

導航路徑與用於定義導航規則的元件相關聯。導航路徑使用類似URL的語法，該語法與程式資料整合。這類似於模板語法如何將檢視與程式資料整合。
此後，應用程式邏輯以根據使用者輸入和定義的訪問規則選擇要顯示的檢視和要隱藏的檢視。

工作原理
NgModules是任何Angular應用程式的基本構建塊，因為它們為元件提供了編譯上下文。任何Angular應用程式都由一組NgModule定義。這些NgModules將相關程式碼收集到功能集中。Angular應用程式至少有一個根模組，可以啟用引導和幾個功能模組。元件定義檢視。這些是根據程式邏輯和資料選擇和修改的螢幕元素集。
此外，元件使用提供與檢視不直接相關的特定功能的服務。服務提供程式作為依賴項注入元件。這使程式碼高效，模組化和可重用。
元件和服務是類。裝飾器標記其型別並提供決定如何使用它們的後設資料。某些元件類的後設資料將其與模板相關聯，所有這些都用於定義檢視。
模板將普通HTML程式碼與Angular指令以及繫結標記相結合，這允許Angular在為顯示呈現相同內容之前修改HTML。服務類的後設資料提供Angular需要透過DI提供給元件的資訊。

以上總結了Angular架構的概念。為了更好地理解這一點，實踐是關鍵。它將幫助您深入瞭解Angular應用程式的確切工作方式。
 

相關文章