學習目標：了解 Angular 的特性、優缺點及專案使用情境
因為工作需要開始學習 Angular ，這對我來說是一個蠻大的挑戰，之前只有跟著 Huli 開的程式導師實驗計畫 React 學了一半(殘念)
加上 Angular 會需要使用到 TypeScript 及 RxJS ，以及 JavaScript ES6 class 及 modules 的觀念，從五月開始摸索，直到現在才慢慢清楚 Angular 輪廓。
有關前端三大框架的比較，網路上有蠻多相關的文章，以下是近期的文章，有興趣可參考：
- Angular vs React vs Vue: Which Framework to Choose in 2021
- React, Angular or Vue: Choosing the Right Framework for Your Project
因此，此系列為自己使用 Angular 後的心得筆記，一定不全面，可能還有一些觀念不太正確，文中若有任何錯誤的地方歡迎指正。
保哥的 slideshare 裡有很多觀念介紹及教學，這篇筆記的大部分也都取自於此。
什麼是 Angular？
- 2010 年 Google 推出一款用來協助 SPA 應用程式運行的 JS 函式庫稱作「AngularJS」
- 2016 年推出了全新的版本，但這個版本不再被視為一個函式庫，而是一個 Web 應用框架「Angular」
- 由 Google 內 Angular 團隊主導開發生態系並與社群共同維護，一直持續至今。
- Angular 版本穩定迭代，每半年會更新一次主版本，但基本上都是更新工具支援與核心程式微調整，若是新建專案通常都會使用最新版本來做開發。
▎內建標準的網站模組化架構
▸ 從 Node.js 看模組化 ：[第三週] Node.js 基礎 — module.exports 和 require
▸ 為什麼要模組化
其實在後端語言中模組化的概念其實已存在一陣子，但以前的網站在前端處理方面較為單純，通常會在一進入網站時載入需要的資源（page load），少數動態的資料可以透過 XHR 的方式載入。
不過近年網頁在前端 JavaScript 的處理越來越複雜，因此就提出 Module 的概念，將 JavaScript 拆分成可以按照需求導入（import）的單獨模塊機制，將程式之間的關聯性、依賴性、複雜度降低。
▸ 模組化的好處
- 假設一個 Module 出了問題，其他的 Module 還是可以順利執行。
- 根據需求載入相對應的 Module。
由於模組化的概念在前端還算興新，對於 Module 載入的方式沒有個統一標準，因為 Angular 就提供了標準的網站模組化架構給開發者作為開發準則。
▎落實 MVC 設計模式中「關注點分離」的特性
▸ 什麼是 MVC？：跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
當我們使用 Angular CLI 新建一個 Component 時，會建立 CSS（SCSS）、View 及 Controller 的檔案，目的就是希望落實 MVC 設計模式。此外 Angular會利用裝飾器（Decorators）自動將三者進行連結。
至於 Model 的部分，則需要另外建立 .ts 檔案處理撈取跟管理資料的邏輯 (資料通常是呼叫 RESTful Service)，這種把視覺呈現、控制、商業邏輯獨立放置的原則，就是希望開發者可以一次關注一種技術。
在 Google 內部有 1500 個 web 應用程式使用 Angular 所建構。在使用量如此大的情況下，為使程式碼能「易重構」、「易相互嵌套」，Angular 有非常完善的開發準則（產生、建置、測試、部署）及固定的程式碼架構與風格（coding style guide），因此也加速的工程師協作的效率。
以 HTML 和 TypeScript 來建立一個高效、複雜的單頁面應用程式（SPA）
在 View 方面與其他框架不同的點是以 HTML 檔作為樣板，透過 Data Binding 與元件屬性、方法、事件進行綁定。
Angular 是以 TypeScript 作為主語言，在變數或資料定義時必須指定使用哪一種資料型態，解決 JavaScript 是動態型別加弱型別的缺點，在「編譯」時期就能協助開發者察覺出型態上的問題，更有效率地開發及維護大型專案。
[補充說明] 動態資料類型語言的缺點：這類語言在執行時，容忍隱性的型別轉換，因此有時候會造成不可預期的結果你不可不知的 JavaScript 二三事#Day3：資料型態的夢魘 — — 動態型別加弱型別(2)
以 RxJS 處理非同步行為
有關於 Rx JS 的部分可參考：打通 RxJS 任督二脈
Angular 特點
- 內建程式碼產生器（Angular CLI）改善開發流程
Angular 有標準的程式架構，如果今天要新增一個專案或功能模組，手動建立就會需要花上不少的時間，透過 Angular CLI 就可以透過指令來產生相關檔案；此外也有引入套件、部署等功能。 - 靜態程式碼分析工具（codelyzer）搭配 TSLint 快速修復
- 具規範的 coding style guide
- 技術論壇活躍，中文開發文件完整
Angular 缺點
- 學習曲線高，需學習 TypeScript 及 RxJS
- 具高完整性的框架，因此通常專案都很大
Angular 之專案應用
依應用面向
- 網頁
- 桌面應用程式（Electron）
- 跨平台原生應用程式 App（Ionic Native、Native Script）
依專案需求
- 較適合中大型、具規模、需求複雜的專案
