Angular 的前世此生

目錄

• 序言
• 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 的視圖。
  • 組件類上的裝飾器爲其添加了元數據，其中包括指向相關模板的指針。
  • 組件模板中的指令和綁定標記會根據程序數據和程序邏輯修改這些視圖。
• 依賴注入器會爲組件提供一些服務，好比路由器服務能讓開發人員定義如何在視圖之間導航。

參考

Angular 發展歷程概述

Angular和AngularJS之間的關係？

有關Angular 2.0的一切

Web Components - MDN Web Docs

Angular 文檔