為什麼我們需要編譯事件編譯流程和示例

問：為什麼我們需要編譯？答。我們需要編譯以實現 Angular 應用程式的更高效率。

看看下面的例子，

// ...
compile: function (el, scope) {
  var dirs = this._getElDirectives(el);
  var dir;
  var scopeCreated;
  dirs.forEach(function (d) {
    dir = Provider.get(d.name + Provider.DIRECTIVES_SUFFIX);
    if (dir.scope && !scopeCreated) {
      scope = scope.$new();
      scopeCreated = true;
    }
    dir.link(el, scope, d.value);
  });
  Array.prototype.slice.call(el.children).forEach(function (c) {
    this.compile(c, scope);
  }, this);
},
// ...

使用上面的程式碼渲染模板，

<ul>
  <li *ngFor="let name of names"></li>
</ul>

與以下相比要慢得多：

// ...
this._text_9 = this.renderer.createText(this._el_3, '\n', null);
this._text_10 = this.renderer.createText(parentRenderNode, '\n\n', null);
this._el_11 = this.renderer.createElement(parentRenderNode, 'ul', null);
this._text_12 = this.renderer.createText(this._el_11, '\n  ', null);
this._anchor_13 = this.renderer.createTemplateAnchor(this._el_11, null);
this._appEl_13 = new import2.AppElement(13, 11, this, this._anchor_13);
this._TemplateRef_13_5 = new import17.TemplateRef_(this._appEl_13, viewFactory_HomeComponent1);
this._NgFor_13_6 = new import15.NgFor(this._appEl_13.vcRef, this._TemplateRef_13_5, this.parentInjector.get(import18.IterableDiffers), this.ref);
// ...

具有提前編譯的事件流

相比之下，通過 AoT，我們可以完成以下步驟：

1. 用 TypeScript 開發 Angular 2 應用程式。
2. 使用 ngc 編譯應用程式。
3. 使用 Angular 編譯器將模板編譯為 TypeScript。
4. 將 TypeScript 程式碼編譯為 JavaScript。
5. 繫結。
6. 縮小。
7. 部署。

雖然上述過程看起來更復雜，但使用者只需執行以下步驟：

1. 下載所有資產。
2. Angular bootstraps。
3. 應用程式被渲染。

正如你所看到的，缺少第三步，這意味著更快/更好的使用者體驗，除了 angular2-seed 和 angular-cli 等工具之外，還可以顯著地自動化構建過程。

我希望它可以幫到你！ 謝謝！