- 如何加载/启动角度(非AngularJs(应用程序？
- 如何将应用程序组件模板加载在index.html？ 中
如何启动角度应用程序文章解释了完整的流程和角度应用如何启动的步骤。
我们的浏览器显示了很多内容，并且在index.html中没有痕迹。这是怎么发生的？这个怪异的应用程序标签有什么？
根组件：App-root是CLI为我们创建的我们自己的组件之一。等等，什么？我知道我根本没有谈论组件，我将在下一篇文章中更深入地研究，但是在此之前，让我们尝试解决有关内容的谜团的谜团。让我们来谈谈Chotu为我们创建的根组件，即SRC/App文件夹中的应用程序组件。 app.component.ts在某种程度上解决了文本杂种。我们看到一个名为App-root的选择器标签，该标签与index.html中存在的文本相同。app.component.html保留我们在浏览器中看到的文本模板。
显然，index.html和应用程序组件之间似乎存在某种联系。
但是，应用程序组件模板如何以index.html加载？让我们找出答案。如果我们查看浏览器中的源代码，我们会看到很少有脚本文件自动注入底部(例如inline.bundle.js(，我们在raw Index.html文件中没有看到它们。
。当我们点击NG服务CLI命令并在index.html中自动添加时，这些文件将捆绑在一起。它们包含我们在应用程序文件夹中编写的所有代码。因此，在NG服务过程中执行的第一个文件来自文件名称。Angular的主要文件 - Main.tsmain.ts在顶部有很多导入，但我们必须专门查看该行，该行启动了我们的应用程序，我们将AppModule传递到App.module.ts的一部分的方法。Platform Browserdynamic((。bootstrapModule(AppModule(
仔细查看app.module.ts：app.module.ts文件具有一个bootstrap数组，该阵列容纳AppComponent，相同的根组件具有怪异的App-root标签。在这里，我们引用该appComponent，然后将其app.component.html文件渲染到index.html。
步骤1： main.ts文件被加载。它通过调用app.module.file。
引导应用程序(启动(应用程序步骤2： app.module.ts文件包含许多引导组件。在这里，我们找到了我们的根组件参考。
步骤3： root组件加载，并从app.component.html中加载模板文件成为index.html的一部分。
-
Angular应用在Bootstrap的帮助下加载。您可以在Main.TS中进行检查。借助System.js(Angular 2/4(和WebPack(Angular 5(，它被加载了。
-
如果您会检查AppModule。您可以在@ngmodule内部看到属性引导。它告诉第一个组件获得加载。在index.html中，您必须有一个在bootstrap中加载的组件的选择器。