Angular Component代码和编译后生成的JavaScript代码

从 TypeScript 转换为 JavaScript 在这里称为编译。
在这种情况下，compiling 并不意味着创建二进制代码。
对于这种翻译，使用术语 transpilation 而不是 compilation.

Angular 中的编译步骤还为 Angular 特定的视图绑定语法生成 JavaScript 代码，如 (click) = “myClickHandler ($ event) 或 [(ngModel)] =” someValue "` 以及组件和指令实例化。
这称为 AoT 编译，但与 TypeScript-to-JavaScript 编译无关，而是与 AngularJS 1.x 中也存在的组件编译步骤有关。

在带有 AoT 的 Angular 2/4 中，Angular 组件模板在编译时解析并替换为生成的 TypeScript 代码（然后转换为 JavaScript）。
这样浏览器就不必在加载 Angular 应用程序后解析组件模板并创建绑定，而只需要运行已经包含的代码。

还有一个 DynamicModule 允许在运行时执行此操作，用于在运行时根据仅在运行时可用的数据（如 CMS 系统）创建组件的用例。

Component源代码：

import { Component, OnInit } from "@angular/core";@Component({selector: "app-root",/*template: `<input [(ngModel)] = "jerry">`*/template: `<div>Hello</div>`})export class AppComponent implements OnInit{ngOnInit(): void {debugger;}}

编译之后生成的JavaScript代码：

/***/ "5El0":
/*!****************************************************************************************************************!*\!*** C:/Code/SPA/spartacus/feature-libs/organization/administration/components/cost-center/jerry.component.ts ***!\****************************************************************************************************************/
/*! exports provided: AppComponent */
/***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AppComponent", function() { return AppComponent; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "EM62");class AppComponent {ngOnInit() {debugger;}
}
AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 2, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "div");_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵtext"](1, "Hello");_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();} }, encapsulation: 2 });
/*@__PURE__*/ (function () { _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵsetClassMetadata"](AppComponent, [{type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],args: [{selector: "app-root",/*template: `<input [(ngModel)] = "jerry">`*/template: `<div>Hello</div>`}]}], null, null); })();/***/ }),

有一个对module id为EM62的依赖：

Angular Component的模板文件，编译成了：ɵɵelementStart，ɵɵtext和ɵɵelementEnd：

Component的元数据，连源文件里的注释都还在：

该app component编译之后的JavaScript代码，我是在这个文件里找到的：
http://localhost:4200/spartacus-organization-administration.js

原因：costCenterCmsConfig里包含了AppComponent，而costCenterCmsConfig被CostCenterComponentsModule引用。

上述编译之后生成的JavaScript代码，在main.js里可以查看：

就连index.ts都有单元测试文件，很好很强大!

更多Jerry的原创文章，尽在：“汪子熙”:

Angular Component代码和编译后生成的JavaScript代码相关推荐

Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
TypeScript代码使用@Component定义一个Component: @Component({selector: 'app-shipping',templateUrl: './shipping ...
如何找到 SAP Spartacus 里某个 Component TypeScript 编译后生成的 JavaScript 位置
需求如何找到触发该网络请求的准确代码位置? 从 initiator 里查看调用栈上下文,一点头绪也没有. 找到触发该网络请求的控件的 selector:cx-register 在 Storefron ...
TypeScript输入参数的默认值一例，以及对应生成的JavaScript代码分析
const fun = ({ aa = 1, bb = 0 } = {}) => {console.log('aa: ' + aa);console.log('bb: ' + bb);retur ...
typescript设置默认值_TypeScript输入参数的默认值一例，以及对应生成的JavaScript代码分析...
const fun = ({ aa = 1, bb = 0 } = {}) => { console.log('aa: ' + aa); console.log('bb: ' + bb); re ...
STM32 MDK编译后生成的 .map文件深入分析
.map文件是STM32开发中非常重要的一个文件,在该文件中可以详细的查看单个文件.函数及用户定义的全局变量等的占用RAM和ROM(一般为片内FLASH)的空间大小,通过了解这些信息可以很方便的进行代 ...
包含内部类的.java文件编译后生成几个.class文件
如果一个类有内部类,编译将生成几个字节码文件,规则是怎样呢? 写在前,自己动手丰衣足食,结论只有个人实验支持,没有官方数据支持,欢迎自行查阅文档然后来指正,轻喷,谢谢. 1.普通类包含内部类的样例 p ...
java编译生成哪些文件_java编译后生成什么文件？生成的文件包括什么？
在大家编译完java程序的时候,都是会生成一个文件的,作为java新手不清楚java编译后生成什么文件?那么今天我们就给大家讲解一下这方面的内容,大家可以参考下文哦! java文件编译过后会生成一个c ...
JAVA编译成文件的说法_下列关于使用Javac命令编译后生成文件的说法中，正确的是？...
下列关于使用Javac命令编译后生成文件的说法中,正确的是? 答:编译后生成的文件可以在Java虚拟机中运行\n\n编译后生成的文件为二进制文件\n\n编译后生成文件的后缀名为.class 线性表的链 ...
java源程序是由类定义_无论Java源程序包含几个类的定义,若该源程序文件以A.java命名,编译后生成的都只有一个名为A的字节码文件...
无论Java源程序包含几个类的定义,若该源程序文件以A.java命名,编译后生成的都只有一个名为A的字节码文件答:× 小儿头皮静脉输液时如误注入动脉,局部表现为: 答:呈树枝状苍白人民群众既是历史 ...

Angular Component代码和编译后生成的JavaScript代码

Angular Component代码和编译后生成的JavaScript代码相关推荐

最新文章

热门文章