重点关注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