Angular进阶：Angular编译机制（AOT、JIT）
Angular编译机制这是我用来进行实验的代码，它是基于quickstart项目，并根据aot文档修改得到的。各位可以用它来进行探索，也可以自己基于quickstart进行修改（个人建议后者）。 为什么Angular需要编译
Angular编译有两种：Ahead-of-time (AOT) 和 just-in-time (JIT)。但是实际上使用的是同一个编译器，AOT和JIT的区别只是编译的时机和编译所使用的工具库。 just-in-time (JIT)JIT一般经历的步骤：
Ahead-of-time (AOT)AOT一般经历的步骤：
Angular编译（JIT步骤6、AOT步骤2.1）的顺序
在运行时，Angular会使用NgModuleFactory创建出模块的实例：NgModuleRef。 AOT步骤2.1产生的NgFactories
其实无论是AOT还是JIT，angular-complier都输出
每一个component factory可以在运行时创建组件的实例，通过组合组件类（比如class /**
* @fileoverview This file is generated by the Angular template compiler.
* Do not edit.
* @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride}
*/
/* tslint:disable */
import * as i0 from './app.component.css.shim.ngstyle';
import * as i1 from '@angular/core';
import * as i2 from '../../../src/app/app.component';
import * as i3 from '@angular/common';
import * as i4 from '@angular/forms';
import * as i5 from './child1.component.ngfactory';
import * as i6 from '../../../src/app/child1.component';
const styles_AppComponent:any[] = [i0.styles];
export const RenderType_AppComponent:i1.RendererType2 = i1.?crt({encapsulation:0,styles:styles_AppComponent,data:{}});
function View_AppComponent_1(_l:any):i1.?ViewDefinition {
return i1.?vid(0,[(_l()(),i1.?eld(0,(null as any),1,'h1',([] as any[]),(null as any))),(_l()(),i1.?ted((null as any),['This is heading']))],(null as any));
}
function View_AppComponent_2(_l:any):i1.?ViewDefinition {
return i1.?vid(0,'div',['','']))],(_ck,_v) => {
const currVal_0:any = _v.context.$implicit;
_ck(_v,currVal_0);
});
}
export function View_AppComponent_0(_l:any):i1.?ViewDefinition {
return i1.?vid(0,'button',[[(null as any),'click']],(_v,en,$event) => {
var ad:boolean = true;
var _co:i2.AppComponent = _v.component;
if (('click' === en)) {
const pd_0:any = ((<any>_co.toggleHeading()) !== false);
ad = (pd_0 && ad);
}
return ad;
},['Toggle Heading'])),['n'])),i1.?and(16777216,View_AppComponent_1)),i1.?did(16384,i3.NgIf,[i1.ViewContainerRef,i1.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),['nn'])),'h3',['List of Heroes'])),View_AppComponent_2)),i1.?did(802816,i3.NgForOf,i1.TemplateRef,i1.IterableDiffers],{ngForOf:[0,'ngForOf']},'h5',['my name: ',''])),5,'input',[['type','text']],[[2,'ng-untouched',(null as any)],[2,'ng-touched','ng-pristine','ng-dirty','ng-valid','ng-invalid','ng-pending',(null as any)]],'ngModelChange'],[(null as any),'input'],'blur'],'compositionstart'],'compositionend']],$event) => {
var ad:boolean = true;
var _co:i2.AppComponent = _v.component;
if (('input' === en)) {
const pd_0:any = ((<any>i1.?nov(_v,16)._handleInput($event.target.value)) !== false);
ad = (pd_0 && ad);
}
if (('blur' === en)) {
const pd_1:any = ((<any>i1.?nov(_v,16).onTouched()) !== false);
ad = (pd_1 && ad);
}
if (('compositionstart' === en)) {
const pd_2:any = ((<any>i1.?nov(_v,16)._compositionStart()) !== false);
ad = (pd_2 && ad);
}
if (('compositionend' === en)) {
const pd_3:any = ((<any>i1.?nov(_v,16)._compositionEnd($event.target.value)) !== false);
ad = (pd_3 && ad);
}
if (('ngModelChange' === en)) {
const pd_4:any = ((<any>(_co.myName = $event)) !== false);
ad = (pd_4 && ad);
}
return ad;
},i4.DefaultValueAccessor,[i1.Renderer2,i1.ElementRef,i4.COMPOSITION_BUFFER_MODE]],i1.?prd(1024,i4.NG_VALUE_ACCESSOR,(p0_0:any) => {
return [p0_0];
},[i4.DefaultValueAccessor]),i1.?did(671744,i4.NgModel,[[8,[8,i4.NG_VALUE_ACCESSOR]],{model:[0,'model']},{update:'ngModelChange'}),i1.?prd(2048,i4.NgControl,[i4.NgModel]),i4.NgControlStatus,[i4.NgControl],'child1',i5.View_Child1Component_0,i5.RenderType_Child1Component)),i1.?did(49152,i6.Child1Component,{ipt:[0,'ipt']},['n']))],_v) => {
var _co:i2.AppComponent = _v.component;
const currVal_0:any = _co.showHeading;
_ck(_v,4,currVal_0);
const currVal_1:any = _co.heroes;
_ck(_v,10,currVal_1);
const currVal_10:any = _co.myName;
_ck(_v,18,currVal_10);
const currVal_12:any = _co.myName;
_ck(_v,26,currVal_12);
},_v) => {
var _co:i2.AppComponent = _v.component;
const currVal_2:any = _co.myName;
_ck(_v,13,currVal_2);
const currVal_3:any = i1.?nov(_v,20).ngClassUntouched;
const currVal_4:any = i1.?nov(_v,20).ngClassTouched;
const currVal_5:any = i1.?nov(_v,20).ngClassPristine;
const currVal_6:any = i1.?nov(_v,20).ngClassDirty;
const currVal_7:any = i1.?nov(_v,20).ngClassValid;
const currVal_8:any = i1.?nov(_v,20).ngClassInvalid;
const currVal_9:any = i1.?nov(_v,20).ngClassPending;
_ck(_v,15,currVal_3,currVal_4,currVal_5,currVal_6,currVal_7,currVal_8,currVal_9);
const currVal_11:any = _co.someText;
_ck(_v,23,currVal_11);
});
}
export function View_AppComponent_Host_0(_l:any):i1.?ViewDefinition {
return i1.?vid(0,'my-app',View_AppComponent_0,RenderType_AppComponent)),i2.AppComponent,(null as any))],(null as any));
}
export const AppComponentNgFactory:i1.ComponentFactory<i2.AppComponent> = i1.?ccf('my-app',View_AppComponent_Host_0,{},([] as any[]));
可以看出，在
以下图片表示了 为什么在模板中只能访问public属性如果在
如果你实在是既要在模板中访问某属性，又要将这个属性设置为private（处于封装性的考虑），你可以看看参考资料5的"AoT and encapsulation"章节。 AOT步骤2.1如何解析文件的metadataAngular编译器通过metadata中提供的信息，来生成组件/NgModule的工厂。 Angular编译器是如何解析文件的metadata的呢？它怎么能从我们写的源代码中读懂代码的语义呢？
即使Typescript被tsc编译成Javascript，metadata依然保留着。这也是为什么JIT与AOT的原理是相同的。 AOT编译（AOT步骤2.1）分为两个阶段：
因此，Angular源代码要想通过编译，要先后满足：
尚未完成https://www.youtube.com/watch...
参考资料
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- active-directory – 用于在OpenLDAP中创建Activ
- webservice功能测试
- 为什么map和Set在scala.Predef中别名？
- webservice 文件上传下载之CXF restful
- angularjs – angular.js范围变量正在更新但视图
- angularjs – 在ng-repeat内找不到md-sidenav句柄
- angularjs – angular.js chrome Access-Control
- bash – 使用set -e为程序的退出状态提供通用解决
- windows下bat批量拷贝
- grails框架中webService插件的使用(axis2,cxf)