在 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"）。