Angular 启动过程简析

最新推荐文章于 2024-09-21 07:08:29 发布

原创

最新推荐文章于 2024-09-21 07:08:29 发布 · 993 阅读

1 ·

CC 4.0 BY-SA版权

本文简述Angular应用程序的启动原理，包括Angular Compiler如何将Module、Component编译成DOM API指令，以及启动过程中的平台检测、Module实例化和入口组件的执行。Angular采用增量DOM模型，不同于React的虚拟DOM，它在变更检测时直接更新DOM。启动时，Angular运行时创建Module对象，实例化入口Component，执行DOM API序列，完成页面呈现。

引言

这篇文章简要介绍一下Angular应用程序的启动（Bootstrap）原理。这里的内容来源于网上的一些关于Angular的学习资料，只会涉及基本的原理和过程，不会涉及过于细节的源代码，感兴趣的话大家可以自己研究源代码。

目前的Angular的大版本是8，即将发布Angular 9，这篇文章是基于Angular 8的。

我们在开始学习Angular并动手做一些练习时，可能会好奇，一个简单的 ng serve命令背后发生了什么，让Angular程序能够开始运行，并在浏览器中呈现预期的页面。为什么自己写的Angular Component和Module等代码块会变成最终的、能被浏览器识别的代码。这些就是本文关注的问题。

原理

我们知道，Angular框架为了简化开发，提供了Module、Component以及Decorator等编程组件。由于这些特性都不是JavaScript原生的功能，浏览器是不认识的，因此程序跑起来前需要一次编译过程。这个过程就是由Angular Compiler完成，对应的工具就是ngc。至于说这个编译器做了什么事情，就跟Angular最终呈现DOM对象的机制有关。

DOM 模型

你可能听说过在React框架中采用了所谓的虚拟DOM（Virtual DOM） 的模型。它的基本原理是，当页面有元素的改动时，就会创建一个新的DOM对象，然后计算新旧DOM对象之间的差异。依据计算结果生成一个转换命令序列（Transformation Series），执行这个序列去更新DOM中需要改动的元素，这样就避免了整个DOM的刷新。

Angular没有采用这种方式，而是采用了一种称为增量DOM（Incremental DOM） 的模型。在这种模型下，每个组件都被编译成一系列JavaScript DOM API指令，包括创建元素的指令，以及更新元素的指令。当变更检测机制发现页面需要更新，只需要找到正确的指令集合然后执行，就可以实现页面的部分更新。我们可以注意到，这里面有个组件的编译过程，这个就是Angular Compiler的工作。

如果想看看ngc工具可以编译出哪些文件，可以先写一个简单的