Angular的启动过程

听蝉發表於 2020-1-26 13:19:00

我们知道由命令 ng new project-name，cli将会创建一个基础的angular应用，我们是可以直接运行起来一个应用。这归功与cli已经给我们创建好了一个根模块AppModule，而根模块就是用来启动此应用的模块。
     main.ts 是启动的起点，platformBrowserDynamic这个函数是浏览器平台的工厂函数,执行会返回浏览器平台的实例，然后对根模块进行初始化，链式的将所有的依赖的Module都给加载进来。每个应用程序都是通过模块的using <code class="ho is it iu iv b">bootstrapModule</code>方法创建的。
<div class="cnblogs_code">
<pre>import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}
 // 首先创建平台，然后创建应用程序实例。
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));</pre>
</div>
 
      创建应用程序时，Angular会检查根模块AppModule，AppModule的属性<code class="ho is it iu iv b">bootstrap</code>用于引导应用程序。此属性通常来来引导应用程序的组件。然后Angular在DOM中找到作为自举组件的选择器的元素，并初始化该组件。大概就这样吧。
<div class="cnblogs_code">
<pre>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap:
})
export class AppModule { }</pre>
</div>
<div class="_2Uzcx_">
此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。
</div> 
来源：https://www.cnblogs.com/huangenai/p/12216518.html

頁: [1]

琼殿技术论坛's Archiver

Angular的启动过程