從 TypeScript 轉(zhuǎn)換為 JavaScript 在這里稱為編譯。
在這種情況下，compiling 并不意味著創(chuàng)建二進(jìn)制代碼。
對于這種翻譯，使用術(shù)語 transpilation 而不是 compilation.

Angular 中的編譯步驟還為 Angular 特定的視圖綁定語法生成 JavaScript 代碼，如 (click) = “myClickHandler ($ event) 或 [(ngModel)] =” someValue "` 以及組件和指令實(shí)例化。
這稱為 AoT 編譯，但與 TypeScript-to-JavaScript 編譯無關(guān)，而是與 AngularJS 1.x 中也存在的組件編譯步驟有關(guān)。

在帶有 AoT 的 Angular 2/4 中，Angular 組件模板在編譯時解析并替換為生成的 TypeScript 代碼（然后轉(zhuǎn)換為 JavaScript）。
這樣瀏覽器就不必在加載 Angular 應(yīng)用程序后解析組件模板并創(chuàng)建綁定，而只需要運(yùn)行已經(jīng)包含的代碼。

還有一個 DynamicModule 允許在運(yùn)行時執(zhí)行此操作，用于在運(yùn)行時根據(jù)僅在運(yùn)行時可用的數(shù)據(jù)（如 CMS 系統(tǒng)）創(chuàng)建組件的用例。

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的元數(shù)據(jù)，連源文件里的注釋都還在：

該app component編譯之后的JavaScript代碼，我是在這個文件里找到的：
http://localhost:4200/spartacus-organization-administration.js

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

上述編譯之后生成的JavaScript代碼，在main.js里可以查看：

就連index.ts都有單元測試文件，很好很強(qiáng)大!

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular Component代码和编译后生成的JavaScript代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。