在 Visual Studio Code 中使用 Angular

Angular 是一个由 Google 开发和维护的流行 Web 开发平台。 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 应用程序并安装其依赖项。

让我们通过导航到新文件夹并输入 ng serve 来启动 Web 服务器并在浏览器中打开应用程序，从而快速运行我们的 Angular 应用程序

cd my-app
ng serve

您应该在浏览器中的 https://127.0.0.1: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 应用 (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://127.0.0.1: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 更简洁。如果您想查看 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 扩展列表。

社区还创建了“扩展包”，将有用的扩展（例如，linter、调试器和代码片段）捆绑到一个下载中。要查看可用的 Angular 扩展包，请将“扩展包”类别添加到您的过滤器（angular @category:"extension packs"）。