什么是模块
Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供者或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。
每个 Angular 应用都至少有一个 NgModule 类,也就是根模块,它习惯上命名为 AppModule,并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。
虽然小型的应用可能只有一个 NgModule,不过大多数应用都会有很多特性模块。应用的根模块之所以叫根模块,是因为它可以包含任意深度的层次化子模块。
根模块
NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块
- declarations:(可声明对象表) —— 那些属于本 NgModule 的组件、指令、管道。
- exports(导出表) —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
- imports(导入表) —— 那些导出了本模块中的组件模板所需的类的其它模块。
- providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供者,这通常是首选方式。)
- bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
子模块
定义方法与根模块基本一样,区别于不需要定义bootstap根组件
@NgModule({
declarations: [],
imports: [],
exports: [],
providers: [ ],
})
export class HomeModule { }
模块生效
子模块需要在根模块中导入或者通过路由加载模块方可生效,同理模块路由也需要在对应模块中导入
思考
-
在根模块导入第三方模块子模块能否直接使用?
答:不能,只能在使用的模块中导入方可生效,因此多个模块之间的使用可以在在共享模块中导入
-
模块与模块之间的关系
答:子模块需要在根模块中导入或通过路由加载方可生效,兄弟模块彼此相互独立,通常通过共享模块来实现数据共用