Angular的启动过程
来源:互联网 发布:ubuntu gnome 安装 编辑:程序博客网 时间:2024/06/05 16:12
在上一篇的博客中,我们详细了解了新项目的项目结构。知道了main.ts是整个Angular项目的入口点,那么,Angular项目的启动过程是怎样的呢?
那么我们就要搞清楚三个问题。
1.启动时加载了哪个页面。
2.启动时执行了哪些脚本
3.这些脚本都做了什么
首先我们看一下angular-cli.json这个文件,上一篇博客说到这个文件是命令行工具的配置文件。我们先来看看里面的代码
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "test"//项目名称 }, "apps": [ { "root": "src",/*指向的是angular应用启动时从哪个目录找资源,默认指向src目录*/ "outDir": "dist", "assets": [/*资源目录*/ "assets", "favicon.ico" ], "index": "index.html",/* index指向Angular应用启动时加载的页面 默认指向src目录中index.html*/ "main": "main.ts",/* main属性指向Angular应用启动时加载的脚本 默认指向src目录中的main.ts*/ "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js" ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} }}
上面的代码我们主要看apps中的root、index和main属性:
root属性指向的是angular应用启动时从哪个目录找资源,默认指向src目录
index指向Angular应用启动时加载的页面 默认指向src目录中index.html
main属性指向Angular应用启动时加载的脚本 默认指向src目录中的main.ts
这个时候我们就知道了
程序启动时加载的是index.html这个页面,执行了main.ts这个脚本。
下面我们来看看脚本做了什么。
main.ts中的代码
/*开发者模式的配置*/import { enableProdMode } from '@angular/core';/*告诉Angular使用哪个模块启动应用*/import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';/*导入主模块*/import { AppModule } from './app/app.module';/*倒入环境配置*/import { environment } from './environments/environment';/*如果是生产环境 关闭开发者模式*/if (environment.production) { enableProdMode();}/*程序的起点,整个程序就是从这里运行的,AppModule指向的是/app/app.module,也就是说程序启动时会去加载/app/app.module这个文件*/platformBrowserDynamic().bootstrapModule(AppModule);
main.ts告诉Angular主模块是AppModule,Angular也就知道了去加载AppModule。
index.html中的代码很简单,在上一篇博客中也说过<app-root></app-root>
这个标签就是组件展示的地方。
<!doctype html><html><head> <meta charset="utf-8"> <title>Test</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root>Loading...</app-root></body></html>
好了,到现在为止我们就知道上面的三个问题的答案了
下面就是Angular应用的启动过程
1.Angular应用在启动时首先会去angular-cli.json这个配置文件中去寻找要加载的页面和脚本。
默认是加载index.html和main.ts
2.然后去main.ts中找到声明指定的主模块,默认的主模块是app.module
3.然后去app.module中找到指定的主组件,默认的主组件是app.component
4.然后再去app.component中找到指定的选择器,模板和样式等等
5.最后,将组件渲染到index.html中的选择器中
在将组件渲染到选择器之前,会先显示选择器本身的内容,直到将选择器中的内容替换为主组件中模本的内容。
这也就是为什么我们打开页面的时候会先出现loading的字样。
以上就是整个项目的启动过程!
如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可,如果文中有什么错误的地方,还望指正,谢谢!
- Angular的启动过程
- 【Angular】启动过程
- Angular启动过程介绍
- Angular的启动方式
- Angular源码理解–启动过程
- angular.js学习(3)--启动过程
- Angular 2 应用启动过程简单分析
- angular项目的启动流程
- angular启动
- angular.js(3)--指令的执行过程
- angular指令的过程就是一个替换的过程
- Linux的启动过程
- jboss的启动过程
- uboot的启动过程
- symbian 的启动过程
- linux 的启动过程
- Linux的启动过程
- Android的启动过程
- 微信开发教程
- Window环境下MongoDB的安装和配置
- SpringBoot--实现过滤器
- 深度学习中常见的优化算法比较
- 数据库事务的四大特性
- Angular的启动过程
- Matlab 实现对年龄库的分类
- 如何入门NLP
- UUID、CLSID、IID的获取
- C++:操作符重载
- JeeSite中实现导入导出Excel步骤
- HDU 1556 Color the ball 线段树or树状数组
- JavaScript单线程和浏览器事件循环简述
- Python:集合