2019-04-13-理解Angular的Bootstrapping

重点关注Root Module 和 Component

在main.ts中看到AppModule属于Root Module(根模块)

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();
}

//这里可以看到加载AppModule这个模块
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

然后在根模块(AppModule)里面可以看到,它加载AppComponent这个组件

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    LoginComponent,
    ErrorComponent,
    ListTodosComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent] //加载AppComponent这个组件
})
export class 

在app.component.html里面,这是项目的根组件

Todo Application Header/Menu
<br><br>

<router-outlet></router-outlet>

<br><br>
Todo Application Footer

其中<router-outlet></router-outlet>是路由组件,会替换成为特定路由的内容。
而其上方或下方的内容则保持不变。

一个Angular应用的架构大概如下图:

image.png

然后Angular组件的结构如下图:


image.png

推荐阅读更多精彩内容

  • Angular介绍 Angular安装、创建项目、目录结构、组件、服务 创建组件、绑定数据、绑定属性、数据循环、条...
    地瓜粉丝阅读 189评论 0 2
  • 一、SPA的概念 首先明确一个概念,SPA,全称为Single Page Application单页应用,一个单页...
    O_禾火_O阅读 3,392评论 0 3
  • 一、安装最新版本的 nodejs 注意:请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验...
    liuguangsen阅读 1,049评论 0 1
  • 路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据。这允许我们通过...
    semlinker阅读 10,570评论 4 16
  • 文/古月言 背道而驰,我们会不会相遇在地球另一点?--------题记 上一篇 目录 第二十五章 自转和公转 ...
    古月言阅读 264评论 7 10