【Angular2】基礎入門

【前言】

由於最近公司使用 Angular2 來做前端，對於小白的我來說必須來學習一下 Angular2 了。下面由小編來分享一下學習成果，爲大家介紹一下Angular2。

一、歷史發展：

（一）起源：

2009年，Misko hevery 和 Adam Abrons 在業餘時間創造了GetAngular。那麼這個GetAngular到底有多大的作用呢？這裏有個小故事：Misko Hevery 使用GetAngular重寫了Google內部的Feedback項目，重構前17000行，三週時間完成重構，重構後代碼量只有1500行。從這個事情可以看出Angular的效率很高！這個事情過後，Angular被正式立項，由專職團隊開發和維護，並將其首次命名爲AngularJS。

（二）迭代之路：

2012年6月，AngularJS1.0.0 正式版推出，亮點功能基本齊備，如雙向綁定、依賴注入、指令等。

AngularJS 1.3.x 放棄支持IE8瀏覽器，並推出了單次綁定語法。

AngularJS 1.5.x 增加類似組件式書寫體驗，爲過渡 Angular2 做了鋪墊。

AngularJS 1.x 的困境：飽受詬病的性能問題，落後於當前Web發展理念（如組件開發方式），對手機端不夠友好。

（三）Angular 的萌生：

早在2014年3月，官方博客就有提及新 Angular 的開發計劃。

2014年月下旬的 NG-Europe 大會上，Angular2 正式亮相。

2016年9月15號，Angular2正式版發佈。

（四）Angular2 新特性：

移除 controller+$scope 設計，改用組件式開發（更易上手）

性能更好（渲染更快，變化監測2效率更高）

優先爲移動應用設計（Angular Mobile Toolkit）

更加貼合未來的標準（如ES6/7、WebComponent）。

支持無縫升級-UpgradeAdapter

二、Angular2 核心概念

構成：Angular 核心概念有：組件、元數據、模板、數據綁定、服務、指令、依賴注入、模塊。而組件是 Angular2 最核心的組成，其他都是組件的延伸，爲組件提供服務。

(一)組件

每個頁面都可以說是由組件構成的。組件之間層層嵌套，自上而下形成組件樹。

組件要素有：Javascript，HTML，CSS。

組件之間的通訊機制：每個組件都可以定義自己的輸入輸出屬性，這些屬性成爲了組件的對外接口，負責與上下游的組件進行交互。

組件都有完整的生命週期鉤子，使我們能夠清楚的知道組件生命週期的變化。

示例：

如果我們僅僅定義了一個類，Angular2 是不知道如何解釋這個類的。如果在上面加上了Component裝飾器，這個裝飾器會在運行的時候把他的元數據參數通過某一種方式注入到這個類裏面。這樣Angular2就能夠識別出來這個類是一個組件類。所以，裝飾器的作用就是：賦予一個類更豐富的信息（元數據）。

（二）模板

template屬性用來定義組件的模板。下面的例子是定義的內聯模板，如果需要定義外聯模板，就使用templateUrl屬性。需要注意的是，一個組件只能選定一種來指定模板。

（三）數據綁定

模板裏面有一個{{ }}的語法，這個就是最常見的一種數據綁定方式，稱爲插值。數據綁定語法裏可以直接使用組件類裏面的成員變量。

除了插值還有一些其他較常見的數據綁定方式：

　屬性綁定：把組件類的數據傳遞到組件模板中。

　事件綁定：把模板產生的數據通過函數調用方式傳遞給組件類。

　雙向綁定：數據雙向流動。

（四）組件渲染

當組件邏輯執行完之後，輸出到視圖內容就會填充到＜hello＞標籤裏，模板裏的變量也會替換爲具體的值。

（五）組件樹

ContactList和Contact形成了父子組件的關係。Contact作爲元素標籤使用在ContactList組件的模板的時候，組件Contact就成爲了組件ContactList的子組件。需要注意的是，父組件ContactList要能使用子組件定義的一些元素標籤，還需要有一個導入的過程，需要藉助模塊來實現。

縱觀整個組件樹，數據是通過屬性綁定，一層一層的往下傳遞。屬性綁定是自上而下的傳遞，自下而上的綁定則通過事件來實現。事件綁定也負責屬性間的數據傳遞，數據傳遞的方向是一層層往上傳遞。

（六）指令

指令在某種程度上增強了組件模板的特性，是模板的一種擴展。

此外，指令也是支持自定義的，以此來滿足更多的業務需求。

（七）服務與依賴注入

服務是實現專一目的的邏輯單元。

服務怎麼被組件使用呢?這時候就需要引入依賴注入。

依賴注入是組件引入外部構建的一種機制。組件引用服務實際上是引用這個服務類的實例，所以服務再被引用之前會有一個實例化的過程，並且這個實例通常需要緩存起來已備其他實例使用。所以管理實例化緩存的過程正是依賴注入所實現的。服務是實例存儲在依賴注入機制建立的注入器對象裏，當組件需要依賴某個服務的時候，依賴注入會從注入器裏查找匹配的實例，找到後便執行注入操作。