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进行启动。

这些脚本做了什么事情？

首先看main.ts中脚本的作用；主要是设置启动模块；看图中绿色线注释；



2.程序在加载了AppModule模块后，然后会寻找AppModule模块依赖哪些模块，然后会继续加载他们，然后系统会继续寻找，被AppModule加载的模块又会加载哪些模块，以此类推；



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



下面是app.component.html内容：



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

成果展示：

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



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