在Visual Studio Code中使用Angular

Angular 是由谷歌开发和维护的一款受欢迎的网页开发平台。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，你可以输入节点 --版本以及NPM——版本.

要安装 Angular CLI，需在终端或命令提示符类型中：

npm install -g @angular/cli

安装可能需要几分钟。你现在可以通过输入以下方式创建新的 Angular 应用程序：

ng new my-app

我的应用是你申请文件夹的名称。该ng new命令提示词会提示生成的应用程序选项。按下回车键接受默认值。在TypeScript中创建Angular应用程序并安装其依赖可能需要几分钟时间。

让我们快速运行Angular应用，导航到新文件夹并输入NG 发球启动网页服务器并在浏览器中打开应用：

cd my-app
ng serve

你应该会在浏览器里看到“欢迎使用应用！！”http://localhost:4200。我们会让网页服务器运行，同时用 VS Code 查看应用。

要在VS Code中打开你的Angular应用，打开另一个终端（或命令提示符），并导航到以下内容。我的应用文件夹和类型代码。:

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 会拉取 npm 类型声明文件（*.d.ts对于package.json.

前往定义，查看定义

通过 TypeScript 语言服务，VS Code 还可以通过 Go to Definition（F12）或窥视定义（⌥F12，Windows Alt+F12，Linux Ctrl+Shift+F10））在编辑器中提供类型定义信息。打开app.module.ts归档并将光标移到AppComponent在自力带属性声明，右键点击并选择“窥视定义”。一个窥视窗口将打开，显示AppComponent定义来源app.component.ts.

角度窥视定义

按Esc键关闭“窥视窗口”。

你好，世界

让我们把示例应用更新为“Hello World”。回到app.component.ts文件并更改标题字符串AppComponent到《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.tsfile，服务器的运行实例会更新网页，你会看到“欢迎来到Hello World！！”。

提示：VS Code 支持自动保存，默认情况下会在延迟后保存文件。在文件菜单中查看自动保存选项，开启自动保存，或者直接配置files.autoSave用户设置。

你好，世界

调试 Angular

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

注意：本教程假设你安装了Edge浏览器。如果你想用Chrome调试，可以替换启动类型其中镀铬.Firefox浏览器还有调试器。

设定一个断点

在 中设置断点app.component.ts点击行号左侧的排水沟。这会设置一个断点，断点会以红色圆圈的形式可见。

设定断点

配置调试器

我们需要先配置调试器。作方法是进入运行和调试视图（⇧⌘D（Windows，Linux Ctrl+Shift+D）），选择创建launch.json文件链接以创建launch.json调试器配置文件。从“选择调试器”下拉菜单中选择“Web 应用（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），检查诸如AppComponent，并查看客户端Angular应用的调用栈。

调试变量

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

角度剖面模板

配置文件可以让你根据当前项目或任务快速切换扩展、设置和界面布局。为了帮助你开始Angular开发，你可以使用Angular配置文件模板，这是一个经过精心策划的配置文件，带有有用的扩展和设置。你可以直接使用配置文件模板，也可以作为起点，进一步定制自己的工作流程。

你可以通过个人资料>创建个人资料......下拉菜单选择模板：

使用个人资料模板创建个人资料下拉菜单

一旦你选择了个人资料模板，可以查看设置和扩展，如果你不想把单个项目包含在新资料中，可以移除它们。根据模板创建新配置文件后，设置、扩展或界面的更改会保留在你的配置文件中。

热门入门套装

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

食谱

VS Code 团队为更复杂的调试场景设计了配方。在那里你会找到“用 Angular CLI 调试”的配方，它也使用 Angular CLI，详细介绍了如何调试生成项目的单元测试。

凶猛的起始

如果你想看完整的MEAN（MongoDB、Express、Angular、Node.js）栈示例，可以看看MEAN.JS。他们有文档和一个示例MEAN项目的申请生成器。你需要安装并启动 MongoDB，但你很快就能运行一个 MEAN 应用。VS Code通过Azure数据库扩展对MongoDB的支持也很棒。

反应

React 是一个用于构建用户界面的库，比 Angular 更为简约。如果你想看React与VS Code合作的示例，可以看看《在VS Code中使用React》教程。它会带你创建React应用并配置launch.jsonJavaScript调试器的文件。

角扩张

除了 VS Code 开箱即用的功能外，你还可以安装 VS Code 扩展以增强功能。

点击上方的扩展图块，阅读市场上的描述和评价。

要查找其他 Angular 扩展，打开扩展视图（⇧⌘X（Windows，Linux Ctrl+Shift+X）），输入“angular”，即可查看筛选后的 Angular 扩展列表。

角延展

社区还创建了“扩展包”，将有用的扩展（例如linter、调试器和摘要）捆绑成一个下载包。要查看可用的 Angular 扩展包，可以在你的过滤器中添加“扩展包”类别（Angular @category：“扩展包”）。