Angular9 NgModules 简介

2020-07-02 15:53 更新

NgModules 用于配置注入器和编译器,并帮你把那些相关的东西组织在一起。

NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供者添加到应用的依赖注入器中。

Angular 模块化

模块是组织应用和使用外部库扩展应用的最佳途径。

Angular 自己的库都是 NgModule,比如 FormsModuleHttpClientModuleRouterModule。 很多第三方库也是 NgModule,比如 Material DesignIonicAngularFire2

NgModule 把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。

模块还可以把服务加到应用中。 这些服务可能是内部开发的(比如你自己写的),或者来自外部的(比如 Angular 的路由和 HTTP 客户端)。

模块可以在应用启动时急性加载,也可以由路由器进行异步的惰性加载。

NgModule 的元数据会做这些:

  • 声明某些组件、指令和管道属于这个模块。

  • 公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们。

  • 导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的。

  • 提供一些供应用中的其它组件使用的服务。

每个 Angular 应用都至少有一个模块,也就是根模块。 你可以引导那个模块,以启动该应用。

对于那些只有少量组件的简单应用,根模块就是你所需的一切。 随着应用的成长,你要把这个根模块重构成一些特性模块,它们代表一组密切相关的功能集。 然后你再把这些模块导入到根模块中。

基本的模块

Angular CLI 在创建新应用时会生成如下基本模块 AppModule

Path:"src/app/app.module.ts (default AppModule)" 。

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


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


// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

文件的顶部是一些导入语句。接下来是你配置 NgModule 的地方,用于规定哪些组件和指令属于它(declarations),以及它使用了哪些其它模块(imports)。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号