Angular基础入门3启动过程

最新推荐文章于 2020-08-05 10:46:20 发布

_Tassdar

最新推荐文章于 2020-08-05 10:46:20 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/CuiLanren/article/details/80202372

版权

Angular的启动过程

要解释Angular的启动过程，需要先回答三个问题：

1. 启动时加载了哪个页面？

2. 启动时加载了哪些脚本？

3. 这些脚本到底做了什么事？

OK，让我们来打开.Angular-cli.json，

然后看一下前两个问题的答案，在这个文件中有一个叫apps的数组，数组中的对象有一个index属性，和一个main属性，默认情况下，index属性指向src（root属性）目录中的index.html，他是angular应用启动时加载的页面，main属性指向了src下面的main.ts，他是angular应用启动时加载的脚本，main.ts负责引导angular应用启动，我们来看一下main.ts，这里是一个angular应用的起点。

Ø import { enableProdMode } from '@angular/core'; 导入angular核心模块提供的enableProdMode方法，这个方法用来关闭angular应用的开发者模式。

Ø import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 从浏览器模块中导入一个platformBrowserDynamic方法，这个方法会告诉angular使用哪个模块来启动应用。

Ø AppModule，也就是命令行工具生成的那个整个应用的主模块。

Ø environment：环境配置，angular对多环境的一个支持。

Ø if (environment.production) {
enableProdMode();
} 如果当前是生产环境，就调用enableProdMode方法关闭开发者模式。

Ø platformBrowserDynamic().bootstrapModule(AppModule); 最后我们会调用bootstrapModule()这个方法，传入AppModule作为启动模块来启动应用，这块是整个angular应用的起点，程序是通过这里来开始运行的，angular在知道我要用AppModule作为主模块以后，他会加载AppModule模块，然后angular会分析AppModule模块需要依赖哪些模块，并加载哪些模块，在app.module.ts文件中我们会看中，AppModule模块会依赖BrowserModule、FormsModule和HttpModule模块，加载这些模块之后，会再分析这些模块需要依赖哪些模块，然后再去加载哪些模块，以此类推，直到加载完所有所需的模块，当加载完以后，angular会在index.html文件中寻找启动模块指定的主组件对应的css选择器，也就是说启动后angular会在index.html文件中找<app-root>，会用主组件也就是AppComponent中指定的模板内容（app.component.html），用这里面的内容替换到<app-root>这个标签，在这个整个过程完成之前，页面将会展示<app-root>这个标签中的内容，也即时loading…这样的一个字符串。