瞭解了一些Angular的基本概念後，如果想進一步學習Angular，接下來讓我們來搭建本地開發環境，並從一個入門專案瞭解Angular的基本用法。
環境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: VSCode
1. 本地開發環境搭建
本地開發環境搭建只需要node.js, 和Angular CLI。
1.1. node.js
官網（https://nodejs.org/）下載最新的LTS（Long Time Support)版本的node.js，安裝。
說明：
- LTS（Long Time Support)版本, 官方會支援更長時間，比如打補丁，改bug等。相對更穩定、靠譜。
- node.js 安裝後，同時會安裝npm
檢查本地node.js, npm環境
# node.js 版本
node -v
# npm 版本
npm -v
1.2. Angular CLI
angular-cli又稱 Angular腳手架，是angular開發團隊自行維護的一個開發工具，用於快速生成專案或者元件的框架以提高效率。可以方便的生成angular app、component、service 等等， 並且可以通過引數，按照自己的需求去建立。可以說是angular開發必不可少的利器。(參考：https://cli.angular.io/)
npm安裝最新版本@angular/cli
npm install -g @angular/cli
檢查本地angular環境
ng v
說明：
- 該命令如果在非angular專案下執行，返回全域性的Angular CLI環境版本
- 在angular專案下執行, 返回當前angular專案使用的angular，angular CLI，以及核心angular元件的版本。
- 全域性Angular CLI版本有何能與專案的Angular CLI版本不一致，不衝突。專案中，使用專案制定的CLI版本。
2. 開發工具 - Visual Studio Code
推薦使用，Visual Studio Code （VSCode），微軟開發的，可以說是現今為止最好的免費的Angular開發工具。並且有很多非常好用的外掛。
推薦外掛：
- Angular Language Service： Angular語法自動提示, Angular開發必備。 This extension provides a rich editing experience for Angular templates, both inline and external templates.
This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates. - Prettier - 程式碼自動格式化外掛。VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
- Code Spell Checker - 語法檢查外掛. 註釋可以寫中文，變數名不行吧，如果拼寫不對不好看吧。所以推薦把這個語法檢查外掛裝上。
- GitLens - GIT 輔助外掛。If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
- Markdown All in One： 如果用Markdown寫東西，這個東西一定要有，增加了對MD檔案的很多支援，比如生成目錄(TOC)， 目錄編號等。
第一個Anuglar專案
建立第一個anuglar專案
使用Anuglar CLI可以很輕鬆的建立angular專案。使用的Angular版本與當前環境的Anuglar CLI一致。
# 建立angular專案，專案名 ·my-ngular-app·
ng new my-ngular-app
# 進入專案目錄
cd my-ngular-app
# 啟動angualar專案
ng serve
說明
ng是angular CLI的簡稱ng serve: 啟動angular專案。
Angular CLI常用命令
ng serve: 啟動angular專案。預設情況下，angular CLI檢測程式碼改動，如果檔案改動，自動編譯更改部分程式碼，然後重新載入（reload）頁面。ng build: 編譯程式碼，預設輸出到根目錄下的dist目錄。ng test： 執行單元測試（Unit Test）
線上實戰專案
Angular官方提供了2個新手入門專案，並且都是基於StackBlitz（針對 Web 開發者的線上 IDE），可以不使用本地環境，直接基於Web學習和練習Angular。