1.背景介紹：Angular1.x與Angular2

近年來(lái)，Web 開(kāi)發(fā)技術(shù)的發(fā)展日新月異，各種框架層出不窮。在這樣的大背景之下，2010年10月，Google 首次發(fā)布了自己的 Web 開(kāi)發(fā)框架，名為 AngularJS，也叫 Angular，或者簡(jiǎn)稱(chēng)為 ng。

Angular 剛一發(fā)布就引起了強(qiáng)烈的關(guān)注，它首次提出的“雙向數(shù)據(jù)綁定”的概念受到了眾多開(kāi)發(fā)者的喜愛(ài)。當(dāng)然，也有很多人對(duì)此持有保留意見(jiàn)。但是無(wú)論如何，Angular 所提出來(lái)的眾多獨(dú)創(chuàng)性的概念深深影響了 Web 技術(shù)的發(fā)展進(jìn)程。例如，當(dāng)前市面上相當(dāng)多的 Web 框架都已經(jīng)支持“數(shù)據(jù)綁定”的概念，有一些支持單向綁定，有一些支持雙向綁定，Angular 的影響力之強(qiáng)大可見(jiàn)一斑。

在 Google 內(nèi)部有非常多的產(chǎn)品都在使用 Angular，在國(guó)內(nèi)，也有非常多的企業(yè)正在使用 Angular1.x 開(kāi)發(fā)自己的應(yīng)用，包括移動(dòng) APP，其中有很多行業(yè)巨頭。

2014年9月，Angular 團(tuán)隊(duì)在 ng-europe 會(huì)議上公開(kāi)宣布了第二個(gè)大版本的開(kāi)發(fā)計(jì)劃，也就是大家熟知的 Angular2，與此對(duì)應(yīng)，之前的版本就稱(chēng)為 Angular 1.x了。

Angular2 依然保持了最初的核心設(shè)計(jì)理念，但是與 Angular 1.x 相比，在各種語(yǔ)法細(xì)節(jié)上發(fā)生了大幅度的修改。

詳細(xì)的情況在后面的第三小節(jié)“ Angular2 有哪些重要變化？”中解釋。從整體上看，Angular2 變得更加簡(jiǎn)潔，因?yàn)樗暮诵母拍钪挥幸粋€(gè)，那就是追求徹底的“組件化（Component）”。

2.每一個(gè)框架都有一個(gè)核心靈魂

當(dāng)我們談?wù)?Spring 的時(shí)候，你腦海里一定會(huì)自動(dòng)跳出 IOC、DI 這樣的概念。顯然，“控制反轉(zhuǎn)”、“依賴(lài)注入”就是 Spring 的核心靈魂。

當(dāng)我們談?wù)?Hibernate 或者 Mybatis 的時(shí)候，你首先想到的一定是 ORM（實(shí)體關(guān)系映射），它解決了關(guān)系模型和 OO 模型之間的數(shù)據(jù)結(jié)構(gòu)映射問(wèn)題。

當(dāng)我們談?wù)?jQuery 的時(shí)候，你想到的一定是 DOM 操作以及網(wǎng)絡(luò)上無(wú)數(shù)的開(kāi)源控件。很顯然，DOM 操作就是 jQuery 的核心靈魂，它幫我們屏蔽了瀏覽器兼容性問(wèn)題，并且提供了業(yè)務(wù)開(kāi)發(fā)過(guò)程中所需要的各種UI控件。

當(dāng)我們談?wù)?Angular 1.x 的時(shí)候，你想到了什么？呃，等一等，想到的東西有點(diǎn)多，有時(shí)候什么都想不起來(lái)。概念龐雜而無(wú)法把握，這就是 Angular 1.x 存在的最大問(wèn)題。

每一個(gè)成功的框架都會(huì)有一個(gè)核心靈魂，這個(gè)核心靈魂必須能解決實(shí)際開(kāi)發(fā)中的一個(gè)痛點(diǎn)。既然是核心靈魂，最好有且只有一個(gè)，否則就會(huì)給使用者帶來(lái)很大的學(xué)習(xí)壓力。在這一方面，Angular1.x 是一個(gè)反面教材。

因?yàn)樗奶匦员容^多，其中最核心的4大特性分別是：

• 模塊化

• MVC

• 雙向數(shù)據(jù)綁定

• 指令

如果再加上一些瑣碎的細(xì)節(jié)，如 $scope、臟值檢測(cè)、依賴(lài)注入、路由、表單校驗(yàn)等等，整體上給人的感覺(jué)就是過(guò)于瑣碎，沒(méi)有一個(gè)核心靈魂能統(tǒng)攝一切。

Angular 團(tuán)隊(duì)也意識(shí)到了這一點(diǎn)，因此，Angular2 在設(shè)計(jì)之初就簡(jiǎn)化了整體的概念模型。Angular2 的核心靈魂只有一個(gè)，那就是組件化（Component），而其它那些細(xì)碎的東西，比如 Service、Route、Pipe，都是 utils 而已。因此，在使用 Angular2 的時(shí)候，開(kāi)發(fā)者只要學(xué)會(huì)使用 Coponent 就解決了一大半問(wèn)題。

大道至簡(jiǎn)，LESS is MORE。
3.Angular2 有哪些重要變化？
有了 Component 這個(gè)統(tǒng)攝全局的概念之后，我們來(lái)看看與 Angular 1.x 相比 Angular2 發(fā)生了什么變化。

?第一點(diǎn)：Angular2 刪掉了 $scope 的概念

在 Angular 1.x 里面，$scope 是一個(gè)相當(dāng)強(qiáng)大又相當(dāng)可怕的東西，由于在很多需要回調(diào)的場(chǎng)景之下，臟值檢測(cè)機(jī)制無(wú)法感知到 $scope 上發(fā)生的變化，因此經(jīng)常需要開(kāi)發(fā)者自己手動(dòng)調(diào)用 $apply() 方法。典型的場(chǎng)景有：事件回調(diào)、setTimeout 回調(diào)、Ajax 回調(diào)等等。Angular2 響應(yīng)社區(qū)的強(qiáng)烈呼吁，刪除（或者說(shuō)隱藏）了 $scope 的概念，開(kāi)發(fā)者不再需要感知到它的存在。另外，Angular2 在底層引入了 zone.js，所以即使在各種回調(diào)函數(shù)中修改數(shù)據(jù)模型也不需要手動(dòng)調(diào)用 $apply() 方法了。

?第二點(diǎn)：刪掉了 ng-controller 指令

這就意味著 Controller 不再是一個(gè)獨(dú)立的組件，它合并到了 Component 內(nèi)部。這是一個(gè)非常大的演進(jìn)，因?yàn)閺拇罅康膶?shí)戰(zhàn)經(jīng)驗(yàn)來(lái)看，在復(fù)雜的業(yè)務(wù)邏輯中復(fù)用 Controller 幾乎是不可能的。在其它同類(lèi)的前端框架里面也有類(lèi)似的處理手法，例如 Backbone 雖然也強(qiáng)調(diào) MVC 的概念，但是它也沒(méi)有定義單獨(dú)的 Controller 類(lèi)，Controller 也是合并在 View 里面編寫(xiě)的。

?第三點(diǎn)：大幅度演進(jìn)了臟值檢測(cè)機(jī)制

眾所周知，“雙向數(shù)據(jù)綁定”之所以能運(yùn)行，是因?yàn)?Angular 底層有“臟值檢測(cè)”這么一個(gè)神奇的機(jī)制。而實(shí)際上 Angular 1.x 里面的臟值檢測(cè)機(jī)制的運(yùn)行效率非常差，這就是為什么大家一直在抱怨綁定的對(duì)象不能太多、太深的原因。Angular2 大幅度演進(jìn)了這一機(jī)制，不僅引入了單向綁定，還增加了各種檢測(cè)策略，例如：只檢測(cè)一次、利用 JIT 動(dòng)態(tài)生成臟值檢測(cè)代碼等等。毫無(wú)疑問(wèn)，有了這些工具之后，數(shù)據(jù)綁定效率不再是問(wèn)題。

?第四點(diǎn)：嵌套路由

Angular 1.x 里面有一個(gè)非常討厭的問(wèn)題，框架內(nèi)置的路由機(jī)制不支持嵌套使用，這就導(dǎo)致開(kāi)發(fā)者在日常的開(kāi)發(fā)過(guò)程中不得不依賴(lài)于第三方的 ui-router 庫(kù)。Angular2 沒(méi)有這個(gè)問(wèn)題了，因?yàn)?Angular2 的路由是基于 Component 的，天然支持嵌套。

?第五點(diǎn)：依賴(lài)注入機(jī)制演進(jìn)

Angular2 中的依賴(lài)注入寫(xiě)法與 Java 中的注解（Annotation）非常類(lèi)似，如果你熟悉 Spring 注解的用法，那么使用 Angular2 的依賴(lài)注入幾乎沒(méi)有學(xué)習(xí)成本。當(dāng)然，概念上是有區(qū)別的，Angular2 中叫 Decorator（裝飾器），更加貼近 Python 里面的 Decorator 的概念。

?第六點(diǎn)：框架整體上基于 TypeScript 開(kāi)發(fā)

這是最大的一個(gè)變更，有很多人擔(dān)憂這樣是否會(huì)帶來(lái)比較大的學(xué)習(xí)成本，實(shí)際的情況并非如此。因?yàn)?TypeScript 的語(yǔ)法與 Java 或者 C# 非常類(lèi)似，因此對(duì)于從后端轉(zhuǎn)過(guò)來(lái)的開(kāi)發(fā)者來(lái)說(shuō)，學(xué)習(xí)這門(mén)語(yǔ)言幾乎是沒(méi)有難度的。

還有一個(gè)重要的方面需要大家注意：TypeScript 是 Microsoft 開(kāi)發(fā)的一門(mén)語(yǔ)言，Google+Microsoft 這樣的組合會(huì)產(chǎn)生多么強(qiáng)大的推動(dòng)力，大家可以想象。Google 和 Microsoft 本身都是重要的瀏覽器廠商，Chrome 和 IE 加起來(lái)的市場(chǎng)份額占據(jù)了一大半的市場(chǎng)份額，未來(lái)如果兩款瀏覽器內(nèi)建 TypeScript 引擎，很顯然 TypeScript 和 Angular 的前景將會(huì)一片光明。這一優(yōu)勢(shì)是大量的同類(lèi)技術(shù)框架根本無(wú)法企及的，因此大家在做技術(shù)選型的過(guò)程中需要綜合考慮這些情況作出理性的決策。

4.我從哪里開(kāi)始學(xué)習(xí)Angular2？

直面Angular2系列課第二期

“Hello，Angular 2”

開(kāi)課時(shí)間：12-20 20:00　|　時(shí)長(zhǎng)：1小時(shí)

主講嘉賓

郝冠軍

微軟最有價(jià)值專(zhuān)家

畢業(yè)于北京航空航天大學(xué)，軟件工程碩士學(xué)位

具有十年以上的開(kāi)發(fā)與培訓(xùn)經(jīng)驗(yàn)

對(duì)ASP.NET和Visual Studio Code有著深入的研究

多家著名企業(yè)培訓(xùn)講師，微軟招募組組長(zhǎng)，博客園博主

著有暢銷(xiāo)書(shū)《ASP.NET本質(zhì)論》

內(nèi)容介紹

實(shí)現(xiàn) Hello, Angular 2 組件

使用 Module 組織模塊

獲取 Angular 2

使用Typing 獲取類(lèi)型定義

編譯 Angular 2 的三種方式

模塊加載器之一 System.js

模塊加載器之二 Webpack

使用 AOT 實(shí)現(xiàn)預(yù)編譯

課程總結(jié)

互動(dòng)問(wèn)答環(huán)節(jié)

報(bào)名入口

dotNET跨平臺(tái)粉絲的福利來(lái)了！

本期微課系付費(fèi)課程

點(diǎn)擊閱讀原文獲取課程優(yōu)惠券

使用優(yōu)惠券即可免費(fèi)聽(tīng)課

數(shù)量有限！先到先得！

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

總結(jié)

以上是生活随笔為你收集整理的大咖微课 | 直面Angular2系列课第二期开讲的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。