angular - Angular 应用程序如何加载/启动？如何在 index.html 中加载应用组件模板？

Question

1. 如何加载/启动 angular(不是 angularjs)应用程序？
2. 如何在 index.html 中加载应用组件模板？

Answer 1

How Angular Application Gets Initiated文章解释了如何启动 Angular 应用程序的完整流程和步骤。

我们的浏览器显示了很多内容，在 index.html 中没有任何痕迹。这是怎么回事？这个奇怪的 app-root 标签也是怎么回事？

根组件:app-root 是 CLI 为我们创建的我们自己的组件之一。等等，什么？我知道我根本没有谈论过组件，我将在下一篇文章中深入探讨，但在此之前，让我们尝试解决这个内容加载位置的谜团。让我们谈谈Chotu为我们创建的根组件，位于 src/app 文件夹中的应用程序组件。 app.component.ts 在某种程度上解决了文本之谜。我们看到一个名为 app-root 的选择器标签，与 index.html 中的文本相同。app.component.html 包含我们在浏览器中看到的文本模板。

显然，index.html 和应用组件之间似乎存在某种联系。

但是，如何在 index.html 中加载应用组件模板？让我们来了解一下。如果我们在浏览器中查看源代码，我们会看到底部自动注入(inject)的脚本文件很少(如 inline.bundle.js)，而我们在原始 index.html 文件中没有看到这些文件。

当我们点击 ng serve CLI 命令时，这些文件被捆绑并自动添加到 index.html 中。它们包含我们在 app 文件夹中编写的所有代码。因此，在 ng serve 期间执行的第一个文件来自文件名 main.ts。Angular 的主文件 - main.tsMain.ts 在顶部有一堆导入，但我们必须特别查看启动应用程序的那一行，我们将 AppModule 传递给 app.module.ts 的一部分的方法platformBrowserDynamic().bootstrapModule(AppModule)

仔细看看 App.module.ts :app.module.ts 文件有一个引导数组，其中包含 AppComponent，同样的根组件具有那个奇怪的 app-root 标签。在这里，我们引用了 AppComponent，然后将其 app.component.html 文件呈现为 index.html。

第 1 步: 加载 main.ts 文件。它通过调用 App.module.file 来引导(启动)应用程序。

第 2 步: app.module.ts 文件包含一系列引导组件。在这里，我们找到了根组件引用。

第 3 步: 根组件被加载，app.component.html 中的模板文件成为 index.html 的一部分。