Angular应用的启动流程

Posted 2021-06-10 聆耳吟风

index.html

<app-root></app-root>

SPA 应用都有一个 index.html, 它即是唯一的 html 文件, 称为 单页, 也是视图输出的页面载体。

<app-root></app-root> 是根组件, Angular 应用只有唯一的一个根组件。

index.html 可以在 angular.json 中 architect/build//options/index 配置。

main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

// AppModule
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

bootstrapModule(AppModule) 将 AppModule 设定为根模块。

在 AppModule 中的 @NgModule bootstrap 中设定 AppComponent 为根组件, index.html 中的 app-root 即 AppComponent。

main.ts 可以在 angular.json 中 architect/build//options/main 配置。

app.component.ts / app.component.html

// ts
@Component({
    selector: \'app-root\',
    templateUrl: \'./app.component.html\',
    styleUrls: [\'./app.component.scss\'],
})
export class AppComponent {}

<!-- html -->
<router-outlet></router-outlet>

app-root 即 index.html 中的 app-root

之前已经将 AppModule 和 AppComponent 注册为 根模块 根组件, 在 AppComponent 对应的视图中, 有一个 根路由出口, 通过单页路由渲染的组件视图都将在这里输出。

app-routing.module.ts

const routes: Routes = [];
@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]  
})  
export class AppRoutingModule {}

在根路由模块中注册路由就可以通过 URL 访问对应的视图页面。

ng serve

ng serve 配置在 angular.json 中的 architect/serve。

ng serve 在执行时会编译应用程序。

polyfills.ts

import \'zone.js/dist/zone\';

plyfills 是 腻子脚本, 这个文件一般处理的事情是兼容不同浏览器版本, 例如为了兼容 IE一些不能使用的特性而引入一些 补丁 脚本, 或者你想执行一些额外的 代码, 它会在程序启动之前执行。

腻子脚本 中引入了 zone.js, 它是 Angular 用于拦截和跟踪异步工作的机制, 例如 setTimeout 是一个异步的定时任务, 但是你并不知道它会何时完成,
zone.js 对 setTimeout 进行了一个包装, 创建了一个 Task, setTimeout 运行在这个 Task 中。

更多关于 zone.js 的信息可以自行查阅, 或通过 https://zhuanlan.zhihu.com/p/87328050 这里大概了解一些。