Angular 是一个流行的前端框架，通过 Angular 编译器（Angular Compiler）将 TypeScript 代码编译成浏览器可以理解的 JavaScript 代码。但是，到底 Angular 编译器编译了哪些内容呢？在本文中，我们将深入探讨这个问题。
Angular 编译器的作用
在谈论 Angular 编译器编译了哪些内容之前，我们需要先了解一下 Angular 编译器的作用。Angular 编译器主要有以下两个作用：
- 根据模板生成组件工厂函数。
- 将 TypeScript 代码编译成 JavaScript 代码。
其中，第一个作用是 Angular 的模板编译功能，它将模板中的指令、管道等转换成可执行的 JavaScript 代码，并将结果保存在组件工厂函数中。第二个作用则是将 TypeScript 代码编译成 JavaScript 代码，包括 ES6 模块、装饰器等语法的转换和优化。
模板编译
在 Angular 中，每个组件都有一个模板，用于渲染视图。模板中包含了组件的 HTML、CSS 和 Angular 特有的指令、管道等内容。当 Angular 应用启动时，Angular 编译器会根据这些模板生成组件工厂函数。组件工厂函数是一个 JavaScript 函数，用于创建组件实例并渲染视图。
下面是一个简单的组件示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------
----- ---- -- ------------
-
--
------ ----- ------------ -
----- - --------
---- - ----------
-模板中使用了 Angular 的插值语法 {{...}} 和组件属性绑定语法 […]="…", 当编译器编译后，对应的 HTML 将被转换成可执行的 JavaScript 代码，如下所示：
-- -------------------- ---- -------
-------- ----------------------- -
------ ------------------------- ----- -- ----------------- ------ -- ----------------------
-- ------------------------- ---- -- ----------------- --- ---- -- --
-- -------------------------------- -- -----------------------
-
------ -------- ------------------------- ---- -
-- --- - -- -
--------------------------
------------------
-----------------------
-
-- --- - -- -
----- --- - -----------------------
---------------------
---------------------------- -- ---------- - ---
---------------------
---------------------------- -- ---- -- -- --------- - ---
-------------------------- --------- --- ------
-
-从上面的代码可以看出，编译器将 {{title}} 转换成了可执行的 JavaScript 代码 _l[1]，将 […]="…" 转换成了 import1.ɵɵproperty("ngIf", _r1.value !== null) 等代码。这些转换的结果最终保存在组件工厂函数中。
TypeScript 编译
除了模板编译功能之外，Angular 编译器还负责将 TypeScript 代码编译成 JavaScript 代码。与其他 TypeScript 应用不同的是，Angular 中的 TypeScript 代码需要经过以下几个步骤：
- 转换 ES6 模块为 CommonJS 模
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25241