【Angular專題】——（1）Angular，孤傲的變革者

目錄

• 一. 漫談Angular
• 二. 如果你還在使用Angularjs
• 三. 我計劃這樣學習Angular技術棧

一. 漫談Angular

Angular，來自Google的前端SPA框架，與React,Vue並稱前端框架的三駕馬車，前些日子剛發佈了7.0版本。它是一個十足的革命者，每一次亮相，都會把新的思想和軟體層面的實現提供給開發者，從Angularjs1.0時代推翻jQuery的統治地位，到Angular2.0時代基於Typescript的全面升級，再到現在每半年一個大版本的高速更新迭代，不斷革新著前端代碼的編寫方式，也推動著前端開發工程化和正規化的發展，可以說Angular一直在用行動詮釋著自己的孤傲和才華。

Angular非常喜歡引入和傳播思想層面的概念，它把那些被公認為正確優雅且有助於工程實踐的事物帶給前端，而並不在乎這些事物來自前端或者後端，也不在乎新的概念起源於哪個編程語言，它不發明概念，只是概念的搬運工，它似乎總是在說“這個想法是對的，那我們在Angular里實現它吧”，造成的直接結果就是學習曲線異常陡峭，許多初級和中級的開發者淺嘗輒止，直接棄坑投奔React和Vue陣營，所有的創新都會面臨這樣的窘境，但Angular似乎並不在乎，升級迭代的速度反而更快了。事實證明這種精英門檻思維是正確的，它的確讓很多初中級開發者無所適從，但同時也讓中高級前端開發者和從後端轉到前端開發的工程師受益，工程化的工具，面向對象的思想，高仿Java的語法，強類型的限制，一個個特性都對開發團隊的整體素養提出了更高的要求，同時也讓代碼的質量也有了更多的保障。

Angular是有生命的，與其說它是一個框架，倒不如說它是一個老師，不僅教授編程，也傳播思想，嚴厲卻有活力。如果說Vue能激發開發者的興趣，讓你快速上手拿出作品，React能夠強迫開發者深耕javascript語言本身的特性和組件化思想，那麼Angular帶給前端開發者的，更多的是正統的面向對象開發和軟體工程的思維方式，它逼迫你改變散漫的編程習慣，強迫你學習新的實現方式，漸漸地你甚至忘記了自己是一個前端，那麼恭喜你，說明你已經脫離了初級水平。

如果一件事情是軟體工程師應該懂的，那麼你就應該懂。在我眼裡，這才是Angular帶給前端開發者最有價值的思想，因為內心深處的自我認知和定位會決定一個人未來所能達到的高度。

二. 如果你還在使用Angularjs

提到Angular體系，許多開發者由於入行較晚的緣故，很有可能還在使用Angularjs1.X版本進行開發或維護，並沒有必要覺得自卑或者沮喪。Angular的開發者並不見得就比Angularjs1.X的開發者更厲害，不誇張的說，Angularjs1.X中所包含的精華知識對很多開發者來說可能一輩子都學不完，你需要關註其底層原理，把知識點延伸開去學習，而不只是每天沒完沒了地寫頁面綁事件發請求然後自我陶醉。

Angularjs1.X被認為是模塊化的開發框架，而Angular,Vue,React被認為是組件化的框架，從常見語法的角度來看的確是這樣，但這並不代表Angularjs1.X不能進行組件化開發，只是門檻略高，Angularjs1.X中組件化的實現是基於自定義指令的，1-2年經驗卻未嘗試過使用自定義指令的開發者比比皆是，造成的直接結果就是常常一個controller中的代碼好幾千行，代碼里混合著各種DOM操作，不僅性能很難保障，維護難度也是噩夢級別的。

如果面對這樣的情況你還沒有解決思路，那我並不建議你開始Angular技術棧的學習，而應該先去搞清楚如何在自己最熟悉的框架中來應用組件化開發的思想。比如面對一個4000行的controller，先考慮一下自己能不能通過拆分子路由和組合視圖將其重構為3-4個大模塊，這樣每個大模塊就有約1000行代碼，再考慮一下能否把大模塊拆分成3-4個小模塊，controller只傳入必要的啟動參數，然後在小模塊中實現業務自治，並通過controller來實現不同小模塊之間的通訊，這樣每個模塊的代碼量基本就可以做到小於500行，接著把DOM操作儘量整合進指令的link函數中，配合框架自身的生命周期特點來運行。如果上面的描述你不知道如何做，那麼就靜下心好好查查資料，學習實踐一下。如果你已經知道該怎麼實現，那麼就可以開啟Angular2的學習了，你會在其中看到很多很多自己熟悉的東西。

三. 我計劃這樣學習Angular技術棧

說實話，我接觸Angular才2個禮拜，但是我很喜歡它，嚴謹，優雅，最重要的是VSCode的主題很漂亮。我的學習計劃大約是這樣，如果感興趣，歡迎一起行動起來：

• 1.慕課網的免費教程里有一個Angular的課程和一個Angular-Cli的課程，可以帶你快速入門。（已完成）

• 2.閱讀官方文檔：Angular中文網地址：https://www.angular.cn/

  官方文檔特別詳細，至少需要通讀一次，然後在實際開發中遇到相關問題時再來查詢。

• 3.針對概念和原理進行專題學習

  針對概念關鍵詞展開學習是我一貫的做法，在【一統江湖的大前端（7）React.js-從開發者到工程師】中就有提及。“學習一個框架，做一個TodoList，然後就沒有然後了”，這是很多人對於新技術的學習方式，你會發現它其實並沒有什麼卵用，因為過半個月，你就會不記得自己做過什麼了（別問我怎麼知道的）。如果有實戰項目，那是最好的，實戰中的學習是最快的；如果沒有實戰項目，那麼你應該關註它的核心概念和原理，響應式編程是什麼東西，新的Angular中的DI系統有什麼變化，修飾器是如何工作的等等，框架和實現細節或許會變化，但經典思想一般都是很穩定的，你只需要反覆研究去理解它就可以了。

• 4.分享以及撰寫技術博客

  寫博文並不是什麼高大上的事情，只是一種習慣，一種輔助自己思考和總結的習慣。最重要的是，它可以提高你打字的速度，如果你用80%的時間敲完別人100%時間才能敲完的代碼，那不就有20%的時間去學習新東西或者去寫博客了麽，我的時間基本就是這樣擠出來的。