让我们开发一个 Angular 应用程序 – 项目介绍和初始项目的创建

作者 : 慕源网 本文共1460个字,预计阅读时间需要4分钟 发布时间: 2022-01-8 共185人阅读

在本文中,我们将了解如何使用 Angular 创建基本的 Web 应用程序。

这是作为我的“让我们开发一个 Angular 应用程序”系列文章的一部分发布的第 3 篇文章。

要阅读我之前的文章,请单击此处 >>  #2 – Angular Bootstrapping Process

本文包含初学者级别的内容,这对任何有兴趣从头开始学习 Angular 的人都有帮助。

我们将通过在我们的应用程序中使用它们来讨论不同的 Angular 特性和属性。

在这个项目中,我们将看到使用 Bootstrap 类来改进我们的 UI。

该项目将从头开始,逐步实现不同的功能。

由于我们已经有很多 Angular 文章可用,所以我不会添加 Angular 基础知识。

您可以参考以下链接来了解 Angular 应用程序的一些基本结构和功能。

让我解释一下这个项目。

我们的项目名称是“Ride Your Bike”。该项目可用作自行车租赁门户。(只是为了学习。)

我们的第一阶段要求是创建一个如下截图所示的页面。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

在此屏幕中,我们将所有可供出租的自行车列表显示为一个图块/框。

单击每个图块时,右侧将显示详细视图。

通过完成此要求/活动,我们将熟悉以下部分,

  • 定期项目创建
  • 创建组件(使用命令和手册)
  • 组件之间的交叉通信
  • 不同类型的绑定——字符串插值、属性绑定、事件绑定
  • 引导基础

请注意,我们将通过一系列文章来解释这个应用程序的开发。

我们将创建一个新的 Angular 项目并创建 3 个新组件。

我们的应用程序将具有以下屏幕截图的结构:

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

让我们创建我们的 Angular 应用程序。

打开命令提示符并将目录更改为要保留项目文件的位置。

执行命令 ng new your-project-name

创建项目可能需要几分钟时间。

成功创建项目后,我们可以在任何编辑器中打开它以进行其余工作。

我正在使用 Visual Studio 代码。

我们的项目文件夹结构如下图所示。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

让我们使用下面的命令 ng generate component 创建 2 个组件作为 ‘bike-list-box’ 和 ‘bike-details’

使用 Terminal->New Terminal 菜单或按 Ctrl + ` 打开终端

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

组件创建需要几秒钟才能完成。创建后,我们将在终端中收到消息,如下面的屏幕截图所示。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

然后创建第二个组件“bike-details”。

在这里,我使用简短的语法来创建组件“ng g c”,如下面的屏幕截图所示。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

如果我们展开 app 文件夹,我们可以看到新创建的组件文件夹和文件。

请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

打开bike-details.component.ts 文件。我们可以在@Component 装饰器中看到属性 selector 

选择器属性的值用于访问组件。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

然后,让我们清除 app.component.html 的默认内容并添加我们的新组件。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

在这里,我们在组件的 @Component 装饰器中使用 selector 属性的值。

保存所有修改过的文件,让我们运行我们的应用程序来检查它是否正常工作。

运行命令 ng serve –open 在浏览器中打开我们的应用程序。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

如果一切正确,我们将在浏览器中看到以下屏幕。

让我们开发一个 Angular 应用程序 - 项目介绍和初始项目的创建

结论

在本文中,我简要介绍了我们的 Angular 应用程序并创建了一个 Angular 项目。

然后创建了 2 个组件 – 一个用于列出所有自行车详细信息,第二个用于显示所选自行车的详细信息。

在下一篇文章中,我们将创建一个简单的模型类来存储我们的自行车详细信息,并了解如何在 Angular UI 中访问自行车列表。

要阅读本系列的下一篇文章,请单击 >>  #4 – 创建模型类并访问数组元素


慕源网 » 让我们开发一个 Angular 应用程序 – 项目介绍和初始项目的创建

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录