安裝Visual Studio Code

首先下載開發工具之一的Visual Studio Code【點我下載安裝VisualStudio Code】，安裝好之後打開Visual Studio Code，我們還可以透過延伸模組安裝中文界面，直接搜尋「Chinese（Traditional）Language Pack for Visual Studio Code」



開發Angular不外乎安裝關於Angular的延伸模組，這裡我推薦安裝「Will保哥」的延伸模組套件，好用👍



安裝Node.js

接下來安裝Node.js【點我下載】下載頁面有兩個版本可以選擇安裝，左邊的LTS為穩定版本，而右邊的Current則是最新版本，Current版本會有一些新的功能但是這些新的功能可能不會留下來因此建議還是直接裝LTS的版本即可


安裝完Node.js之後就有npm「Node Package Manager」功能，我們用Command測試看看

Node.js 版本檢查
node -v

npm 版本檢查
npm -v

npm 版本更新
npm install -g npm



安裝Angular CLI

接下來透過npm來安裝Angular CLI
npm install -g @angular/cli

安裝完成後可以使用指令檢查CLI的版本
ng version




建立Angular專案

我們直接用CLI指令建立一個空白的Angular專案
ng new <你的專案名稱>
建立專案時會詢問你細部的設定只需要依照專案的需求做設定即可
  • Would you like to add Angular routing？：是否要添加路由
  • Which stylesheet format would you like to use？：選擇CSS的方案




執行Angular專案

工具有了✅環境有了✅專案有了✅最後當然就是執行專案，我們可以直接使用Angular CLI的編譯和啟動一個本地服務，另外Angular CLI編譯時會把WebPack這段處理掉直接打包好讓我們不需要花額外的精力去學習WebPack工具XD
ng serve


我們也可以搭配VSCode的終端機執行這樣開發起來會更方便！


最後用瀏覽器打開「http://localhost:4200/」成功！