Angular 8 结构分析

1. 目录结构分析

详情参考：https://www.angular.cn/guide/file-structure

2.app.module.ts组件分析

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。 目前，它只声明了 AppComponent。 稍后它还会声明更多组件。

//它描述应用的部件是如何组合在一起的，每个应用都至少有一个angular模块，也就是根模块，用来引导并运行应用。你可以给它取任何名字，常规名字就是AppModule。也就是app.module.ts文件。

//BrowserModule，浏览器解析的模块

import { BrowserModule } from '@angular/platform-browser'; 

//Angular核心模块

import { NgModule } from '@angular/core';

//根组件

import { AppComponent } from './app.component';

import { NewsComponent } from './components/news/news.component';

import { HomeComponent } from './components/home/home.component';

import { HeaderComponent } from './components/header/header.component';

@NgModule({

  declarations: [   

    AppComponent, NewsComponent, HomeComponent, HeaderComponent

  ],

  imports: [ 

    BrowserModule

  ],

  providers: [], 

  bootstrap: [AppComponent]   

})

//根模块不需要导出任何东西，   因为其它组件不需要导入根模块

export class AppModule { }

1. 自定义组件

ng g component components/header    创建组件，components 是文件夹名，header 是组件名  输入 ng g 会弹出列表让你选。

创建一个带路由模块的模块（两个文件）

创建一个组件，但跳过创建测试文件

创建接口interface

参考网址： https://cli.a ngular.io/

使用组件： <app-header></app-header>

组件内容详解：