好的，今天開始我們就要用牛刀來殺雞。首先第一件事當然就是先準備牛刀，不過這個牛刀整支都在 npm 上，所以拿牛刀之前我們還需要先裝 Node.js。請直接透過傳送門下載並安裝 Node.js，已經有 Node.js 的話只要是 12.14.x 或 14.15.x 或最新版本就好。

安裝 Angular CLI

裝完 Node.js 之後，我們就可以透過 npm 來裝 Angular CLI 了，直接輸入 npm 指令
npm install -g @angular/cli

第一次裝可能會久一點，裝完之後我們就可以使在命令提示字元（command line）使用 Angular 的命令，首先我們來來檢查一下版本
ng version

安裝 VS Code

裝完之後，我們要來裝寫 Angular 程式的 IDE，筆者選擇 VS Code，因為裝完一些擴充功能（Extension）之後，開發體驗極佳，而且不只能寫 Angular，任何主流語言只要下載對應的擴充套件，全都可以寫。請直接開傳送門下載安裝。

建立新的 Angular 專案

再來就把命令提示字元跳到一個順眼的資料夾，然後建立一個新的 Angular 專案
cd D:/ironman
ng new ironman-frontend

建立新專案的時候，Angular CLI 會問我們幾個問題：

1. Would you like to add Angular routing? 要不要加入 Angular 的路由功能
   Y
2. Which stylesheet format would you like to use? 要使用哪種樣式框架
   用鍵盤選 CSS

接著，就等 Angular 幫我們把必要的 npm 套件裝好，裝好之後，讓命令提示字元進入剛剛建立的專案資料夾，然後用 VSCode 把 Angular 專案打開。
cd ./ironman-frontend
code .

請注意 VS Code 的指令（code）後面有一個點（.）

接著，我們要讓 VS Code 飛起來。在左側的功能列點一下擴充功能的按鈕 ，然後蒐尋保哥的 Angular Extension Pack。保哥的擴充包整合了非常多好用的功能，是目前寫 Angular 最好用的擴充功能整合包，沒有之一！

第一個 Angular App

前置作業終於都告一段落了！現在，我們就直接來執行我們的 Angular App 吧！在命令提示字元輸入
ng serve -o
讓 Angular CLI 幫我們編譯並執行我們的 app， -o 參數可以自動打開瀏覽器並連到我們的 app。

VS Code 按 Ctrl + ` 也能叫出 power shell 或 git bash 命令列，也能在這邊操作 ng 指令，但是三不五時就會當掉，所以筆者還是建議另外開一個命令提示字元，專門跑 ng serve

Tada~~~~ 一個預設的 Angular 頁面就好了~~~

我們來簡單看一下左側檔案瀏覽器中的 Angular 的專案架構，不過由於 Angular 框架非常完整，本系列文沒有辦法完整的涵蓋所有東西，所以這邊只會挑本系列會用到的部分做說明，其他像是單元測試、相依套件（package.json）設定等等，請邦友另外再搜尋更專業的文章來學習。

1. ./node_modules – 我們這個專案所依賴的 npm 模組們
2. ./src/app – 自動產生的主頁模組，裡面包含這個模組必須的檔案，將來我們也會在這個資料夾裡面建立新的元件（component）
   • app.module.ts – 主頁模組的類別，管理模組的 import, export
   • app-routing.module.ts – app.module.ts 的路由模組，管理 app.module.ts 的路由
   • app.component.html – 主頁元件（component）的 HTML 骨架
   • app.component.ts – 主頁元件的邏輯處理
   • app. component.css – 主頁元件的 css
     （此時我們的模組只有一個 "app"元件（component），我們將在明天介紹 Angular 的元件）
3. ./src/index.html – Angular App 的「實體」檔案。Angular App 只會有一個簡單的 index.html 實體，之後全部用編譯好的 JavaScript 操作 DOM 物件來完成整個網頁的運作。
4. ./src/style.css 全域的 css 檔案

今天結束之前，筆者來分享幾個非常實用的 VS Code 快捷鍵（有些需要安裝保哥的 Extension Pack）

• Ctrl + P –搜尋專案內的檔案並開啟
• Ctrl + D - 以「目前所圈選的字串」在目前的檔案中搜尋並選取字串
• Ctrl + ` - 開啟 powersell 或其他命令列介面
• Ctrl + K （放開） + S - 儲存所有檔案
• Ctrl + / - 註解/解除註解
• Alt + 左/右箭頭 – 上一頁/下一頁```
• Alt + U - 跳到目前正在編輯的元件的 ts 檔
• Alt + I - 跳到目前正在編輯的元件的 css 檔
• Alt + O - 跳到目前正在編輯的元件的 html 檔
• Alt + P - 跳到目前正在編輯的元件的 spec.ts 檔（測試框架用的 ts）

明天，我們會繼續介紹 Angular 的 Module 與 Component