使用Visual Studio Code搭建一个Angular 5应用(初级篇)

webstack前端栈

百家号17-12-2018:36

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

目录

安装Node.js安装Angular CLI。创建我们的第一个angular应用程序。在浏览器中启动Angular App。在网页上显示我们的自定义消息。结尾。

安装Node.js

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

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

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

node -vnpm -v

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

npm install -g @angular/cli

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

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

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

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

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

mkdir AngularDemocd AngularDemong new myFirstApp

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

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

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

cd AngularDemocd myFirstApp

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

ng serve

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

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

cd AngularDemocode .

这将在新的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。

本文由百家号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。未经作者许可,不得转载。

返回顶部