Angular 8 第一个应用

让我们看看如何创建一个 Angular 8 应用程序。

创建应用程序

语法

例如：在这里，我们将创建一个名为“angular8firstapp”的应用程序

您可以看到一个文件夹已创建。这是您创建的第一个 Angular 8 应用程序。

打开此文件夹，您将看到一些子文件夹。

在这里，src是您项目的主文件夹。打开 src 文件夹，您将看到其他一些子文件夹。

这个 app 文件夹是您的 Angular 8 应用程序的根目录。打开此文件夹，您将看到一些 .ts、html 和 css 文件。

Angular 7 App 文件夹中使用的文件

您的项目中主要使用的 Angular 7 App 文件如下所示

• src 文件夹： 这是包含与您的 angular 应用程序相关的主要代码文件的文件夹。
• app 文件夹： app 文件夹包含您为应用程序组件创建的文件。
• app.component.css： 此文件包含您的应用程序组件的层叠样式表代码。
• app.component.html： 此文件包含与应用程序组件相关的 html 文件。这是 angular 用于进行数据绑定的模板文件。
• app.component.spec.ts： 此文件是与应用程序组件相关的单元测试文件。此文件与其他单元测试一起使用。它通过命令 ng test 从 Angular CLI 运行。
• app.component.ts： 这是最重要的 typescript 文件，其中包含组件背后的视图逻辑。
• app.module.ts： 这也是一个 typescript 文件，其中包含网站的所有依赖项。此文件用于定义要导入的所需模块、要声明的组件以及要引导的主组件。

安装 Visual Studio Code IDE 或 JetBrains WebStorm

您必须有一个像 Visual Studio Code IDE 或 JetBrains WebStorm 这样的 IDE 才能运行您的 Angular 7 应用程序。

VS Code 轻巧易于设置，它具有广泛的内置代码编辑、格式化和重构功能。 它是免费使用的。 它还提供了大量扩展，这些扩展将显着提高您的工作效率。

您可以从此处下载 VS Code：https://vscode.js.cn

JetBrains WebStorm 也是开发 Angular 7 应用程序的绝佳 IDE。 它快速、有吸引力且非常易于使用的软件，但它不是免费使用的。 您必须稍后购买它，它只提供 30 天的免费试用期。

您可以从此处下载 Jetbrains Webstorm：https://www.jetbrains.com/webstorm/download/#section=windows

在这里，我们使用 VS Code IDE

您可以看到您的项目在 VS Code IDE 中打开。 您也可以更改 .ts 和 html 文件以相应地更改您的输出。

运行您的应用程序

打开您的 node.js 命令提示符，使用 cd 命令转到您的项目，然后运行 ng serve 命令来编译和运行您的应用程序。

打开您的浏览器并转到本地主机：https://:4200/

现在，您可以看到您的应用程序正在运行。