NgModule 简介
前提条件
对下列概念有基本的理解:
NgModules 用于配置注入器和编译器,并帮你把那些相关的东西组织在一起。
Angular 模块化
模块是组织应用和使用外部库扩展应用的最佳途径。
Angular 自己的库都是 NgModule,比如 FormsModule
、HttpClientModule
和 RouterModule
。 很多第三方库也是 NgModule,比如 Material Design、 Ionic 和 AngularFire2。
Angular 模块把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
模块还可以把服务加到应用中。 这些服务可能是内部开发的(比如你自己写的),或者来自外部的(比如 Angular 的路由和 HTTP 客户端)。
模块可以在应用启动时立即加载,也可以由路由器进行异步的惰性加载。
NgModule 的元数据会做这些:
- 声明某些组件、指令和管道属于这个模块。
- 公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们。
- 导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的。
- 提供一些供应用中的其它组件使用的服务。
每个 Angular 应用都至少有一个模块,也就是根模块。 你可以引导那个模块,以启动该应用。
对于那些只有少量组件的简单应用,根模块就是你所需的一切。 随着应用的成长,你要把这个根模块重构成一些特性模块,它们代表一组密切相关的功能集。 然后你再把这些模块导入到根模块中。
基本的模块
CLI 在创建新应用时会生成下列基本的应用模块。
src/app/app.module.ts
content_copy// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ItemDirective } from './item.directive';
// @NgModule decorator with its metadata
@NgModule({
declarations: [
AppComponent,
ItemDirective
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
关于 NgModule 的更多知识
你可能还对下列内容感兴趣:
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com