angular4应用的详细启动过程

1. 首先找到项目中的angular.json文件，里面有如下代码：

"index": "src/index.html",
"main": "src/main.ts",

index指定显示的启动时显示的页面。

main指定启动时需要加载得脚本,即main.ts。

 

2. main.js

打开main.ts文件，发现有很多引入的类，引入用的是import关键字。主要看这句代码：

platformBrowserDynamic().bootstrapModule(AppModule)

这里指定了应用启动的主模块为AppModule，即app.module.ts文件

 

3. AppModule

打开app.module.ts文件，会发现如下代码：

bootstrap: [AppComponent]// 某个模块中的主组件

bootstrap为该模块中的主组件，那么来到app.component.ts

文件中，这里就是关于主组件的一些设置。

4. AppComponent

即app.component.ts文件，该文件中，有如下代码：

@Component({
  selector: 'app-root', // index中刚开始加载时展示的页面
  templateUrl: './app.component.html',  // index中最终要展示的页面，即替换app-root展示的页面
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'auction';
}

@Component是组件修饰器，作用是指定主组件APPComponent加载时的页面（selector）与加载完成后的页面（templateUrl），以及页面对应的样式（styleUrls）。

代码中的title=‘auction’为app.component.html中要显示的动态绑定的值{{title}}

5. index.html

应用启动后加载过程中展示的页面就是index.html，显示的值为app-root标签中的值，加载完成后就会用app.component.html来替换app-root中的内容。app.component.html中的代码实现了最终要展示的界面。

 

其实简单来说就是：index→main→模块→组件→index，

最终展示的还是index页面，转了一圈是为了加载页面需要的依赖，相关模块。