###### tags: `Angular`

# 每日小知識 #附錄 1 - Windows 環境安裝

- Angular 的開發環境其實相對單純，各位就一步步跟著走吧
- 首先要安裝的是 Chocolatey，可以參考此[連結](https://hackmd.io/@QCZ_Kvv1ScixyAPzRYDKWQ/r1oso68iD)
- Chocolatey 是一個套件管理工具，有點像 yum/apt 或是 MacOS 裝的 Homebrew
- 個人覺得有了它之後，裝東西方便多了，不用再四處找載點
- 承上，很多髒東西(e.g. .NET Framework) 如果舊版不用的時候，手動透過 Windows 的機制要一個個點，很耗時間
- 接著要裝 **VSCode** ，拿來開發前端的**文字編輯器**
- 它的特色是很**輕量**，用 Electron 開發的，所以跨平台，而且有很多 Plugin 可以用，不會像 Visual Studio 又肥又慢
- 記得左邊的 Tab 要切到 **chocolatey**
- 在搜尋的欄位輸入 VSCode
- 安裝完的畫面如下:
- 再來要裝 **NodeJS**，算是 Angular 背後的靠山
- 它可以當作以 javascript 撰寫的後端 server
- 也搭配套件管理工具 **npm**，讓前端的程式也可以像 maven 專案一樣透過 pom.xml 管理相依套件
- 安裝完的畫面如下:
- 這個時候還要看一下 NodeJS 的版本，指令如下:

            npm --version

- 這邊 CLI 告訴我的版本舊了，所以順便更新一下好了
- 更新的指令如下:

            npm install -g npm@7.11.1

- 就讓它跑吧，跑完就更新完了，也可以再用 **npm --version** 確認一次
- 接著要裝 **Angular CLI**，Angular 的超強工具

        npm install -g @angular/cli

- 這邊我們不指定版本，所以直接是裝最新版的
- **-g** 就是指 global
- 安裝完自然要檢查版本 **ng --version**
- 再來要裝 Git，因為 Angular CLI 建出的專案會自動加上版控
- 透過 Chocolatey 裝步驟都差不多，就是搜尋出來點兩下就好
- 安裝完的畫面如下:
- 接著我們用 CLI 建一個基本的專案
- 首先選一個你喜歡的目錄，並輸入以下指令:

            ng new test-app

- 這個語法大概只有一開始建專案的人會用到而已
- 中間會有三次需要你輸入 **yes** 或選擇的部份，依下圖的操作做就好了
- 這個時候會開始安裝一整山的東西，請耐心等候
- 建立完新專案之後，先 CD 進去，介紹一個小技巧
- 當在剛建立的專案目錄(**test-app**)底下時，輸入以下指令:

            code .

- 這個時候會自動開啟 VSCode，並以剛建的專案目錄為預設的 workspace
- 這時候最左邊會看到一排圖示，選最下面的像俄羅斯方塊的，extensions，主要是要安裝 **Angular Essentials**，裡面有很多很方便的東西
- 一切都裝備好了，這時候把右半邊所有的視窗都關了
- 按下 ctrl + **\`** 那個符號叫 **backtick**，在鍵邊左上方
- 此時可以看到 console terminal 被打開了
- 輸入 **ng serve**
- 再來打開瀏覽器導頁到 **localhost:4200**
- 到這邊就安裝完成了
- 可以接著繼續做的事，畫面上都有指示了
- 建立 component
- 建立 service
- 看各種官方文件…等等