WeChat小程式開發（五、前端總結）
目錄
- 序言
- AngularJS 簡介
- Angular 2.0 的動機
- 現如今的 Angular
- Angular 的核心概念
- 參考
序言
Angular 一般意義上是指 Angular v2 及以上版本，而 AngularJS 專指 Angular 的所有 1.x 版本。出現這種區別是由於 Angular 對 AngularJS 進行了完全重寫，兩者區別很大，直接形成了兩個獨立的產品。
- AngularJS 官網：Superheroic JavaScript MVW Framework
- Angular 官網：One framework. Mobile & desktop.
接下來主要介紹 Angular 最初出現的動機以及其核心概念。
AngularJS 簡介
AngularJS 誕生於 2009 年，由 Misko Hevery 等人建立，後被 Google 收購，是一款的前端 JS 框架。AngularJS 有著諸多特性，最為核心的是：MVVM、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。
Angular 2.0 的動機
為了解決 AngularJS 1.x 中存在的各種問題以及跟上新的標準規範，而進行了一次徹底革新。
（1）效能
AngularJS 最初作為一個工具被建立，並不是為開發人員設計的，更傾向於設計人員用來快速建立持久化 HTML 表單。在之後的發展中，為了讓開發人員也能用它進行構建更多、更復雜的程式，Angualr 1.x 的維護團隊不斷增量地改進，使它能適應現代 Web 應用程式的需求。不過，由於原始設計上的一些潛規則，不論如何改進終究是有其侷限性，而這也導致了當前的繫結和模板基礎架構始終存在效能瓶頸。而為了解決效能問題，需要新的策略。
（2）變化的 Web
在 AngularJS 被創建出來的5年中，Web 也在不斷的發展，不僅僅是 JavaScript 的規範快速發展，使得瀏覽器開始支援 module、class、lambda、generator 等新的語法特性，另外 Web Components 的技術標準也被提出並被瀏覽器逐步支援。現如今 Web Components 主要由三種技術組成：
- Custom elements（自定義元素），允許通過一組 JavaScript API 來自定義標籤擴充套件 HTML。
- Shadow DOM（影子DOM），允許對元素功能私有化（對HTML、CSS 和 JavaScript 進行封裝），不用擔心與文件的其他部分發生衝突。
- HTML templates（HTML模板），允許在 HTML 中定義模板，模板可以反覆使用，並且只有呼叫的時候才會被渲染。
Web Components 是一種建立封裝的、可複用的網頁 UI 元件的標準化方式，其不僅可以彌補標準的 HTML 工具集所存在的不足，也能提升開發人員的創造能力和開發效率。
Angular 1.x 本身是包含資料繫結功能的，其構建在一部分已知的 HTML 元素和常用事件、行為的基礎上，而為了使其支援 Web Components 技術，就需要有一個全新的資料繫結實現。
（3）移動端
隨著網際網路的不斷髮展，手機等移動端開始崛起，通用計算場景逐步傳送變化。而最初設計的 AngularJS 雖然可以被用於建立移動應用，但它本身的理念並非為此設計。這也導致了它在移動端這塊面臨諸多問題，包括前面提到的效能問題，不能快取預編譯檢視以及過於普通的觸控支援等等。
（4）易用性
AngularJS 的很多核心特性都是逐步被“拼湊”出來的，比如最開始沒有自定義指令，都是硬編碼，之後增加了專門用於新增指令的API，最開始也沒有控制器，也是之後才增加了控制器的概念和功能等。可以說 AngularJS 最初被設計時，其核心特性就不是很清晰，這也就造就了很多 API 的設計得不夠優雅，這也增加開發人員的學習和使用的難度。
現如今的 Angular
Angular 是一個用 HTML 和 TypeScript 構建客戶端應用的平臺與框架。 Angular 本身由 TypeScript 寫成，它將核心功能和可選功能作為一組 TypeScript 庫進行實現，開發人員可以直接匯入使用。
Angular 的核心概念
Angular 的很多核心概念是繼承至 AngularJS 的（依賴注入、資料繫結等等），並在其基礎上進一步發展。
Angular 框架有八大核心概念，它們是 Angular 的重要組成部分，如下圖：
模組 (Module)：Angular 應用是模組化的，它擁有自己的模組化系統，稱作 NgModule。 一個 NgModule 就是一個容器，用於存放一些內聚的程式碼塊，這些程式碼塊專注於某個應用領域、某個工作流或一組緊密相關的功能。
元件 (Component)： 元件用來包裝特定的功能，在類（class）中定義元件的應用邏輯，為檢視提供支援。
模板 (Template)：模板就是一種 HTML，用它來告訴 Angular 如何渲染該元件。模板很像標準的 HTML，但是它也包含 Angular 的模板語法，這些模板語法可以根據自定義的應用邏輯、狀態和 DOM 資料來修改 HTML。
元資料 (Metadata)：元資料用於告訴 Angular 如何處理一個類，例如從哪裡獲取它需要的主要構造塊，以建立和展示這個元件及其檢視。
資料繫結 (Data Binding)：資料繫結就是把資料對映到模板上，或者從模板中取回資料。 Angular 支援雙向資料繫結。
指令 (Directive)：指令就是一個帶有 @Directive() 裝飾器的類。在 Angualr 渲染時，會根據指令給出的指示對 DOM 進行轉換。（元件從技術角度上說也是一個指令）
服務 (Service)：廣義的服務包括應用所需的任何值、函式或特性。狹義的服務是一個明確定義了用途的類，它應該做一些具體的事，並做好。
依賴注入 (Dependency Injection)：依賴注入（DI）是一種重要的設計模式。在 Angular 框架中，依賴注入被用於在任何地方給新建的元件提供服務或所需的其它東西。 元件是服務的消費者，通過 DI 把一個服務注入到元件中，讓元件類得以訪問該服務類。
Angular 框架的八大核心概念相互之間的關係，如下圖：
上圖中的關係概要：
- 元件和模板共同定義了 Angular 的檢視。
- 元件類上的裝飾器為其添加了元資料，其中包括指向相關模板的指標。
- 元件模板中的指令和繫結標記會根據程式資料和程式邏輯修改這些檢視。
- 依賴注入器會為元件提供一些服務，比如路由器服務能讓開發人員定義如何在檢視之間導航。