Angular启动应用过程

目录

结构：

　　上一篇博客中，已经搭建好了Angular环境，创建好了目录文件夹，具体每个文件夹的作用，有没有很好奇呢，现在就让小编带你们去了解一下吧；
　　

• e2e:端到端的测试；
• node_modules:第三方模块库；
• src:项目中所有文件存放在这个
  -app:组件以及app.modules.ts定义跟模块；
  -assets:静态资源
  -environments:包含为项目准备的环境文件；
  -index.html:主页面
  -main.ts:应用的主要入口；
  -polyfill.ts:填充库，将不同的点进行标准化；
  -styles.css:进行全局样式
  -test.ts:单元测试的入口点；
  -tsconfig.app.json:TypeScrip编辑器的配置文件；
  -tyconfig.spec.json:同上；
• anglar-cli.json:Angular CLI的配置文件；
• editorconfig:编辑器简单的配置文件；
• gitignore:Git的配置文件；
• karma.conf.js:Karma的单元测试配置；
• package.json:npm配置文件；里面包含很多命令；
• protractor.conf.js:给Protractor使用的端到端测试配置文件，当运行ng e2e的时候会用到；
• tsconfig.json:TypeScript编译器的配置；

过程

启动时加载哪个界面？哪个脚本？

　　（１）首先打开 anglar-cli.json这个文件，然后找到apps这个数组，然后会找到下面的属性：index和main属性；程序加载的时候，加载的页面是index.html;然后加载的脚本是main.ts；然后脚本负责引导Angular进行启动。

这些脚本做了什么事情？

1. 首先看main.ts中脚本的作用；主要是设置启动模块；看图中绿色线注释；
   
   2.程序在加载了AppModule模块后，然后会寻找AppModule模块依赖哪些模块，然后会继续加载他们，然后系统会继续寻找，被AppModule加载的模块又会加载哪些模块，以此类推；
   

3.将所有的依赖模块加载完成后，然后就会在index.html中寻找启动模块指定的主组件对应的CSS选择器；

下面是app.component.html内容：

（4.）页面改变之前，然后会加载app-root中的内容；

成果展示：

进行了艰难的过程，终于到了我们成果展示的时候咯！

以上就是我对Angular的自己的理解，欢迎大家交流！