为什么我们需要编译事件编译流程和示例

问：为什么我们需要编译？答。我们需要编译以实现 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 等工具之外，还可以显着地自动化构建过程。

我希望它可以帮到你！ 谢谢！