Angular2 如何清理 AppModule

Posted 2023-02-22

【中文标题】Angular2 如何清理 AppModule

【英文标题】：Angular2 How to clean up the AppModule

【发布时间】：2017-02-15 20:17:28

【问题描述】：

我一直在使用在线教程并创建了一个“ok”的 SPA 数据输入应用程序。

我已经很好地连接到我的 WEB API，但只构建了一个模型，并且我的 AppModule 已经安静了几行。

我正在向前思考并使用当前的方法，我认为 AppModule 将在我完成后变得疯狂，难以阅读，甚至可能更难以调试。

我是否可能错过了如何构建 Angular2 更大的应用程序？

我正在努力寻找一个大于 1 个组件的在线教程/项目以供参考。

下面是我的app.module.ts 和文件夹结构。

我将CashMovement、ListComponent 和DataService 分开，我认为这是很好的做法，但添加另外10 个不同的数据服务和列表，app.module 会很长。

在我继续之前，请任何人阅读他们可以指出我的方向或我理解的建议是主观的个人意见。

app.module

import './rxjs-operators';

import  NgModule       from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';
import  HttpModule     from '@angular/http';

import  PaginationModule, DatepickerModule, Ng2BootstrapModule, ModalModule, ProgressbarModule, TimepickerModule  from 'ng2-bootstrap/ng2-bootstrap';

import  SlimLoadingBarService, SlimLoadingBarComponent  from 'ng2-slim-loading-bar';


import  AppComponent    from './app.component';
import  DateFormatPipe  from './shared/pipes/date-format.pipe';
import  HighlightDirective  from './shared/directives/highlight.directive';
import  HomeComponent  from './home/home.component';
import  MobileHideDirective  from './shared/directives/mobile-hide.directive';

import  CashMovementListComponent  from './cashmovements/cashmovement-list.component';
import  CashMovementDataService  from './cashmovements/cashmovement.data.service';

import  routing  from './app.routes';

import  ConfigService  from './shared/utils/config.service';
import  ItemsService  from './shared/utils/items.service';
import  MappingService  from './shared/utils/mapping.service';
import  NotificationService  from './shared/utils/notification.service';

@NgModule(
    imports: [
        BrowserModule,
        DatepickerModule,
        FormsModule,
        HttpModule,
        Ng2BootstrapModule,
        ModalModule,
        ProgressbarModule,
        PaginationModule,
        routing,
        TimepickerModule
    ],
    declarations: [
        AppComponent,
        DateFormatPipe,
        HighlightDirective,
        HomeComponent,
        MobileHideDirective,
        SlimLoadingBarComponent,
        CashMovementListComponent        
    ],
    providers: [
        ConfigService,
        CashMovementDataService,
        ItemsService,
        MappingService,
        NotificationService,
        SlimLoadingBarService
    ],
    bootstrap: [AppComponent]
)
export class AppModule  

文件夹结构

【参考方案1】：

你需要学会使用模块。

我通常将模块分解成这些类型

布局模块 功能模块 核心模块（仅 1 个） 共享模块（仅 1 个） 应用模块（仅 1 个）

布局模块用于布局应用。例如顶栏模块、侧边菜单模块、页脚模块和主内容模块。

功能模块。这究竟是什么？确实没有明确的定义，但是你觉得什么功能区可以自包含在模块中，你不妨去做。您将这些功能模块导入到您的布局模块中，因为这些功能构成了不同的布局组件

核心模块。在这里，您将导出您的布局模块以及所有核心（单例）服务。您只需要导出（而不是导入）模块，因为核心模块中的任何内容都不会真正使用这些布局模块。您只需导出它们，以便应用程序模块可以使用它们。核心模块只会导入到应用模块中

共享模块。您将在此处声明所有共享管道、指令和组件。您也可以导出常用模块，如CommonModule 和FormsModule。其他模块将使用该模块

应用模块。你已经知道这是什么了。在您自己创建的模块中，您唯一需要导入的是共享模块和核心模块。

这是一个基本布局

共享模块

@NgModule(
  declarations: [ HighlightDirective, SharedPipe, SharedComponent ],
  exports: [ 
    HighlightDirective, SharedPipe, SharedComponent,
    CommonModule, FormsModule
  ]
)
class SharedModule 

布局模块注意其他模块将使用 SharedModule

@NgModule(
  imports: [ FeatureAModule, FeatureBModule, SharedModule ]
  declarations: [ TopbarComponent ],
  exports: [ TopbarComponent ]
)
class TopbarModule 

@NgModule(
  imports: [ SharedModule ]
  declarations: [ SidemenuComponent ],
  exports: [ SidemenuComponent ]
)
class SidemenuModule 
  static forRoot()    // pattern for adding app-wide services
    return 
      ngModule: SidemenuModule,
      providers: [ MenuSelectionService ]
    
  


@NgModule(
  imports: [ HomeModule, OtherModule, SharedModuel ]
  declarations: [ MainContentComponent ],
  exports: [ MainContentComponent ]
)
class MainContentModule 

CoreModule 汇集构成应用程序的所有布局模块。并且还添加了其他应用范围的服务，这些服务不与其他模块绑定

@NgModule(
  imports: [ SidemeuModule.forRoot() ]
  exports: [ TopbarModule, SidemenuModule, MainContentModule ],
)
class CoreModule 
  static forRoot() 
    return 
      ngModule: CoreModule,
      providers: [ UserService, AuthService ]
    
  

AppModule

@NgModule(
  imports: [
    BrowserModule,
    SharedModule,
    CoreModule.forRoot(),  // forRoot so we get all the providers
    HttpModule,
    RouterModule.forRoot(APP_ROUTES)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
)
class AppModule 

---

另请参阅：

Angular docs on using modules。上面可能有你不明白的地方。这在文档中都有解释 The Angular 2 Style Guide。在App structure and Angular modules 上有一个部分

【讨论】：

嗨peeskillet，我有一些模型（实体）类用于几个功能模块和核心模块本身（例如，user.model.ts），我如何使用（导入）其他功能组件中的 user.model.ts？

@NicoleNaumann 模型可以去任何地方。把它们放在方便的地方。导入它们应该没有问题。它们在 Angular 框架中没有位置。随心所欲地使用它们。关于他们应该去哪里没有真正的约定。让它有意义

是的，我将模型移至核心模块，没有发生任何不好的事情。谢谢！

你没有export class x ？为什么会这样

@JonasPraem 因为这些是“sn-ps”而不是完整的代码。