Angular从零到一1.6 引导过程-阿里云开发者社区

开发者社区> 华章出版社> 正文

Angular从零到一1.6 引导过程

简介:

1.6 引导过程


Angular 2通过在main.ts中引导AppModule来启动应用。针对不同的平台,Angular提供了很多引导选项。下面的代码是通过即时(JiT)编译器动态引导,一般在进行开发调试时,默认采用这种方式:

//main.ts

import './polyfills.ts';

 

// 连同Angular编译器一起发布到浏览器

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

import { AppModule } from './app/';

 

if (environment.production) {

  enableProdMode();

}

//Angular编译器在浏览器中编译并引导该应用

platformBrowserDynamic().bootstrapModule(AppModule);

另一种方式是使用预编译器(Ahead-Of-Time,AoT)进行静态引导,静态方案可以生成更小、启动更快的应用,建议优先使用它,特别是在移动设备里或高延迟网络下。使用static选项,Angular编译器作为构建流程的一部分提前运行,生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule类的方式很相似:

// 不把编译器发布到浏览器

import { platformBrowser } from '@angular/platform-browser';

 

// 静态编译器会生成一个AppModule的工厂AppModuleNgFactory

import { AppModuleNgFactory } from './app.module.ngfactory';

 

// 引导AppModuleNgFactory

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

看起来很头大是不是?好在我们在Angular-CLI中很少需要直接操作这些,后面会讲道,Angular-CLI专门为我们发布到生产环境提供了专门的命令,可以自动化地完成这些配置。这种便利性也是我们为什么推荐在Angular开发中使用Angular-CLI,它可以让你更多地去思考业务逻辑,而不是各种复杂的环境配置。

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接