bootstrapModule背后的故事

bootstrapModule是PlatformRef的一个方法,这个方法中实现了Module的初始化、Component的初始化等,是Angular2的启动函数。
阅读代码我们可以发现真正调用的是_bootstrapModuleWithZone这个方法。

最开始干的事情

最开始会通过创建一个Compiler的实例,代码如下:

const compilerFactory: CompilerFactory = this.injector.get(CompilerFactory);
const compiler = compilerFactory.createCompiler(
        Array.isArray(compilerOptions) ? compilerOptions : [compilerOptions]);

首先通过Injector得到一个得到一个Compiler的Factory(看这里)。然后通过Factory
和option创建一个compiler用于Module和Component的编译。
Compiler的实际使用的是JitCompiler,通过JitCompilerFactory进行创建,创建的过程为:
1、根据option创建一个Injector
2、从创建的Injector中创建一个Compiler
所以Compiler也是通过Injector进行创建的,具体内容将在Injector部分具体分析。

编译过程

创建好Compiler后就可以对代码进行编译了:

return compiler.compileModuleAsync(moduleType)
    .then((moduleFactory) => this._bootstrapModuleFactoryWithZone(moduleFactory, ngZone));

这段代码的第一部分就是编译我们的代码,阅读代码可以发现它的调用路径为:

compileModuleAsync
         |
         +--->_compileModuleAndComponents
                       |
                       +--->_loadModules,_compileComponents,_compileModule

加载Module

在加载Module的时候,首先是通过getNgModuleMetadata方法获取Model的meta数据(meta数据是怎么来的),在这个方法中
会得到class通过NgModule注解修饰的信息。

if (meta.imports){
   ......
}
if (meta.exports){
   ......
}
if (meta.declarations){
   ......
}
if (meta.providers){
   ......
}
if (meta.entryComponents){
   ......
}
if (meta.bootstrap){
   ......
}
if (meta.schemas){
   ......
}

每一个判断语句内都是对各种信息的处理,最后把得到的信息组合成一个CompilerMeta。其中需要特别注意的是transitiveModule属性
这个属性记录了Module内使用到的各种信息,包括Module,Component,Provider,Pipe,Directive。
在获取了Module的Compiler信息后就需要进行加载了,

loadNgModuleDirectiveAndPipeMetadata(moduleType: any, isSync: boolean, throwIfNotFound = true):
    Promise<any> {
  const ngModule = this.getNgModuleMetadata(moduleType, throwIfNotFound);
  const loading: Promise<any>[] = [];
  if (ngModule) {
    ngModule.declaredDirectives.forEach((id) => {
      const promise = this._loadDirectiveMetadata(id.reference, isSync);
      if (promise) {
        loading.push(promise);
      }
    });
    ngModule.declaredPipes.forEach((id) => this._loadPipeMetadata(id.reference));
  }
  return Promise.all(loading);
}

通过代码可以看出:
1、加载通过declared声明的directive(包括Component)
2、加载pipe
这两步都是对使用到的类的元数据进行处理。

编译Component

加载完Module的全部信息后就要对Module中的Component进行编译,编译过程:
1、收集Module中的全部Component
2、收集每一个Component中使用到的entryComponents
3、收集Module中使用到的entryComponents
4、使用收集到的信息进行编译

if (!this._compilerConfig.useJit) {
  viewClass = interpretStatements(statements, compileResult.viewClassVar);
} else {
  viewClass = jitStatements(
      `/${identifierName(template.ngModule.type)}/${identifierName(template.compType)}/${template.isHost?'host':'component'}.ngfactory.js`,
      statements, compileResult.viewClassVar);
}

这是调用编译的入口,具体编译过程不再这里分析,两种编译方式的区别:使用jit会在客户端(浏览器)中生成具体的代码文件,可以在浏览器查看本地文件看到,不适用jit的方式则会编译保存在内存中。

编译Module

Module的编译过程和Component编译过程类似,首先进行数据收集和初始化,然后进行编译。

if (!this._compilerConfig.useJit) {
  ngModuleFactory =
      interpretStatements(compileResult.statements, compileResult.ngModuleFactoryVar);
} else {
  ngModuleFactory = jitStatements(
      `/${identifierName(moduleMeta.type)}/module.ngfactory.js`, compileResult.statements,
      compileResult.ngModuleFactoryVar);
}

也有jit和非jit两种方式,两种方式都会返回一个ModuleFactory作为最终的编译结果。

启动Module

编译完以后就会得到一个ModuleFactory,然后使用这个Factory来启动我们的程序。

return compiler.compileModuleAsync(moduleType)
    .then((moduleFactory) => this._bootstrapModuleFactoryWithZone(moduleFactory, ngZone));

这段函数的后半部分就是进行启动,其中用到的moduleFactory就是前半部分编译后得到的。
经过跳转后执行的代码:

private _moduleDoBootstrap(moduleRef: NgModuleInjector<any>) {
  const appRef = moduleRef.injector.get(ApplicationRef);
  if (moduleRef.bootstrapFactories.length > 0) {
    moduleRef.bootstrapFactories.forEach((compFactory) => appRef.bootstrap(compFactory));
  } else if (moduleRef.instance.ngDoBootstrap) {
    moduleRef.instance.ngDoBootstrap(appRef);
  } else {
    throw new Error(
        `The module ${stringify(moduleRef.instance.constructor)} was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ` +
        `Please define one of these.`);
  }
}

有两种方式进行bootstrap:
1、bootstrapFactories的长度大于0,使用appRef的bootstrap函数进行启动,当我们在NgModule中配置了bootstrap属性的时候,就会记录到这里来。
2、使用moduleRef.instance的ngDoBootstrap方法进行启动,这个moduleRef.instance就是我们的NgModule修饰的类。
如果上述两种都没有的话就会报错,所以在实现作为启动Module的时候,要么注解中配置bootstrap属性,要么类中定义ngDoBootstrap方法。
appRef实际是ApplicationRef_类的实例,bootstrap的代码为:

bootstrap<C>(componentOrFactory: ComponentFactory<C>|Type<C>): ComponentRef<C> {
  if (!this._initStatus.done) {
    throw new Error(
        'Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.');
  }
  let componentFactory: ComponentFactory<C>;
  if (componentOrFactory instanceof ComponentFactory) {
    componentFactory = componentOrFactory;
  } else {
    componentFactory = this._componentFactoryResolver.resolveComponentFactory(componentOrFactory);
  }
  this._rootComponentTypes.push(componentFactory.componentType);
  const compRef = componentFactory.create(this._injector, [], componentFactory.selector);
  compRef.onDestroy(() => { this._unloadComponent(compRef); });
  const testability = compRef.injector.get(Testability, null);
  if (testability) {
    compRef.injector.get(TestabilityRegistry)
        .registerApplication(compRef.location.nativeElement, testability);
  }

  this._loadComponent(compRef);
  if (isDevMode()) {
    this._console.log(
        `Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.`);
  }
  return compRef;
}

在这段代码中主要干的事情有:
1、获取Component Factory
2、创建跟Component
3、注册测测试组件
4、加载Component
5、显示调试信息,在开发模式下每次启动时console中显示的那段话就是在这里打印的
加载Component的过程:

private _loadComponent(componentRef: ComponentRef<any>): void {
  this.attachView(componentRef.hostView);
  this.tick();
  this._rootComponents.push(componentRef);
  // Get the listeners lazily to prevent DI cycles.
  const listeners =
      <((compRef: ComponentRef<any>) => void)[]>this._injector.get(APP_BOOTSTRAP_LISTENER, [])
          .concat(this._bootstrapListeners);
  listeners.forEach((listener) => listener(componentRef));
}

1、把Component的vie和application进行关联
2、只是一个tick(todo:以后分析)
3、添加到跟Component列表中去(可以看出Angular2是支持多个跟节点的)
4、从Injector中获取APP_BOOTSTRAP_LISTENER名称的方法,然后调用。

总结

至此Angular2的整个启动过程主线就全部分析完了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容