在 Visual Studio Code 中使用 Angular

Angular 是一個由 Google 開發和維護的流行 Web 開發平臺。Angular 使用 TypeScript 作為其主要程式語言。Visual Studio Code 編輯器開箱即用地支援 TypeScript 的智慧感知和程式碼導航，因此你無需安裝任何其他擴充套件即可進行 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 來啟動 Web 伺服器並在瀏覽器中開啟應用程式

cd my-app
ng serve

你應該會在瀏覽器的 https://:4200 地址看到 "Welcome to app!!"。在我們用 VS Code 檢視應用程式時，將保持 Web 伺服器執行。

要在 VS Code 中開啟你的 Angular 應用程式，請開啟另一個終端（或命令提示符），導航到 my-app 資料夾並輸入 code .

cd my-app
code .

語法高亮和括號匹配

現在展開 src\app 資料夾並選擇 app.component.ts 檔案。你會注意到 VS Code 對各種原始碼元素都有語法高亮，並且如果將游標放在括號上，匹配的括號也會被選中。

IntelliSense

當你的滑鼠懸停在檔案中的文字上時，你會看到 VS Code 為你提供有關原始碼中關鍵項的資訊。諸如變數、類和 Angular 裝飾器等項就是一些會為你提供此類資訊的例子。

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

你可以單擊資訊按鈕 (i) 來檢視一個包含更多文件的彈出視窗。

VS Code 使用 TypeScript 語言服務來實現程式碼智慧（IntelliSense），並且它有一個名為自動型別獲取 (ATA) 的功能。ATA 會為 package.json 中引用的 npm 模組拉取 npm 型別宣告檔案 (*.d.ts)。

轉到定義，速覽定義

透過 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 支援自動儲存，預設情況下它會在延遲後儲存你的檔案。在檔案選單中勾選自動儲存選項以開啟該功能，或者直接配置 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 配置檔案模板

配置檔案讓你能夠根據當前專案或任務快速切換你的擴充套件、設定和 UI 佈局。為了幫助你開始 Angular 開發，你可以使用 Angular 配置檔案模板，這是一個包含有用擴充套件和設定的精選配置檔案。你可以直接使用該配置檔案模板，也可以將其作為起點，為自己的工作流程進行進一步的定製。

您透過“**配置檔案**”>“**建立配置檔案...**”下拉選單選擇一個配置檔案模板

一旦你選擇了一個配置檔案模板，你可以審查其設定和擴充套件，並且如果你不想將某些項包含在新配置檔案中，可以單獨移除它們。基於模板建立新配置檔案後，對設定、擴充套件或 UI 所做的更改將持久化在你的配置檔案中。

流行的入門套件

在本教程中，我們使用 Angular CLI 建立了一個簡單的 Angular 應用程式。有許多優秀的示例和入門套件可以幫助你構建你的第一個 Angular 應用程式。

秘方

VS Code 團隊為更復雜的除錯場景建立了秘方。在那裡，你會找到使用 Angular CLI 除錯的秘方，它同樣使用 Angular CLI，並詳細介紹瞭如何除錯生成的專案的單元測試。

MEAN 入門套件

如果你想看一個完整的 MEAN (MongoDB、Express、Angular、Node.js) 技術棧示例，可以看看 MEAN.JS。他們為示例 MEAN 專案提供了文件和一個應用程式生成器。你需要安裝並啟動 MongoDB，但你很快就能讓一個 MEAN 應用程式執行起來。VS Code 透過 Azure Databases 擴充套件也提供了強大的 MongoDB 支援。

React

React 是一個用於構建使用者介面的庫，它比 Angular 更為精簡。如果你想看一個在 VS Code 中使用 React 的示例，請檢視在 VS Code 中使用 React 的教程。它將引導你建立一個 React 應用程式併為 JavaScript 偵錯程式配置 launch.json 檔案。

Angular 擴充套件

除了 VS Code 開箱即用提供的功能外，你還可以安裝 VS Code 擴充套件以獲得更強大的功能。

點選上面的任一擴充套件磁貼，可在市場中閱讀其描述和評論。

要查詢其他 Angular 擴充套件，請開啟擴充套件檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 並輸入“angular”來檢視篩選後的 Angular 擴充套件列表。

社群還建立了“擴充套件包”，它將有用的擴充套件（例如，linter、偵錯程式和程式碼片段）打包在一起，只需一次下載即可。要檢視可用的 Angular 擴充套件包，請將“extension packs”類別新增到你的篩選器中（angular @category:"extension packs"）。