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