ngm模块,它怎么帮助你组织代码？

260 7 2024-07-04

ngm 模块：拯救你代码的超级英雄！

大家好！今天咱们来聊聊 Angular 的 ngm 模块，这可是拯救你代码的超级英雄！你有没有遇到过代码像一锅乱炖，各种组件、服务、指令混杂在一起，让人眼花缭乱？别慌，ngm 模块就是你的救星！

简单来说，ngm 模块就是 Angular 提供的一种机制，用来把代码组织得井井有条，就像一个超级大衣柜，把各种代码分类存放，方便查找和管理。

想象一下，你家衣柜里塞满了各种衣服，T 恤、衬衫、裤子、裙子，全堆在一起。想找一件特定的衣服简直是噩梦！但是，如果你把衣服分类存放，T 恤放在一起，衬衫放在一起，裤子放在一起，是不是就方便多了？ngm 模块就是你代码的衣柜，让你的代码井井有条，一目了然。

ngm 模块的“三板斧”

ngm 模块有三大核心功能，我把它比喻为“三板斧”：

1. 静态的“编译器配置”：就像告诉编译器“这是我的武器库，里面存放着各种指令，你根据我的指令来构建页面”。

举例来说，你想要在页面上展示一个按钮，你就要使用 @NgModule 装饰器里的 declarations 属性，把按钮组件声明在模块中，让编译器知道它在哪里，才能正确地使用它。

typescript

@NgModule({

declarations: [

MyButtonComponent // 声明按钮组件

export class MyModule {}

2. 运行时的“注入器配置”：就像告诉注入器“这是我的资源库，里面存放着各种服务，你需要什么，就从这里获取”。

例如，你想要在页面上使用一个数据服务，你就要使用 @NgModule 装饰器里的 providers 属性，把数据服务注册到模块中，让注入器知道它在哪里，才能在需要的时候提供服务。

typescript

@NgModule({

providers: [

DataService // 注册数据服务

export class MyModule {}

3. 组合/分组的“imports”和“exports”：就像一个大箱子，可以把多个小箱子装进去，方便管理和使用。

比如，你想要在项目中使用一个第三方库，你就可以使用 @NgModule 装饰器里的 imports 属性，把这个第三方库导入到你的模块中，让它可以被使用。

typescript

@NgModule({

imports: [

ThirdPartyModule // 导入第三方库

export class MyModule {}

exports 属性则是用来导出模块中的组件、指令、管道等，让其他模块可以访问它们。

typescript

@NgModule({

exports: [

MyButtonComponent // 导出按钮组件

export class MyModule {}

ngm 模块的使用场景

ngm 模块在 Angular 应用中发挥着重要的作用，它可以帮助你：

1. 组织代码：将相关联的组件、服务、指令等放在一起，方便管理和维护。

2. 控制访问权限：通过 exports 属性控制哪些组件、指令、管道可以被其他模块访问。

3. 提高代码可重用性：将一些常用的功能模块化，方便在其他项目中重复使用。

4. 提高代码可测试性：将代码模块化，方便进行单元测试。

ngm 模块的示例

想象一下，你正在开发一个电商网站，你需要一个“商品列表”模块，它包含以下内容：

商品列表组件：用于展示商品列表。

商品详情组件：用于展示商品详细信息。

商品服务：用于获取商品数据。

商品过滤器管道：用于过滤商品列表。

这时候，你就可以使用 ngm 模块来组织这些代码：

typescript

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { ProductListComponent } from './product-list.component';

import { ProductDetailComponent } from './product-detail.component';

import { ProductService } from './product.service';

import { ProductFilterPipe } from './product-filter.pipe';

@NgModule({

declarations: [

ProductListComponent,

ProductDetailComponent,