使用Visual Studio Code搭建一个Angular 5应用

在本文中，我们将使用Visual Studio Code设置一个Angular 5应用程序。我们将使用Angular CLI进行演示。

目录

1.安装Node.js

2.安装Angular CLI。

3.创建我们的第一个angular应用程序。

4.在浏览器中启动Angular App。

5.在网页上显示我们的自定义消息。

6.结尾。

安装Node.js

第一步是安装Node.js.从node官网打开Node.js下载页面。你会看到下面的显示：

根据机器的配置下载并安装最新的LTS版本。node的LTS的当前版本是8.9.3。安装Node.js也会在你的系统上安装npm（node包管理器）。

要检查机器上安装的node和npm的版本，请在命令提示符下运行以下命令。

node -v

npm -v

由于安装了node和npm，下一步就是安装Angular CLI。运行以下命令：

npm install -g @angular/cli

这将开始在您的电脑上安装Angular CLI。这将需要一些时间，所以坐下来，喝杯咖啡，放松一下。

创建你的第一个的应angular用程序

你的Angular CLI安装成功，打开VS Code并导航到 查看 >> 集成终端

这将打开终端窗口，如下图所示。

在终端窗口中键入以下命令序列。这些命令将创建一个名为“AngularDemo”的目录，然后在该目录内创建一个名称为“myFirstApp”的Angular应用程序

mkdir AngularDemo

cd AngularDemo

ng new myFirstApp

就是这样。我们使用VS Code和Angular CLI创建了我们的第一个Angular应用程序。

在浏览器中启动您的angular应用程序

我们的Angular应用程序的名称是位于AngularDemo目录内的myFirstApp。 所以，我们将首先使用下面的命令导航到我们的应用程序。

cd AngularDemo

cd myFirstApp

现在，我们使用以下命令行启动Web服务器。

ng serve

运行此命令后，您可以看到它要求您在浏览器中打开http：// localhost：4200。所以，打开你的电脑上的任何浏览器，并导航到这个URL。现在，你可以看到下面的页面。

当我们查看这个应用程序的代码时，我们将让Web服务器运行。导航到 文件 >> 新窗口 并打开另一个VS Code窗口，然后在终端中运行以下命令集。

cd AngularDemo

code .

这将在新的VS Code窗口中打开我们应用程序的代码文件。您可以在资源管理器中看到以下文件结构

在网页上显示我们的自定义消息

现在，我们需要将网页上的消息从“welcome to app”更改为以“欢迎来到Angular 5的世界！”

要实现这个，打开/src/app/app.component.ts文件。

将AppComponent类中title属性的值更改为“欢迎来到Angular 5的世界”。

只需保存文件并导航到http：// localhost：4200（请记住，Web服务器仍在运行）。您可以看到更新后的网页，如下所示。

如果Web服务器正在运行，并且您在Angular应用程序中进行了任何更改，也不需要刷新该Web页面。它将在保存应用程序代码文件时自动更新。

结尾

我们已经学会了如何使用VS Code和Angular CLI创建我们的第一个Angular 5应用程序。我们还通过更改类属性在网页上显示自定义消息。之后，我会带大家更深入地了解angular。