Angular启动应用过程
2018-03-11 00:01
309 查看
目录
结构:
上一篇博客中,已经搭建好了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编译器的配置;
过程
启动时加载哪个界面?哪个脚本?
(1)首先打开 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的自己的理解,欢迎大家交流!
相关文章推荐
- Angular4-在线竞拍应用-项目启动过程
- 2-4 启动Angular应用的过程
- 2-4 启动Angular应用的过程
- angular应用的启动过程
- Angular 2 应用启动过程简单分析
- Angular 2 应用启动过程简单分析
- ios应用启动过程及生命周期分析
- 按下电源键到启动Home应用过程详解(三)
- SpringBoot应用启动过程分析
- Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程
- Symbian 的一个应用的启动过程
- Android应用启动过程浅析
- VirtualApp原理解析(4)--双开应用启动过程
- 按下电源键到启动Home应用过程详解(二)
- 【Angular】启动过程
- 项目清单文件分析与第一个ANDROID应用的启动过程
- IOS应用启动过程
- Android APP启动过程中应用代码的加载
- 在Angular应用启动前获取数据并注入到应用中
- Android应用启动过程浅析