簡介
Angular 是 Google 開發出來一款開源 JavaScript 框架，用來開發單一頁面應用程式（single page application, SPA）。目前已經到 Angular 10 版本，預計今年 11 月還會有 11 的版本釋出 ，第一版正名為 AngularJS ，而第 2 版後稱為 Angular。兩者架構差異很大，簡單來說 AngularJS 本身有些缺點，後來受到 React 的刺激後，Angular 便被開發出來與之抗衡。
Angular 採用 MVC 模式，涵蓋了 M、V、C/VM 等層面，不需要組合、評估其它技術就能完成大部分前端開發任務。這是因為她已經將各種技術封裝在框架中，隔離了瀏覽器的細節，讓你不用關心它的實現細節。此外所有需要使用的套件、模組 Angular 都已經幫你打包好了，不像是 React 或 Vue 要自己去架構模組。
開發環境
- win10 64bit
- npm 6.12.1
- node.js v12.13.1
- Git 2.23.0.windows.1
- vscode 1.48.0 x64
安裝前準備
使用 Angular 開發會需要安裝以下軟體：
- Node.js
- Git
- Visual Studio Code
建立 Angular 專案
- 新增一個資料夾。
- 將路徑指向資料夾。
cd F:/angular - 透過 npm 安裝 Angular CLI，輸入：
1 | npm i -g @angular/cli |
MAC
OS 後來改版後，目前遇到的狀況是，第一次建立 CLI，新增一個資料夾，然後要將指令改成
1 | sudo npm i -g @angular/cli |
i 就是 install 的意思，-g 是全域 global 的意思。
安裝後會出現以下訊息，輸入 y，就可以完成安裝，目前安裝版本為 10.0.6。
確認是否安裝成功，輸入 ng -v 就會得到下方畫面，就代表安裝成功並告知我有什麼命令可以使用。
開發好用套件大補帖
可以在 VSCode 擴充套件工具欄位中搜尋 angular，並在前幾名可以看到 Will 保哥開發的好用 Angular Extension Pack 套件。
如果是全新手要找 Angular 的開發套件，推薦可以使用此大補帖，便可以安裝基本所需的套件喔!已經有 11 萬下載人次了呢!
建立專案骨架
在剛剛建立好的目錄資料夾中，輸入以下指令：
1 | ng new index |
index 為專案名稱，可自訂義。
輸入後會問兩個問題：
- 請問你想要新增 Angular Routor 嗎? Y
- 哪個 stylesheet 是你想要使用的？SCSS
CSS 我習慣用 SCSS 預處理器編譯。
這時候看到骨架已經完成，但程式還在安裝，原因是 npm 正在做 install 的動作，安裝之後要開發的元件。
在將資料夾放到 VScode 中，會看到專案已建立完成。
如何確認專案建置成功
因為剛剛我有新增專案名稱，所以要將路徑改成專案資料夾的名稱，
剛剛看起來都建置完成，但如果跑不起來也是白搭，所以透過以下指令測試：
1 | npm start |
輸入完後會自己跑 npm serve，這時候都不用做任何事情。
MAC
要先啟動 npm，所以要先跑 npm install
跑完後會出現這段問題，就輸入 y 即可，跑一下子會得到一個 localhost 的位置，已下圖為例是 localhost:4200，把這段複製到網頁上即可。
如果看到以下畫面，就代表建置成功了!!
