Angular 學習思路

近些年前端框架很是多，主流的有 Vue、React、Angular 等。我參與的項目中使用較多的是 Vue。由於 Vue 學習難度不大，上手很快，代碼簡潔，並且使用 Vue 全家桶（Vue + Vue-Router + Axios + Vuex + Vue-Bus等）、再配合 Element UI 等第三方UI組件庫進行開發也是不錯的選擇。Vue 的做者是華人，故文檔等各方面資料也很是齊全。 但我的體會：若是前端項目龐大，在工程化方面，Angular 是最佳選擇，最貼近 Java 後端開發的思想。無論怎麼說，幾你們族各有利弊，任何爭辯都毫無心義，根據項目和喜愛愛用啥就用啥。

Angular 學習思路

在 Angular 的學習過程當中充滿興奮刺激與痛苦，在幾個項目中也逐漸對 Angular 的學習有一些體會。個人學習過程大概是這樣的：

1. 瞭解 Angular 基本概念，配置開發環境；
2. 學習官網教程，按照教程編寫第一個應用；
3. 系統全面掌握 TypeScript 語法；
4. 系統掌握 Angular 的體系結構，學習官網每一個知識點；
5. 掌握 RxJS 以及如何在 Angular 中使用 RxJS；
6. 學習 NGRX；
7. 在項目中使用上面提到的技術。

瞭解Angular裏面的基本概念

• 瀏覽官網文檔，上網搜索入門教程，對 Angular 有一個模糊的認識；
• 以官網的Getting Start 爲主，一步一步安裝配置開發環境（NodeJS、Angular Cli等）；
• 建立第一個工程 Hello World，並運行，確保環境配置成功；
• 經過  Hello World 瞭解angular工程的目錄結構及文件；
• 繼續上網查資料，對組件、模塊、指令等概念有個大概的印象（注意：只是大概的印象，並非理解或掌握），知道組件是個什麼玩意，模塊又是怎樣表示。

參考網站 Angular 官網： https://angular.io/guide/quickstart

動手編寫第一個應用 Tour of Heroes

對 Angular 的基本概念有個大體的印象後，接下來按照官網的 Toutorial 教程（開發 Tour of Heroes 應用），一邊閱讀教程，一邊跟着開發。該教程首先介紹了整個應用的功能和效果，接着從命令行建立工程開始，一步步實現並完善工程。整個教程涉及了 Angular 的不少知識，如組件的封裝、依賴注入、路由、服務、HTTP 網絡請求等；遇到不會的、不理解的，先忽略，照着把代碼先敲下來，再回頭去理解消化；跟着寫完後，會對 Angular 的開發有必定的感受。

參考網站 Angular 官網： https://angular.io/tutorial

學習TypeScript語法

Angular 支持 TS 和 ES6，官方推薦使用微軟的 TypeScript 語言。 經過 Tour of Heroes 應用編寫的學習，會接觸到一些 TS 的語法。此時能夠回過頭去系統掌握 TS。主要內容包括：數據類型、模塊、函數、泛型、面向對象（類、對象、構造函數、繼承）等。

參考網站 TypeScript 中文網： https://www.tslang.cn/docs/home.html

學習Angular的架構及概念

閱讀 Angular 官網的語法 Fundamentals 部分，系統學習 Angular 的內容。主要包括：

• 架構（全局性的介紹）：站在高處縱覽 Angular 的組成。Angular 的總體架構、Angular 的啓動過程和執行流程、 認識 Angular 模塊和組件、認識服務和依賴注入；
• 組件和模板：組件是Angular 應用的最基礎的單元。 數據綁定、輸入輸出屬性、組件樣式、組件生命週期、組件間通訊、指令、管道；
• 表單：表單應用場景普遍，主要學習模板驅動表單、響應式表單、表單校驗、如何本身封裝表單控件；
• 模塊： 如何建立一個 Angular 模塊，模塊的懶加載， 共享模塊等；
• 依賴注入： 深刻學習 Angular 對依賴注入的實現， 如何定義 Service；
• 路由： 單頁應用中多個界面之間如何跳轉，如何嵌套路由，路由如何傳遞參數；
• 網絡請求： 與後臺交互是永恆的主題，如何發送 HTTP 請求，獲取返回數據。

參考網站 Angular 官網： https://angular.io/guide/architecture

學習RxJS

RxJS 是 Angular 的重心，我的以爲 若是在 Angular 項目開發過程當中不使用 RxJS，則失去 Angular 很大一部分優點。 RxJS 加入了在時間線方面的思考，能夠使不少複雜的問題簡單化，強烈建議深刻學習。

首先學習 RxJS 的幾個核心對象 Observable、Observer、 Subjects、 Subscription，而後瞭解 RxJS 中常見的操做符， 最後練習 RxJS 在 Angular 中的使用。

參考網站

RxJS 文檔： https://rxjs-dev.firebaseapp.com/guide/observable Angular 官網： https://angular.io/guide/observables

學習NGRX

NGRX 是基於 Redux 開發的一套適合 Angular 的狀態管理技術。 應用中全部的數據、UI 均可以看作"狀態"。 當應用龐大時，若是數據須要在多個組件間複用，此時狀態管理就能夠發揮做用了。 NGRX 主要包含 Actions、 Reducers、 Effects 三個主要模塊，此外還有 Entity, Router-Store等， 按照官網很容易上手。

參考網站

NGRX 官網： https://ngrx.io/guide/store

項目實戰

有了上面的基礎後，就能夠在項目裏面大膽使用 Angular 了。如後臺管理系統、App 開發、 前臺應用等。 在項目實戰中又會接觸到其餘一些技術。

• PC 端中臺系統的 UI 框架： Angular Material、 ZORRO、 PrimeNG 等；
• 移動端 UI 框架： Ionic Framework、 NG-ZORRO-ANTD-Mobile 等；
• 第三方簡化開發的庫： lodash、 date-fns、 iconfont 等；
• Angular 動畫；
• Angular 項目打包、優化、測試等。

本文僅談了我在 Angular 的學習過程當中的思路，以及我對 Angular 技術組成的理解，後續打算挑一些 主題 或 項目實戰 寫一些詳細的理解和體會。

 

有興趣的夥伴歡迎關注微信公衆號