Angular框架@NgModule模块的详细说明

注：参考了部分网上的资料记下的学习笔记

Angular的基本构造块就是NgModule，它会把一部分的代码整合在一起，可以看做一个一个的单元块，在使用脚手架搭建Angular项目时，会自动的生成一个根目录模块AppModule，根模块有一个根组件AppComponent，引导这个根模块就可以启动应用了，Angular应用是模块化的，每一个模块都可以根据需求去包含任意的组件。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

上述便是项目搭建完后的根目录的代码：
@NgModule是装饰器的类，它可以接受一个元数据的对象，该对象的属性是用来描述这个模块的。

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

网上有人对该部分进行过解读，算是非常通俗易懂了

providers：将本模块所有在组件中注入的服务，在这里提前定义好，否则在此模块中使用这个服务会有错误提示。

declaration：declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件，指令，管道等。

imports：导入一些模块，比如说我把所有的指令构成一个模块 我使用其中某些指令的时候，我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中，才可以使用。

exports：导出组件or指令管道等，以供引用此模块的模块可以使用此模块的组件or 指令管道等。

exporyComponents：entry component 表示 angular 的入口组件，可以引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义，但是啥时候用呢，比如，我要弹出一个组件，那么这个组件是要动态加载到DOM中了吧，这个时候就需要将这个组件xxxComponent写上了。

bootstrap:这个模块启动的时候应该启动的组件，上面代码可以看到AppModule是作为根模块的启动组件。

schemas：不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

• Angular官方提供的Api模块：

• 创建自定义模块以及包含业务组件：

1、首先创建一个自定义模块：

ng g module form

2、然后在form模块中添加新增表单以及修改表单的组件：

ng g component form/add-form

ng g component form/mod-form

3、找到form.module.ts文件

在这个文件里面需要进行的操作是：定义自定义的相关组件以及导出自定义的一些组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AddFormComponent } from './add-form/add-form.component';
import { ModFormComponent } from './mod-form/mod-form.component';



@NgModule({
  declarations: [
    AddFormComponent,
    ModFormComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[AddFormComponent,ModFormComponent]
})
export class FormModule { }

4、app.module.ts模块导入我们自定义的模块

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormModule } from "./form/form.module"

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormModule,//导入我们自定义的模块
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }