終於完成 Angular 專案開發指南 系列文章的撰寫，本以為可以輕鬆完成，卻剛好碰上許多事情同時發生，幸好平時就有寫一些研究成果來作為對內分享的文件，幫助我在時間緊張時取得一些靈感，總之最後還是有驚無險完成挑戰。
最近剛好職業生涯也發生轉變，因緣際會成為 React 開發團隊的 Team Leader，有鑑於微前端的概念逐漸普及，自己也不想被同一個框架侷限，因此選擇接受挑戰，每天提早2小時起床，除了要準備文章內容，同時也要盡快追上目前的專案進度，壓力比以往大許多，幸好最終堅持完成了鐵人賽(實際參賽後發現每個能完賽的參加者都不容易呀...)，感謝大家的關注希望來年有機會可以跟大家分享 React 或 微前端 的技術。
本系列教學著重專案實作，目的是希望透過動手實現簡單功能來幫大家找到開發 Angular 的興趣，介紹到的項目都是實際開發專案的過程中會遇到的基本問題或需求。
文中透過實現一些需求範例，我們完成了 my-app 專案中的一些基本開發需求，最終的範例成果可在 範例練習 Github 中找到，也可以到 範例練習 Stackblitz 實際演練。
接下來我會將本系列文章做一個簡單的分類，方便查閱，也會列出 Angular 還有哪些知識與技術點有待發掘。
Day-1 Angular 專案從零開始
Day-2 Angular 框架的特性
Day-4 Angular 基本概念
Day-16 Angular 元件的生命週期
Day-18 Angular 組件間資料的傳遞方式
Day-24 探討路由模組載入策略
Day-30 Angular 還有什麼有趣的東西
Day-3 Angular 檔案結構介紹
Day-6 隨時隨地格式化 - Prettier
Day-7 程式碼檢查(1) - ESLint
Day-8 程式碼檢查(2) - Stylelint
Day-9 程式碼註解工具 - Compodoc
Day-11 讓前後端獨立開發的假資料系統 - Json-Server
Day-5 快速建立範例專案
Day-10 挑個美美的UI框架 - Nebular
Day-12 Angular Http 通訊模組
Day-13 實作租戶管理頁面(1)
Day-14 實作租戶管理頁面(2)
Day-15 Angular 表單驗證
Day-17 Angular 專業圖表套件 - Ngx-Echarts
Day-19 製作共用指令與管道
Day-20 i18n 多國語系 - Ngx-Translate
Day-21 共用元件的動態載入(1)
Day-22 共用元件的動態載入(2)
Day-23 Angular 路由模組
Day-25 路由守衛與登入模組實作
Day-26 Angular 自動測試 - Karma
Day-27 E2E 自動測試 - Cypress
Day-28 Gitlab 工作流程介紹
Day-29 Gitlab 自動化部署 - Pipeline
Angular 詞彙表
Angular CLI 手冊
Angular 概念簡介
ViewContainerRef 操作 DOM
透過 ViewContainerRef 了解 Angular DOM 修改機制
報錯參考手冊
速查表
風格指南
網路上經常出現關於 Angular 包含了很多 不必要的功能 導致 學習曲線較高 或 檔案較大 等評論，甚至有說到因為內建搭配 Typescript 所以要多學一個程式語言的問題，相信看完本系列教學之後會覺得 Angular 是一套平易近人的框架，因為不需要的功能先放著就好不用特別去學習。例如上述 Angular 其他有趣的功能，只要知道有就好，專案需要用到再調研即可。
新手建議練習一輪官方的 英雄之旅，差不多就可以投入一般的功能開發了，最終佈署到正式環境的產品包因為有 Webpack Tree Shaking 的幫助，相較其他框架的產品包相信也不會大太多，至於 Typescript 則是個好東西，其他框架也該內建使用，畢竟它跟 Javascript 撰寫邏輯並不衝突，只是幫前端代碼做型別檢查，讓編輯器支援靜態檢查功能，改善 所謂的 弱型別難以除錯問題 (我想除非是內建搭配 coffeescript 才會有增加學習難度的討論)。
總之框架沒有好壞之別，端看你的專案適合哪種工具，依照專案類型開發團隊文化挑選合適的就好不需太過糾結，只要能幫助專案順利進行的就是一個好工具。
iThome鐵人賽
看影片追技術