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

Question

1. 角（而不是angularjs）应用程序如何加载/启动？
2. 如何在index.html中加载应用程序组件模板？

Answer 1

Angular应用程序如何启动的 文章介绍了如何启动Angular应用程序的完整流程和步骤。

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

根组件： app-root是CLI为我们创建的我们自己的组件之一。等一下 我知道我完全没有谈论Component，我将在下一篇文章中更深入地探讨，但是在此之前，让我们尝试解决有关内容加载位置的神秘问题。我们来讨论一下Chotu为我们创建的根组件，它位于src / app文件夹中。app.component.ts在某种程度上解决了文本之谜。我们看到一个名为app-root的选择器标记，与index.html中存在的文本相同。app.component.html包含我们在浏览器中看到的文本模板。

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

但是，如何在index.html中加载应用程序组件模板？让我们找出答案。如果在浏览器中查看源代码，则会看到在底部自动注入了少量脚本文件（例如inline.bundle.js），而在原始index.html文件中却没有看到。

这些文件在我们单击ng CLI命令时捆绑在一起，并自动添加到index.html中。它们包含我们在app文件夹中编写的所有代码。因此，在ng服务期间执行的第一个文件来自文件名main.ts。Angular的主文件– main.ts Main.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的一部分。