3.2　Angular整體結構概述

接觸過前端界面開發的讀者應該都用過或者聽說jQuery了。Angular與jQuery大不相同：Angular是一個開發框架，而jQuery是一個工具庫。工具庫像瑞士軍刀，使用者覺得合適的時候就找到它的某個部件用一下，但是它基本不會對使用者提出過多要求或者嚴格限制，比如瑞士軍刀不會要求小刀和開瓶器一定需要一起配合使用；而開發框架則大不相同，它已經通過自有的部分組成了一個環環相扣的有機整體，嚴格約定了使用者在哪里可以自由組合，在哪里必須按部就班。只有遵照它的要求嵌入和組合，才能保證體系在拼裝運行時能正常工作。因此龐大嚴謹的Angular相對于靈活的jQuery要難學一些，不把Angular開發應用的整體結構和各部分組件職能了解清楚，會覺得沒處下手或是使用時如墮五里霧中，即使勉強完成應用，也在其中埋了一些坑等著后人來慢慢填。

因此本節將先從Angular的整體入手，向讀者簡單介紹這個重型框架的開發語言TypeScript和幾大特性。圖3.4是筆者簡化過的典型Angular應用結構圖，圖中前端區域包括了本章將要介紹的大部分內容，除了代碼模塊和依賴注入這兩個抽象概念和變形過濾器這個工具類組件。

3.2.1　Angular與TypeScript

Angular是用TypeScript構建的。TypeScript作為ES6的超集，直接使用JavsScript也是可以的，但是使用TypeScript最大的好處就是它的類型系統。類型檢查有助于在編譯期預防bug，更有助于清晰表達自己的意圖。

3.2.2　Angular實現了M.V.VM模式

MVVM模式是Model-View-ViewMode模式的簡稱。由視圖（View）、視圖模型（ViewModel）、模型（Model）三部分組成，通過這三部分實現UI邏輯、呈現邏輯和狀態控制、數據與業務邏輯的分離。圖3.4中從下至上組成MVVM的3部分：

?　模型（Model）用于封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。它代表了對后端數據直接訪問的權利，例如對數據庫的訪問（后面我們會看到，這是通過服務Service來代理完成的）。模型本身并不依賴于視圖和視圖-模型。

?　視圖-模型（View-Model）在中間負責與模型和視圖互動，將模型的最新狀態發送到視圖，由其利用HTML和CSS來渲染內容。

?　視圖（View）是Angular解析后渲染和綁定后生成的HTML。

Angular使用MVVM模式獲得了4大好處：

1．低耦合

視圖可以獨立于模型變化和修改，一個視圖-模型可以綁定到不同的視圖上。當視圖變化的時候模型可以不變，當模型變化的時候視圖也可以不變。

2．可重用性

可以把一些視圖的邏輯放在視圖-模型里面，讓很多視圖重用這段視圖邏輯。

3．開發與設計工作可分離

開發人員可以專注于業務邏輯和數據的開發（視圖-模型）。設計人員可以專注于界面（視圖）的設計。

4．可測試性

可以依據測試歸約構造視圖-模型來對界面（視圖）進行測試。

3.2.3　Angular實現了模塊化

把系統分割成多模塊（Modules）的目的是通過定義公共APIs、限制行為（功能）和數據（屬性和變量）的可視化，從而實現問題領域分離（Separation of Concerns）。大部分的編程語言內置了對模塊化的支持，作為一個完整的開發框架，Angular實現了自己的模塊化系統。這個系統有以下重要特性：

?　組件寄生于模塊中：在定義與使用本章后面介紹的控制器、指令、過濾器和服務組件時，必須指明其所屬的模塊系統（Angular自帶的核心組件除外）。

?　使用依賴注入：盡管服務組件是普通的JavaScript對象或函數，但為了不污染整體命名空間，這些服務不是定義在全局空間上，而是需要聲明了對其的依賴，才能在其他模塊中使用它們。

3.2.4　Angular實現了聲明式界面

使用Angular框架標準的Web頁面最顯著的特點是它們表面上都是多了一些特別的屬性tag（如：ngFor、ngIf、ngClass等）的靜態HTML文檔，卻能具有動態行為能力。

在Angular中，這類HTML文件被稱為模板，而ng-app這類標記被稱之為指令。模板通過指令指示Angular進行必要的操作。比如：ng-app指令就被用來通知Angular自動引導一個Angular應用。

當Angular啟動應用時，它會通過一個編譯器解析處理這個模板文件，生成的結果就是圖3.1里的視圖部分。

3.2.5　Angular實現了雙向數據綁定

目前市面上大多數的前端框架或庫在數據模型和視圖之間實現的都是單向數據綁定，而雙向數據綁定是Angular較有特色之處。

圖3.5中左邊的模型圖顯示了單向數據綁定的常用模式，即數據模型與HTML模板結合生成了一次性的視圖，數據流是單向的。而圖3.5中右邊的模型圖顯示的視圖與模型之間是有相互交互機制的，從而使視圖與模型互相形成數據成為可能，所以稱之為雙向數據綁定。而這個交互機制就是通過圖3.4中的視圖模型來完成的。

那么為什么需要雙向數據綁定呢？它的意義在于給開發人員帶來便利性和減少了煩瑣易錯的手工編寫兩層之間數據同步的工作量：

?　用戶通過視圖里的控件調整了語言配置、調整了夜間模式、輸入了數據項，這些行為可以用幾乎自動的方式來更新到數據模型。

?　當數據模型變化了，比如地理位置變化了、網絡情況變化了、同步／異步推送的數據流變化了（比如實時聊天類應用）、被其他視圖的輸入改變了，所有視圖都能幾乎自動地持續反應數據模型的變化。

請注意上面兩段話里都出現的幾乎自動這四個字，它使設計人員和開發人員的任務分離成為可能。也正因為有這個便利性為Angular帶來的成功，使后續出現的Vue.js、ReactJS等前端框架，在是否支持以及如何支持雙向數據綁定上都面臨一個艱難的決定（實現雙向數據綁定也會帶來一系列副作用，這就不屬于本書討論的范圍了）。