Angular 8 结构分析

1. 目录结构分析

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

 

2.app.module.ts组件分析

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

/*这个文件是Angular 根模块，告诉Angular如何组装应用*/

//它描述应用的部件是如何组合在一起的，每个应用都至少有一个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装饰器, @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用*/

@NgModule({

  declarations: [    /*声明当前项目运行的的组件*/

    AppComponent, NewsComponent, HomeComponent, HeaderComponent

  ],

  imports: [  /*引入当前模块运行依赖的其他模块*/

    BrowserModule

  ],

  providers: [],  /*注入项目所需要的服务*/

  bootstrap: [AppComponent]    /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用  ，这里一般写的是根组件*/

})

 

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

export class AppModule { }

1. 自定义组件

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

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

 

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

创建接口interface

 

 

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

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

组件内容详解：