在 Visual Studio Code 中使用 Angular

Angular 是一個由 Google 開發並維護的熱門網頁開發平台。Angular 使用 TypeScript 作為其主要程式語言。Visual Studio Code 編輯器開箱即支援 TypeScript IntelliSense 和程式碼導航，因此您無需安裝任何其他擴充功能即可進行 Angular 開發。

注意：為了協助您快速上手 Angular 開發，您可以使用 Angular 設定檔範本，其中包含了實用的擴充功能、設定和程式碼片段。

歡迎使用 Angular

在本教學課程中，我們將使用 Angular CLI。若要安裝並使用命令列介面以及執行 Angular 應用程式伺服器，您需要安裝 Node.js JavaScript 執行環境和 npm (Node.js 套件管理員)。npm 已隨附於 Node.js 中，您可以從 Node.js 下載頁面進行安裝。

提示：若要測試您的電腦是否已正確安裝 Node.js 和 npm，您可以輸入 node --version 和 npm --version。

若要安裝 Angular CLI，請在終端機或命令提示字元中輸入

npm install -g @angular/cli

安裝可能需要幾分鐘的時間。現在，您可以透過輸入以下指令來建立新的 Angular 應用程式

ng new my-app

my-app 是您應用程式的資料夾名稱。ng new 命令會提示您選擇應用程式的產生選項。按下 Enter 鍵接受預設值即可。在 TypeScript 中建立 Angular 應用程式並安裝其相依項目可能需要幾分鐘的時間。

讓我們快速執行 Angular 應用程式，切換到新資料夾並輸入 ng serve 來啟動網頁伺服器，並在瀏覽器中開啟應用程式

cd my-app
ng serve

您應該會在瀏覽器的 https://:4200 看到 "Welcome to app!!"。我們將保持網頁伺服器執行，同時在 VS Code 中查看該應用程式。

若要在 VS Code 中開啟您的 Angular 應用程式，請開啟另一個終端機（或命令提示字元），切換到 my-app 資料夾並輸入 code .

cd my-app
code .

語法高亮與括號配對

現在展開 src\app 資料夾並選擇 app.component.ts 檔案。您會注意到 VS Code 針對各種原始程式碼元素提供了語法醒目提示；若您將游標置於括號上，對應的括號也會被選取。

IntelliSense

當您將滑鼠懸停在檔案中的文字上時，VS Code 會顯示關於原始程式碼中關鍵項目的資訊。變數、類別和 Angular 裝飾器 (decorators) 僅是會顯示此類資訊的幾個範例。

當您開始在 app.component.ts 中輸入時，您會看到智慧建議和程式碼片段。

您可以按一下資訊按鈕 (i) 來開啟包含更多文件說明的浮動視窗。

VS Code 使用 TypeScript 語言服務來提供程式碼智慧功能 (IntelliSense)，並具有一項稱為自動類型取得 (ATA) 的功能。ATA 會針對 package.json 中參照的 npm 模組，下載其 npm 類型宣告檔案 (*.d.ts)。

前往定義 (Go to Definition)、預覽定義 (Peek definition)

透過 TypeScript 語言服務，VS Code 還可以在編輯器中提供類型定義資訊，方式是使用移至定義 (F12) 或預覽定義 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))。開啟 app.module.ts 檔案，將游標置於 bootstrap 屬性宣告中的 AppComponent 上，按一下滑鼠右鍵並選擇預覽定義。一個預覽視窗將會開啟，顯示來自 app.component.ts 的 AppComponent 定義。

按下 Escape 以關閉預覽視窗。

Hello World

讓我們將範例應用程式更新為 "Hello World"。回到 app.component.ts 檔案，並將 AppComponent 中的 title 字串變更為 "Hello World"。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

儲存 app.component.ts 檔案後，執行中的伺服器執行個體會更新網頁，您將會看到 "Welcome to Hello World!!"。

提示：VS Code 支援自動儲存 (Auto Save)，預設會在延遲一段時間後自動儲存檔案。勾選檔案選單中的自動儲存選項即可開啟此功能，或者直接設定 files.autoSave 使用者設定。

偵錯 Angular

若要對用戶端 Angular 程式碼進行偵錯，我們將使用內建的 JavaScript 偵錯工具。

注意：本教學假設您已安裝 Edge 瀏覽器。若您想要使用 Chrome 進行偵錯，請將啟動設定中的 type 取代為 chrome。此外也有適用於 Firefox 瀏覽器的偵錯工具。

設定中斷點

若要在 app.component.ts 中設定中斷點，請按一下行號左側的裝訂邊。這會設定一個中斷點，並以紅色圓圈顯示。

設定偵錯工具

我們需要先設定偵錯工具。請前往執行與偵錯檢視 (⇧⌘D (Windows, Linux Ctrl+Shift+D))，並選擇建立 launch.json 檔案連結以建立 launch.json 偵錯設定檔。從選擇偵錯工具下拉式清單中選擇 Web App (Edge)。這會在您專案的新 .vscode 資料夾中建立一個 launch.json 檔案，其中包含啟動網站的設定。

針對我們的範例，我們需要做一項變更：將 url 的連接埠從 8080 變更為 4200。您的 launch.json 應該如下所示

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "https://:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

按下 F5 或綠色箭頭以啟動偵錯工具並開啟新的瀏覽器執行個體。由於設定中斷點的原始程式碼在偵錯工具連結前就已執行，因此我們需要重新整理網頁才能觸發中斷點。重新整理頁面後，您應該就會觸及中斷點。

您可以逐步執行您的原始程式碼 (F10)、檢查諸如 AppComponent 之類的變數，並查看用戶端 Angular 應用程式的呼叫堆疊。

如需關於偵錯工具及其可用選項的詳細資訊，請參閱我們的瀏覽器偵錯文件。

Angular 設定檔範本

設定檔 (Profiles) 讓您能根據目前的專案或任務，快速切換擴充功能、設定和 UI 版面配置。為了協助您快速上手 Angular 開發，您可以使用 Angular 設定檔範本，這是一個精選的設定檔，包含了實用的擴充功能和設定。您可以直接使用該範本，或將其作為自訂個人化工作流程的起點。

您可以透過「設定檔」(Profiles) > 「建立設定檔...」(Create Profile...) 下拉式選單來選擇設定檔範本

選擇設定檔範本後，您可以審閱相關的設定和擴充功能，並移除您不想包含在新的設定檔中的項目。在根據範本建立新設定檔後，您對設定、擴充功能或 UI 所做的任何變更，都會儲存在您的設定檔中。

熱門入門套件

在本教學中，我們使用 Angular CLI 建立了一個簡單的 Angular 應用程式。還有許多很棒的範例和入門套件可用來協助您建立第一個 Angular 應用程式。

教學食譜 (Recipes)

VS Code 團隊為更複雜的偵錯情境建立了食譜 (recipes)。您可以在其中找到 Angular CLI 偵錯食譜，該食譜同樣使用 Angular CLI，並詳細介紹了如何對產生的專案進行單元測試偵錯。

MEAN Starter

如果您想查看完整的 MEAN (MongoDB, Express, Angular, Node.js) 堆疊範例，請參考 MEAN.JS。他們提供了文件以及適用於 MEAN 專案範例的應用程式產生器。您需要安裝並啟動 MongoDB，即可快速執行 MEAN 應用程式。VS Code 也透過 Azure Databases 擴充功能，提供了強大的 MongoDB 支援。

React

React 是一個用於建置使用者介面的程式庫，比 Angular 更簡潔。如果您想查看 React 在 VS Code 中運作的範例，請參考 在 VS Code 中使用 React 教學。它將引導您完成建立 React 應用程式以及為 JavaScript 偵錯工具設定 launch.json 檔案的步驟。

Angular 擴充功能

除了 VS Code 內建的功能外，您還可以安裝 VS Code 擴充功能以獲得更強大的功能。

點擊上方的擴充功能圖塊，即可在 Marketplace 上閱讀說明和評論。

若要尋找其他 Angular 擴充功能，請開啟 [擴充功能] 檢視 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 並輸入 'angular'，即可查看 Angular 擴充功能的篩選清單。

社群也建立了「擴充功能套件」(Extension Packs)，將實用的擴充功能 (例如 linter、偵錯工具和程式碼片段) 捆綁在一起，供您一次下載。若要查看可用的 Angular 擴充功能套件，請將「extension packs」類別新增至您的篩選器中 (angular @category:"extension packs")。