开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,它可以让你更多地去思考业务逻辑,而不是各种复杂的环境配置。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Angular 页面元素的DOM级别的删除过程
Angular 页面元素的DOM级别的删除过程
36 0
Angular 页面元素的DOM级别的删除过程
Angular 页面元素的DOM级别的删除过程
24 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载