在 Visual Studio 中设置 Angular 环境

在本教程中，我们将讨论 Visual Studio 中的 Angular 环境设置。市面上有许多用于创建 Angular 应用程序的编辑器。它们如下。但是，在本课程中，我们将使用 Visual Studio 作为我们的编辑器。

注意：您可以使用任何喜欢的编辑器来使用 TypeScript 构建 Angular 应用程序。

安装 Angular 的软件要求

要在您的计算机上安装 Angular 2 或任何更高版本，您需要以下各项：

• Nodejs
• Npm

Angular CLI

用于编写代码的 IDE（Visual Studio）

让我们来详细了解一下在 Visual Studio 2015 中配置 Angular 2 环境的详细过程。

步骤 1

安装 Node.js 和 nmp

在计算机上安装 Node.js 和 npm 是您应该做的第一个也是最关键的步骤。Angular 公司建议在您的计算机上安装 Node.Js 版本 4.6.X 或更高版本，并要求系统上安装的 npm 版本为 3.X.X 或更高版本。要查看可以安装在您设备上的 node 和 npm 的型号，请在命令提示符中键入 node -v 和 npm -v。

要执行此操作，请键入下图所示的命令，并在管理员模式下启动命令。我已经连接了 npm 和 node.Js，如您所见，因此最终结果如下。

如果您仍然需要在计算机上安装 Node.Js，请从以下网站下载最新版本。

步骤 2

安装 Visual Studio 2015 的更新 3

要查看 Visual Studio 版本，您必须单击“帮助”菜单选项，然后选择“关于 Microsoft Visual Studio”选项。这将打开以下弹出窗口。

根据您使用的 Visual Studio 版本，如果您仍需要安装更新 3，可以从以下链接下载。

步骤 3

此步骤涉及配置 Node 和 npm 的 Visual Studio 环境设置。要完成此操作，请通过单击“工具 - 选项”来打开 Visual Studio 中的“选项”窗口。

在此窗口中展开“项目和解决方案”选项卡，选择“外部 Web 工具”选项卡，并按下图所示的方式排列目录。

这是必需的，因为它指示 Visual Studio 首先在全局路径中搜索外部工具（如 npm），然后在内部路径中查找（仅当未在全局路径中找到时）。如果您单击“确定”按钮，“选项”窗口将关闭。您需要重新启动 Visual Studio 来实现此效果。

步骤 4

安装 TypeScript

此步骤涉及安装 TypeScript，即我们将使用的语言。在这种情况下，需要定义 TypeScript；其模型版本应大于或等于 2.2.Zero。如果您想确认您的笔记本电脑上安装了哪个 TypeScript 模型，当您单击 Visual Studio 中的“帮助”菜单并选择“关于 Microsoft Visual Studio”选项时，将出现以下屏幕。

步骤 5：使用 Visual Studio 创建一个空的 Web 应用程序

在此阶段，我们将使用 Visual Studio 开发一个空的 Web 应用程序。要完成此操作，请以管理员模式打开 Visual Studio。然后，从上下文菜单中选择“文件 - 新建项目”，以启动新的项目窗口。

在其中，在左窗格的“已安装”模板部分中选择“Visual C#”。在中间窗格中，选择“ASP.NET Web 应用程序”作为项目类型。为您的应用程序命名，例如“AngularDemo”，然后单击“确定”，如下图所示。

单击“确定”按钮后，“选择项目模板”窗口将打开。您必须从该窗口中选择“空”模板，因为我们将从头开始。然后，如下图所示，单击“确定”按钮。

步骤 6

下载 QuickStart 文件

为了启动 Angular 2 应用程序，您必须下载 Angular 的“Quick Start 文件”。

下载快速启动文件后，您必须解压其内容，因为这些文件是 ZIP 格式的。

步骤 7

在 Visual Studio 中使用 Quick Start 文件

在获取 Angular QuickStart 文件后，必须将必要的“QuickStart 文件”复制到您的 Angular 2 Web 应用程序项目中。需要注意的一点是，在这种情况下，并非所有快速启动文件都是必需的。目前我们将使用以下四个快速启动文件和文件夹。

• src 文件夹及其内容
• bs-config.json
• package.json
• tslint.json

您所要做的就是将上述四个快速启动文件/文件夹复制并粘贴到应用程序的根目录中。复制并粘贴上述快速启动文件和文件夹后，您必须从“解决方案资源管理器”中选择“显示所有文件”按钮，以查看所有文件。然后，您必须包含位于项目“src”文件夹内的所有复制的快速启动文件和文件夹。

如果您在使用快速启动文件时收到一个要求“搜索 TypeScript 类型定义”的提示，请单击“否”选项，如下图所示。

到目前为止，项目的结构应该类似于下图。

步骤8

恢复必需的包

要实现此目的，请右键单击“解决方案资源管理器”中的“package.json”文件，然后选择“还原包”。必须加载所有必要的模块和包才能执行 Angular 2 应用程序，这可能需要一些时间。包还原过程完成后，单击解决方案资源管理器中的显示所有文件图标，以查看已安装的所有节点模块的列表。重要的是要记住，您的应用程序不应包含 node_modules 子目录。

注意：如果您在右键单击 package.json 文件时找不到“还原包”选项，只需单击“运行 Web 代码分析”选项，您就会看到它。

还原包完成后，我们 AngularDemo 项目的文件夹和文件结构如下。

步骤 9

运行您的 Angular 2 应用程序

在此阶段，我们将从命令提示符启动 Angular 2 应用程序。在我们的下一篇文章中，我们将介绍如何从 Visual Studio 使用 F5 或 Ctrl F5 启动程序。

在使用命令提示符启动 Angular 2 应用程序之前，您需要先以管理员模式启动它。之后，您必须将目录更改为指向项目生成的位置。我生成的 Angular 应用程序位于“G: AngularDemoAngularDemo”目录中。

为了访问根文件夹，我在命令提示符中键入了 CD G:\AngularDemo\AngularDemo 并按 Enter。随后，输入“npm start”并按“Enter”键，如下图所示。

按下 Enter 键后，将执行以下操作。它将首先启动 TypeScript 编译器 (tsc)。TypeScript 编译器的任务是编译程序，然后监视更新。随后，将启动 lite 服务器，托管应用程序，直到最终启动浏览器。

你好 Angular

您现在可能会想。它从哪里获取网页，它从哪里获取值？你好，Angular。不用担心 - 我们将在接下来的文章中详细介绍所有内容。启动“应用程序”。在此期间，您可以从项目的“解决方案资源管理器”中查看“Element.Ts”报告。该报告包含在您的项目“src”文件夹中的“app”文件夹中。然后，如下图所示，将“name”区域的值更改为“Angular 2 Demo”。

在 Visual Studio 中配置 Angular 环境涉及多个步骤。此处提供了如何配置 Visual Studio 中 Angular 项目的概述。

• 安装 Angular CLI（命令行界面）

Angular CLI 是一个用于初始化、扩展、脚手架和维护 Angular 包的工具。

• 建立一个新的 Angular 项目

安装完成后，您可以使用 Angular CLI 启动一个新的 Angular 项目。转到您想开始业务的列表。

• 启动 Visual Studio 项目

要访问您 Angular 项目所在的目录，请打开 Visual Studio，选择“文件”>“打开”>“文件夹”，然后导航到 my-angular-project。选择文件夹后单击“打开”。

• 安装 Angular 语言服务（可选）

这为 Visual Studio 的 Angular 模板添加了功能，包括类型验证和 IntelliSense。

• 启动开发服务器

要启动开发服务器，请在 Visual Studio 中打开一个终端窗口或使用集成终端，转到项目目录，然后键入以下命令。

结论

总之，在 Visual Studio 中设置 Angular 环境涉及多个过程。这些过程包括安装 Angular CLI、Node.js 和 npm、建立新的 Angular 项目、根据需要安装 Angular 语言服务以及启动开发服务器。完成这些步骤后，您就可以使用 Visual Studio 开始构建您的 Angular 应用程序了。借助 Angular 框架，此配置为创建尖端在线应用程序提供了强大的开发环境。

最后，总而言之，在 Visual Studio 中创建 Angular 环境为程序员提供了方便的访问各种有效工具，以创建可靠的在线应用程序。通过利用 Visual Studio 的 IDE 功能和 Angular CLI 的脚手架能力，开发人员可以提高生产力，优化其开发工作流程，并提高其代码的质量。