【2019-11-19】架構概覽

架構概覽

Angular是一個用HTML 和TypeScript 構建客戶端應用的平臺與框架。

Angular的基本構造塊是NgModule ,它爲組件提供了編譯的上下文環境。NgModule會把相關的代碼收集到一些功能集中。Angular就是由一組NgModule定義出的

應用至少會有一個用於引導應用的根模塊，一般還會有不少特性模塊
①組件定義視圖 -- 視圖是一組可見的屏幕元素，Angular能夠根據你的程序邏輯和數據來選擇和修改它們。每一個應用至少有一個根組件

②組件使用服務 -- 服務會提供那些與視圖不直接相關的功能。服務提供商能夠做爲依賴被注入到組件中，這些能讓你的代碼更加模塊化，更加可服用，更加高效

 

 

 組件和服務都是簡單的類，這些類使用裝飾器來標識它們的類型，並提供元數據告知Angular該如何使用它們

①組件類的元數據將組件類和一個用來定義視圖的模板關聯起來。模板把普通的HTML和Angular 指令與綁定標記（markup）組合起來，這樣Angular就能夠在呈現HTML以前修改這些HTML

裝飾器是一些用於修飾 JavaScript 類的函數。Angular 定義了許多裝飾器，這些裝飾器會把一些特定種類的元數據附加到類上，以便 Angular 瞭解這些這些類的含義以及該如何使用它們。

 

 

 ②服務類的元數據提供一些信息，Angular要用這些信息來讓組件能夠經過依賴注入 使用該服務

應用的組件一般會定義不少視圖，並進行分級組織。Angular提供Router服務來幫助你定義視圖之間的導航路徑。路由器提供了先進的瀏覽器內導航功能

 

 

模塊

Angular定義了NgModule,它和javaScript(ES2015)的模塊不一樣並且有必定的互補性。NgModule爲一個組件集聲明瞭編譯的上下文環境，它專一於某個領域，某個工做流或一組緊密相關的能力。NgModule能夠將其組件和服務關聯起來，造成功能單元

每一個Angular應用都會有一個根模塊，一般命名爲AppModule.根模塊提供了用來啓動應用的引導機制，一個應用一般會包含不少功能模塊

像JavaScript模塊同樣，NgModule也能夠從其餘NgModule中導入功能，並容許導出自已的功能供其餘NgModule使用.好比：要在你的應用使用路由器（Router），就要導入Router這個NgModule

 

 模塊這項技術還能讓你得到惰性加載（按需加載模塊）的優勢，以儘量減小啓動時須要加載的代碼體積

組件

每一個Angular應用至少有一個組件，就是根組件，它會把組件樹和頁面中的DOM鏈接起來，每一個組件都會定義一個類，其中包含應用的數據和邏輯，並與一個HTML模板相關聯，該模板頂一個了一個供目標環境下顯示的視圖

模板、指令和數據綁定

模板會把HTML和Angular的標記組合起來，這些標記能夠在HTML元素顯示以前修改它們。模板中的指令會提供程序邏輯，而綁定標記會把你應用中的數據和DOM鏈接在一塊兒，有兩種類型的數據綁定：

①事件綁定：讓你的應用能夠經過更新應用的數據來響應目標環境下的用戶輸入

②屬性綁定：讓你將從應用數據計算出來的值插入到HTML中

在視圖顯示出來以前，Angular會先根據你的應用數據和邏輯來運行模板中的指令並解析綁定表達式，以修改HTML元素和DOM。Angular支持雙數據綁定，這意味着DOM中發生的變化一樣能夠反映回你的程序數據中

你的模板也能夠用管道轉換要顯示的值，以加強用戶體驗。Angular爲一些通用的轉換提供了預約義管道，你還能夠定義自已的管道

服務與依賴注入

對於與特定視圖無關並但願跨組件共享的數據或邏輯，能夠建立服務類，服務類的定義一般緊跟在「@Injectable()」裝飾器以後。該裝飾器提供的元數據可讓你的服務做爲依賴被注入到客戶組件中

依賴注入（DI）讓你能夠保持組件類的精簡和高效。有了DI，組件就不用從服務器獲取數據、驗證用戶輸入或直接把日誌寫到控制檯，而是會把這些任務委託給服務

路由

Angular 的 Router模塊提供了一個服務，它可讓你定義在應用的各個不一樣狀態和視圖層次之間導航時要使用的路徑。它的工做模型基於人們熟知的瀏覽器導航約定：

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

②在頁面中點擊連接，瀏覽器就會導航到一個新頁面

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

不過路由器會把相似URL的路徑映射到視圖而不是頁面。當用戶執行一個動做時，好比點擊連接，本應該在瀏覽器加載一個新頁面，可是路由器會攔截瀏覽器這個行爲，並顯示或者隱藏一個視圖層次結構

若是路由器認爲當前的應用狀態須要某些特定的功能，而定義此功能的模塊還沒有加載，路由器就會按需惰性加載此模塊

路由器會根據你應用中的導航規則和數據狀態來攔截URL。當用戶點擊按鈕，選擇下拉框或者收到其餘任何來源的輸入時，你能夠導航到一個新視圖，路由器會在瀏覽器的歷史日誌中記錄這個動做，因此前進和後退按鈕能夠正常工做

要定義導航規則，就要把導航路徑和組件關聯起來。路徑使用相似URL的語法來和程序數據整合在一塊兒，就像模板語法會把視圖和程序數據整合在一塊兒同樣，而後你就能夠用程序邏輯來決定要顯示或者隱藏哪些視圖，以根據你制定的訪問規則對用戶的輸入作出相應