让我们开发一个 Angular 应用程序 – 项目介绍和初始项目的创建
在本文中，我们将了解如何使用 Angular 创建基本的 Web 应用程序。
这是作为我的“让我们开发一个 Angular 应用程序”系列文章的一部分发布的第 3 篇文章。
要阅读我之前的文章，请单击此处 >> #2 – Angular Bootstrapping Process
本文包含初学者级别的内容，这对任何有兴趣从头开始学习 Angular 的人都有帮助。
我们将通过在我们的应用程序中使用它们来讨论不同的 Angular 特性和属性。
在这个项目中，我们将看到使用 Bootstrap 类来改进我们的 UI。
该项目将从头开始，逐步实现不同的功能。
由于我们已经有很多 Angular 文章可用，所以我不会添加 Angular 基础知识。
您可以参考以下链接来了解 Angular 应用程序的一些基本结构和功能。
让我解释一下这个项目。
我们的项目名称是“Ride Your Bike”。该项目可用作自行车租赁门户。（只是为了学习。）
我们的第一阶段要求是创建一个如下截图所示的页面。
在此屏幕中，我们将所有可供出租的自行车列表显示为一个图块/框。
单击每个图块时，右侧将显示详细视图。
通过完成此要求/活动，我们将熟悉以下部分，
- 定期项目创建
- 创建组件（使用命令和手册）
- 组件之间的交叉通信
- 不同类型的绑定——字符串插值、属性绑定、事件绑定
- 引导基础
请注意，我们将通过一系列文章来解释这个应用程序的开发。
我们将创建一个新的 Angular 项目并创建 3 个新组件。
我们的应用程序将具有以下屏幕截图的结构：
让我们创建我们的 Angular 应用程序。
打开命令提示符并将目录更改为要保留项目文件的位置。
执行命令 ng new your-project-name
创建项目可能需要几分钟时间。
成功创建项目后，我们可以在任何编辑器中打开它以进行其余工作。
我正在使用 Visual Studio 代码。
我们的项目文件夹结构如下图所示。
让我们使用下面的命令 ng generate component 创建 2 个组件作为 ‘bike-list-box’ 和 ‘bike-details’
使用 Terminal->New Terminal 菜单或按 Ctrl + ` 打开终端
组件创建需要几秒钟才能完成。创建后，我们将在终端中收到消息，如下面的屏幕截图所示。
然后创建第二个组件“bike-details”。
在这里，我使用简短的语法来创建组件“ng g c”，如下面的屏幕截图所示。
如果我们展开 app 文件夹，我们可以看到新创建的组件文件夹和文件。
请参阅下面的屏幕截图。
打开bike-details.component.ts 文件。我们可以在@Component 装饰器中看到属性‘ selector ‘。
选择器属性的值用于访问组件。
然后，让我们清除 app.component.html 的默认内容并添加我们的新组件。
在这里，我们在组件的 @Component 装饰器中使用 selector 属性的值。
保存所有修改过的文件，让我们运行我们的应用程序来检查它是否正常工作。
运行命令 ng serve –open 在浏览器中打开我们的应用程序。
如果一切正确，我们将在浏览器中看到以下屏幕。
结论
在本文中，我简要介绍了我们的 Angular 应用程序并创建了一个 Angular 项目。
然后创建了 2 个组件 – 一个用于列出所有自行车详细信息，第二个用于显示所选自行车的详细信息。
在下一篇文章中，我们将创建一个简单的模型类来存储我们的自行车详细信息，并了解如何在 Angular UI 中访问自行车列表。
要阅读本系列的下一篇文章，请单击 >> #4 – 创建模型类并访问数组元素
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
