Angular 初學(xué)者如何快速上手？
來(lái)源：原創(chuàng) 時(shí)間：2017-11-16 瀏覽：0 次
你可能會(huì)問(wèn)：Angular 的文章到處有，網(wǎng)上一大片，我為什么要來(lái)讀你這個(gè)系列文章？
這是非常好的一個(gè)問(wèn)題，說(shuō)明你對(duì)閱讀內(nèi)容有質(zhì)量要求。
如果是我，我也會(huì)問(wèn)這個(gè)問(wèn)題。
整體上說(shuō)，這個(gè)系列的文章有以下特色：
1）我會(huì)按照初學(xué)者一般的學(xué)習(xí)過(guò)程，用我自己的語(yǔ)言一步一步進(jìn)行講解。如你所知，最近的5年我一直在玩前端方面的東西，從 jQuery、SVG、ExtJS、Adobe Flex、Angular，這樣一路玩過(guò)來(lái)。尤其是2016年，這一整年的時(shí)間我都代表 Angular 項(xiàng)目組在中國(guó)進(jìn)行技術(shù)推廣。在這5年，我在超過(guò)40家企業(yè)、開源組織、大學(xué)里面進(jìn)行了大量演講，在網(wǎng)絡(luò)上發(fā)布了大量的視頻和文章。在到處交流的過(guò)程中，認(rèn)識(shí)了很多人，有經(jīng)驗(yàn)豐富的后端開發(fā)者，也有新入行的初學(xué)者，他們跟我講過(guò)很多自己的困惑。所以，這個(gè)系列文章里面的內(nèi)容我至少反復(fù)講過(guò)20遍以上，我會(huì)把常見的一些疑問(wèn)融入在內(nèi)容里面。
2）我會(huì)幫你掃平日常開發(fā)中常見的坑，這些坑大部分都是開發(fā)者們反饋給我的，或者說(shuō)到我這里吐槽過(guò)的。舉幾個(gè)典型的例子：
很多開發(fā)者到我這里來(lái)抱怨說(shuō)，在 Windows 平臺(tái)上安裝 @angular/cli 會(huì)報(bào)很多 error，那是因?yàn)?@angular/cli 在 Windows 平臺(tái)上面依賴 Python 和 Visual Studio 環(huán)境，而很多開發(fā)者的機(jī)器上并沒有安裝這些東西。
node-sass 模塊被墻的問(wèn)題，強(qiáng)烈推薦使用 cnpm 進(jìn)行安裝，可以非常有效地避免撞墻。
一些開發(fā)者來(lái)抱怨說(shuō) @angular/cli 在打包的時(shí)候加上 --prod 參數(shù)會(huì)報(bào)錯(cuò)，無(wú)法編譯。這是一個(gè)很常見的問(wèn)題，因?yàn)?@angular/cli 最新的版本經(jīng)常會(huì)有 bug，只要在你項(xiàng)目的 package.json 里面降低一個(gè)小版本號(hào)就OK。
@angular/cli 默認(rèn)生成的 karma.conf.js 配置文件里面采用了一個(gè)有 bug 的 html 報(bào)告生成器，導(dǎo)致 ng test 運(yùn)行報(bào)錯(cuò)，我們需要把這個(gè) reporter 改成 mocha（摩卡）。
有一些朋友說(shuō)，本地開發(fā)的時(shí)候運(yùn)行得很好，上線之后所有請(qǐng)求404。這也是一個(gè)常見的坑，因?yàn)槟阈枰o Web 容器配置一下處理 http 請(qǐng)求的規(guī)則，把前端路由扔回去交給 Angular 處理，請(qǐng)參考這份文檔。
諸如此類的坑還有不少，我都是一個(gè)坑一個(gè)坑踩過(guò)來(lái)的。當(dāng)然，我相信你自己也能踩過(guò)來(lái)，但是從節(jié)約時(shí)間的角度看，還是跟著我的思路走一遍更快不是嗎？
3）這個(gè)系列的文章全部聚焦使用層面的話題，覆蓋日常開發(fā)中使用頻最高的特性。除非迫不得已，盡量不扯原理。長(zhǎng)期以來(lái)，我發(fā)現(xiàn)有很多朋友的學(xué)習(xí)方式存在誤區(qū)。比如：有一些人上來(lái)就去研究“變更檢測(cè)”的原理，還有 RxJS 的原理，這種方式除了打擊你自己的自信心之外并不能得到任何好處。因?yàn)槟氵t早會(huì)發(fā)現(xiàn)，在計(jì)算機(jī)領(lǐng)域，任何東西研究到最底層都和“算法”、“數(shù)據(jù)結(jié)構(gòu)”、“設(shè)計(jì)模式”有關(guān)。而就我所知，很多朋友并不具備研究這些內(nèi)容的基礎(chǔ)知識(shí)，不過(guò)是白白浪費(fèi)自己的時(shí)間而已。所以，我推薦采用更加務(wù)實(shí)一點(diǎn)的方案，首先學(xué)會(huì)如何使用，等用熟了，有時(shí)間、有閑情的時(shí)候再去研究那些底層的原理。設(shè)計(jì)發(fā)動(dòng)機(jī)很難，但是學(xué)會(huì)開車并不難，對(duì)吧？所以我寫這個(gè)系列的目標(biāo)很簡(jiǎn)單，就是帶你學(xué)會(huì)開車，而不是教你設(shè)計(jì)發(fā)動(dòng)機(jī)。
4）這個(gè)系列的文章非?？粗?ldquo;概念模型”（ Mental Model ）的構(gòu)建。我發(fā)現(xiàn)，很多開發(fā)者已經(jīng)做過(guò)非常多的項(xiàng)目，但是當(dāng)你跟他聊的時(shí)候，你很快就會(huì)發(fā)現(xiàn)他并沒有掌握這門框架的精髓。打幾個(gè)比方，當(dāng)別人提到 Spring 的時(shí)候，你的大腦里面第一個(gè)想到一定是 DI、IOC、AOP 這些東西；當(dāng)別人提到 Hibernate 或者 Mybatis 的時(shí)候，你的大腦里面立即會(huì)浮現(xiàn)出 ORM 的概念；當(dāng)別人提到 React 的時(shí)候，你想到的應(yīng)該是 VDom、JSX；當(dāng)別人提到 jQuery 的時(shí)候，你首先想到的應(yīng)該是$對(duì)吧？所以，你可以看到，任何一個(gè)成功的框架都有自己獨(dú)創(chuàng)的“概念模型”，或者叫“核心價(jià)值”也可以。這是框架本身存在的價(jià)值，也是你掌握這門框架應(yīng)該緊扣的主線，而不是上來(lái)就陷入到茫茫多的技術(shù)細(xì)節(jié)里面去。
5）文章里面所涉及到例子總數(shù)量大約 200 個(gè)左右，有少量例子來(lái)自官方文檔，其它都是我自己一點(diǎn)一點(diǎn)手動(dòng)敲出來(lái)的。我把這些例子分成了9個(gè)開源項(xiàng)目，它們互相獨(dú)立，方便大家進(jìn)行參考和練習(xí)。這些教學(xué)用的開源項(xiàng)目本身是免費(fèi)的，列在這篇文章的尾部。
Angular 的概念模型
既然如此，問(wèn)題就來(lái)了，新版本的 Angular 的核心概念是什么呢？
非常簡(jiǎn)單，一切都是圍繞著“組件”（ Component ）的概念展開的：
Component（組件）是整個(gè)框架的核心，也是終極目標(biāo)。“組件化”的意義有2個(gè)：第一是分治，因?yàn)橛辛私M件之后，我們可以把各種邏輯封裝在組件內(nèi)部，避免混在一起；第二是復(fù)用，封裝成組件之后不僅可以在項(xiàng)目?jī)?nèi)部復(fù)用，而且可以沉淀下來(lái)跨項(xiàng)目復(fù)用。
NgModule（模塊）是組織業(yè)務(wù)代碼的利器，按照你自己的業(yè)務(wù)場(chǎng)景，把組件、服務(wù)、路由打包到模塊里面，形成一個(gè)個(gè)的積木塊，然后再用這些積木塊來(lái)搭建出高樓大廈。
Router（路由）的角色也非常重要，它有3個(gè)重要的作用：第一是封裝瀏覽器的 History 操作；第二是負(fù)責(zé)異步模塊的加載；第三是管理組件的生命周期。
所以，在這個(gè)系列的文章里面，Component、NgModule、Router 加起來(lái)會(huì)占據(jù)絕大部分篇幅，而一些瑣碎的小特性會(huì)被忽略掉。我相信，你只要緊扣“組件化”這個(gè)主線，就能站在一個(gè)很高的角度統(tǒng)攝全局，從而掌握到這門框架的精髓。
適合閱讀的人群
這個(gè)系列的文章適合以下人群閱讀：
Angular 新版本的初學(xué)者
有 AngularJS 1.x 經(jīng)驗(yàn)的開發(fā)者
希望了解 Angular 新版本核心特性的開發(fā)者
特別注意：這個(gè)系列的文章不是前端入門讀物，你至少需要會(huì)一門編程語(yǔ)言，無(wú)論前端還是后端都可以，如果你曾經(jīng)使用過(guò)一門前端框架，那就更好了。
集中回答一些常見的問(wèn)題
瀏覽器兼容性
關(guān)于 Angular 的瀏覽器兼容性，請(qǐng)看下圖：
有一些國(guó)內(nèi)的開發(fā)者會(huì)來(lái)爭(zhēng)論兼容 IE8 的問(wèn)題，我想給你兩個(gè)事實(shí)：
第一個(gè)事實(shí)是：截至2017年7月底，Chrome 的全球市場(chǎng)份額已經(jīng)接近60%，加上 Firefox 的 12.28%，真的沒有那么多人用 IE 了。
數(shù)據(jù)來(lái)源
第二個(gè)事實(shí)是：天貓已經(jīng)于2016年4月宣布放棄支持 IE6、7、8。而根據(jù)百度流量研究院的統(tǒng)計(jì)，IE8目前的整體市場(chǎng)份額已經(jīng)下降到了9.31%：
數(shù)據(jù)來(lái)源
不值得為了這么少的市場(chǎng)份額付出那么多的研發(fā)和維護(hù)成本。
你完全可以以上兩點(diǎn)事實(shí)去說(shuō)服你的客戶。
命名約定
老版本使用 AngularJS 指代，所有新版本都叫做 Angular。原因很好理解，因?yàn)槔习姹臼怯?JS 開發(fā)的，所以帶一個(gè) JS 后綴，而新版本是基于 TypeScript 的，帶 JS 后綴不合適。
關(guān)于 TypeScript
這個(gè)系列的文章不會(huì)單獨(dú)講 TypeScript，正如我一直強(qiáng)調(diào)的：TypeScript 不難，JavaScript 才難。你跟著我的思路，TypeScript 絕對(duì)不會(huì)成為你學(xué)習(xí) Angular 的障礙。相反，一旦你寫熟練了之后，TypeScript 可以非常有效地提升編碼效率和程序可讀性。
關(guān)于版本號(hào)
根據(jù)官方的解釋，Angular 從 2.0 之后會(huì)保證向下兼容，每隔半年會(huì)升級(jí)一個(gè)大版本，只有升級(jí)大版本的時(shí)候才會(huì)做一些 breaking change。
所以這個(gè)系列文章里面不再?gòu)?qiáng)調(diào)版本號(hào)，涉及到的所有實(shí)例代碼都基于目前（2017-10）最新的 4.x 版本。
