在回答了“为什么需要编译”这个问题的同时 ， 我们同时也回答了“什么东西会被编译”这个问题 。我们希望把组件的模板编译成一个JS类 ， 这些类包含了在绑定的数据中检测变化和渲染UI的逻辑 。通过这个方式 ， 我们和潜在的平台解耦了 。换句话说 ， 通过对渲染器采取了不同的实现 ， 我们在不对代码做任何的修改的前提下 ， 就可以对同一个以AoT方式编译的组件做不同的渲染 。比如 ， 上述代码中的组件还可以直接用在中 ， 这是由于这些不同的渲染器都能够理解编译后的组件 。
编译发生在什么时候？JiT 还是 AoT
编译器最cool的一点是它可以在页面运行时（例如在用户的浏览器内）启动 ， 也可以作为构建的一个步骤在页面的编译时启动 。这主要得益于的可移植性：我们可以在任何的平台的JS虚拟机上运行 ， 所以我们完全可以在浏览器和中运行它 。
JiT编译模式的流程
一个典型的非AoT应用的开发流程大概是：
一旦把app部署好了 ， 并且用户在浏览器中打开了这个app ， 下面这些事情会逐一进行：
AoT编译模式的流程
相对的 ， 使用AoT模式的应用的开发流程是：
打包
压缩
部署
虽然前面的过程稍稍复杂 ， 但是用户这一侧的事情就变简单了：
如你所见 ， 第三步被省略掉了 ， 这意味着页面打开更快 ， 用户体验也更好 。类似-cli和-seed这样的工具可以让整个编译过程变的非常的自动化 。
概括起来 ， 中的Jit和AoT的主要区别是：
你可以在我的账号中找到一个最小的AoT编译demo ， 链接在这里
深入AoT编译
这个小节回答了这些问题：
对@/的代码一行一行的解释没太大意义 ， 因此我们仅仅来快速过一下编译的过程 。如果你对编译器的词法分析过程 ， 解析和生成代码过程等感兴趣 ， 你可以读一读 Bosch的《编译器》一文 ， 或者它的胶片 。
译者：
《编译器》一文链接
它的胶片链接
文章插图
模板编译器收到一个组件和它的上下文（可以这认为是组件在组件树上的位置）作为输入 ， 并产生了如下文件：
* 是一个文件名占位符 ， 例如对于.ts这样的组件 ， 编译器生成的文件是 ..ts, .css.shim.ts 和 ..json 。*.css.shim.ts和我们讨论的主题关系不大 ， 因此不会对它详细描述 。如果你希望多了解 *..json 文件 ， 你可以看看“AoT和第三方模块”小节 。
*..ts 的内部结构
它包含了如下的定义：
以及下面两个函数
其中的 {} 是组件的控制器名字 ， 而 {} 是一个无符号整数 。他们都继承了 ， 并且实现了下面的方法：
上述这些工厂函数只在生成的实例中才存在 。
我前面说过 ， l中的代码是JS虚拟机友好的 。
{{newName}}我们来看看编译后这个模板的代码 ， l方法的代码看起来像是这样的：
- 南海观世音
- angular之formgroup
- angularjs中使用ng-repeat的注意点
- angularjs执行ng-repeat判断完成状态，生成可复用性自定义指令
- 响应式Form Angular Form 学习笔记
- ng-repeat,ng-if angular笔记使用小技巧
- 博瑞都市花园
- 蚩尤传说
- 云天宫
- 细数4K超清大运中的国产摄像机前端替代