让我们开发一个 Angular 应用程序 – Angular 启动过程
介绍
在我之前的文章中，我已经解释了 Angular 架构和安装的基础知识。在本文中，我们将看到 Angular 如何启动应用程序并加载其组件。这个过程称为引导。
要阅读我之前的文章，请单击 >> #1- Angular 基础架构
Angular 是一个允许我们创建单页应用程序 (SPA) 的框架。
让我们在任何编辑器中打开该项目。我正在使用 Visual Studio 代码。
很少有其他编辑器可供使用。例如：Webstorm、Atom、Eclipse 等
在 Visual Studio 中打开项目后，我们将看到项目目录和文件，如下面的屏幕截图所示：
在本文中，我们将讨论引导过程中涉及的 4 个文件。他们是：
- Main.ts·
- App.module.ts
- App.component.ts
- Index.html
这些是用于加载第一个组件的主要文件。
Main.ts
当加载开始（ng serve 命令）时，将执行 main.ts 文件的内容。
该文件包含以下语句：
请参考以下截图：
该语句告诉 Angular 使用 AppModule 作为根模块。
正如我们所见，“AppModule”（类名）作为参数传递给“bootStrapModule()”方法。
App.module.ts
该文件包含在 main.ts 文件中指定的类“AppModule”。
@NgModule() 装饰器是一个将元数据添加到类“AppModule”以使其成为 Angular 模块的函数。
在@NgModule() 装饰器中，我们提供了一些数组参数。他们是：
- Declarations [] – 与此模块关联的所有组件
- Imports[] – 注册其他需要的模块
- Providers[] – 注册所需的服务 – 从 Angular 6 开始不推荐使用此方法
- Bootstrap []
Bootstrap array
该数组包含 Angular 在分析 Index.html 文件时应该知道的所有组件的列表。
在我们的例子中，它是“AppComponent”。
请参考以下截图：
App.component.ts
这是默认组件“app”的类文件。
App 组件是我们应用程序的起点。在这个组件内部，我们可以看到@Component() 装饰器。
@Component() 装饰器告诉 angular 类“AppComponent”是一个组件。
app-root 是选择器，它可以用作访问组件的指令。
我们可以在 Index.html 中看到这一点
Index.html
众所周知，Angular 是一个允许我们创建单页应用程序 (SPA) 的框架。
Index.html 是服务器提供的单个文件。
该文件包含一些带有 <app-root> 标签的基本 html 语句。
请参考下面的截图。
由于 angular（App 组件的选择器）已经知道 app-root，它将加载 App 组件的模板。
请参考下图以更好地了解angular bootstrapping process。
结论
在本文中，我解释 angular bootstrapping 过程。
我希望这篇文章对其他人了解 angular 基础知识有用。
在我的下一篇文章中，我将创建一个名为“RideYourBike”的 Angular 项目——这是一个自行车租赁应用程序。
我们将从非常基础的项目开始，并逐步实现各种Angular 特性。
要阅读我的下一篇文章，请单击 >> #3- Ride Your Bike – Project creation
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
