Angular总结二:Angular 启动过程

Posted xinjie-just

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular总结二:Angular 启动过程相关的知识,希望对你有一定的参考价值。

要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事?

通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组

技术分享图片

这个对象中有 root 这个属性,这个是 Angular 应用的根目录,也即是 src 目录是 Angular 应用的根目录

这个对象中有 index 这个属性,这个是 Angular 启动时加载的页面,也即是 src 目录下的 index.html 是 Angular 启动时加载的页面

这个对象中有 main 这个属性,这个是 Angular 启动时加载的脚本,也既是 src 目录下的 main.ts 是 Angular 启动时加载的脚本。负责引导 Angular 的启动。

main.ts 文件内容如下

技术分享图片

1. 引入 enableProdMode 模块,可以通过这个方法来关闭 Angular 的开发者模式,if(environment.production){enableProdMode();}如果为生产环境则关闭开发者模式,

2. Angular 导入 platformBrowserDynamic 模块来启动这个应用,

3. 导入命令行工具生成的整个应用的主模块 AppModule,

4. 导入环境配置文件 environment, 通过该目录下的 environment.prod.ts 配置文件配置生产环境,通过 environment.ts 文件来配置开发环境,还可以自定义测试环境,如 environment.test.ts

 

Angular 通过 AppModule 模块来启动应用,并加载该模块需要的子模块

app.module.ts 内容如下:

技术分享图片

1. 向外暴露了一个 AppModule 类。

2. 使用 NgModule 装饰器生命了一个模块

3. declarations 申明模块中有什么东西,该申明中只能声明组件、指令、管道

4. imports 申明要让应用正常运转还需要什么东西,因为程序要运行在浏览器中,所以 BrowserModule 模块是必须要的。

5. providers 申明模块中需要用到的服务

6. bootstrap 属性申明了主组件

 

Angular 应用在加载时,会加载 AppModule 模块以及该模块所依赖的所有子模块。

为了弄明白加载的页面,分析 app.comonment.ts 这个组件:

技术分享图片

1. 从 angular 核心模块中引入 Component 组件模块,

2. 在元数据装饰器中指明了选择器 app-root ,模板 app.comonent.html,样式 app.component.css,

3. 在 AppComponent 类中,定义了 title 属性,并为其赋值。

 

在 index.html 中

技术分享图片

<app-root></app-root> 这里的内容将会被替换,替换内容为选择器为 app-root 的模板内容,既是 app.component.html  的内容:

技术分享图片

1. 该模板中,{{title}} 是插值表达式,被其控制器的类的属性 title 值替换为 “app”。

于是,启动 Angular 应用并在浏览器中查看时,先显示“欢迎...”,随后被替换为 app.component.html 的内容:

技术分享图片

技术分享图片

 

以上是关于Angular总结二:Angular 启动过程的主要内容,如果未能解决你的问题,请参考以下文章

春季启动运行Angular2

为啥我的 Angular 8 项目在安装 Angular 10 cli 后无法启动?

启动时出现 Angular 8 错误

Angularjs启动应用

AngularJS进阶 三十九 基于项目实战解析ng启动加载过程

无法启动 Angular 应用程序