在Visual Studio Code中使用Angular

Angular 是由 Google 开发和维护的流行 web 开发平台。Angular 使用 TypeScript 作为其主要编程语言。Visual Studio Code 编辑器原生支持 TypeScript 智能感知和代码导航，因此您可以在不安装任何其他扩展的情况下进行 Angular 开发。

注意：为了帮助您开始Angular开发，您可以使用Angular配置文件模板，该模板包含有用的扩展、设置和代码片段。

欢迎来到Angular

我们将在这个教程中使用Angular CLI。要安装命令行界面并运行Angular应用服务器，你需要安装Node.jsJavaScript运行时和npm（Node.js的包管理器）。npm包含在Node.js中，你可以从Node.js下载进行安装。

提示：要测试你是否在机器上正确安装了Node.js和npm，可以输入节点 --版本和npm --版本输入：.

要安装Angular CLI，请在终端或命令提示符中输入：

npm install -g @angular/cli

这可能需要几分钟来安装。现在，你可以通过输入以下命令来创建一个新的Angular应用程序：

ng 新 我的应用

我的应用是你的应用程序文件夹的名称。ng new 命令提示您为生成的应用程序选择选项。按 Enter 键接受默认值。这可能需要几分钟时间来在 TypeScript 中创建Angular应用程序并安装其依赖项。

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

cd my-app
ng 服务

你应该在http://localhost:4200上看到“欢迎使用应用！！”在你的浏览器中。在我们用 VS Code 查看应用程序时，我们会让网络服务器继续运行。

要打开你的Angular应用程序，请打开另一个终端（或命令提示符），然后导航到我的应用文件夹 并 输入代码输入：

cd my-app
代码 .

语法高亮和括号匹配

现在扩展源\应用文件夹并选择app.component.ts文件。你会注意到 VS Code 对各种源代码元素进行了语法高亮，并且如果你将光标放在括号上，匹配的括号也会被选中。

智能感知

当您将鼠标悬停在文件中的文本上时，您会看到 VS Code 会向您提供有关源代码中关键项目的的信息。变量、类和Angular装饰器等项目是您将看到此信息的一些示例。

当你开始输入app.component.ts你将会看到智能建议和代码片段。

您可以点击信息按钮 (我) 查看带有更多文档的下拉菜单。

VS Code 使用 TypeScript 语言服务来提供代码智能 (IntelliSense)，它有一个名为 自动类型获取 (ATA) 的功能。ATA 拉取 npm 类型声明文件 (*.d.ts) 用于在npm模块中引用的package.json输入：.

转到定义，查看定义

通过 TypeScript 语言服务，VS Code 也可以通过 转到定义 (F12) 或 预览定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) 在编辑器中提供类型定义信息。打开 app.module.ts文件并移动光标应用组件在引导 属性声明，右键单击并选择 Peek Definition。一个 Peek Windows 将打开，显示 应用组件定义来自app.component.ts输入：.

按Escape键以关闭PeekWindows。

Hello World

让我们将示例应用程序更新为“Hello World”。返回到app.component.ts文件并更改标题输入： string in应用组件到 "Hello World"。

导入 { 组件 } 从 '@angular/core';

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

一旦你保存app.component.ts文件，服务器的运行实例将更新网页，您将看到“欢迎来到Hello World!!”。

提示：VS Code 支持自动保存，这默认会在延迟后保存您的文件。请检查自动保存选项在文件菜单中以启用自动保存或直接配置文件.自动保存 用户 设置.

调试Angular

要调试客户端的Angular代码，我们将使用内置的JavaScript调试器。

注意：本教程假定你已经安装了Edge浏览器。如果你想要使用Chrome进行调试，请替换启动类型与谷歌浏览器此外，还有针对Firefox浏览器的调试器。

设置断点

在...设置断点app.component.ts点击行号左侧的空白处。这将设置一个断点，显示为一个红色圆圈。

配置调试器

我们需要首先配置调试器。为此，请转到运行和调试视图（⇧⌘D（Windows, Linux Ctrl+Shift+D）），然后选择创建 launch.json 文件链接以创建一个launch.json 调试器配置文件。选择 Web App (Edge) 从 选择调试器 下拉列表中。这将创建一个 launch.json在新文件中.vscode在你的项目中有一个文件夹，其中包括启动网站的配置。

我们需要对我们的示例进行一个更改：更改端口对不起，我无法处理这个请求。从8080至4200. 你的launch.json应该看起来像这样：

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

按 F5 或绿色箭头启动调试器并打开一个新的浏览器实例。设置断点的源代码在附加调试器之前会在启动时运行，因此我们在刷新网页之前不会遇到断点。刷新页面后，你应该会遇到断点。

您可以逐步执行您的源代码 (F10)，检查变量例如 应用组件，并查看客户端Angular应用程序的调用堆栈。

有关调试器及其可用选项的更多信息，请查看我们关于浏览器调试的文档。

角形轮廓模板

配置文件 让你根据当前的项目或任务快速切换你的扩展、设置和用户界面布局。为了帮助你开始Angular开发，你可以使用 Angular配置文件模板，这是一个包含有用扩展和设置的精选配置文件。你可以直接使用配置文件模板，或者将其作为起点进一步自定义以适应你的工作流程。

您通过 配置文件 > 创建配置文件... 下拉菜单选择一个配置文件模板：

一旦你选择了一个配置文件模板，你就可以查看设置和扩展，如果你不希望将某些项目包含在新的配置文件中，可以移除它们。在基于模板创建新的配置文件后，对设置、扩展或用户界面所做的更改将持久化到你的配置文件中。

热门入门套件

在这个教程中，我们使用Angular CLI创建了一个简单的Angular应用程序。有很多优秀的示例和入门工具可以帮助你构建第一个Angular应用程序。

指南列表

VS Code 团队已经创建了复杂调试场景的指南列表。 在那里你可以找到使用Angular CLI进行调试的指南列表，该指南列表还使用了Angular CLI，并详细介绍了对生成项目单元测试的调试。

MEAN 起步

如果你希望看到一个完整的MEAN（MongoDB, Express, Angular, Node.js）堆栈示例，请查看 MEAN.JS。他们有文档和一个应用生成器来创建一个MEAN项目。你需要安装并启动 MongoDB，但你很快就会有一个MEAN应用运行。VS Code也通过 MongoDB支持 的 Azure Databases 扩展提供了出色的支持。

反应

React 是一个用于构建用户界面的库，比 angular 更加简洁。如果你想看到 React 与 VS Code 一起工作的示例，请查看 在 VS Code 中使用 React 教程。它将引导你创建一个 React 应用程序并配置 launch.json用于JavaScript调试器的文件。

Angular 扩展

除了 VS Code 提供的内置功能外，您还可以安装 VS Code 扩展以获得更多的功能。

点击上方的扩展瓷砖，以阅读 市场上的描述和评论。

要查找其他Angular扩展，请打开扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 并输入“angular”以查看过滤后的Angular扩展列表。

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