Angular2 如何清理 AppModule

Question

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

我可以很好地连接到我的 WEB API，但只构建了一个模型，我的 AppModule 已经有几行了。

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

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

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

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

我将我的 CashMovement、ListComponent 和 DataService 分开，我认为这是很好的做法，但添加了另外 10 种不同的数据服务和列表，并且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 { }

文件夹结构

Answer 1

您需要学习使用模块。

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

• 布局模块
• 功能模块
• 核心模块(仅1个)
• 共享模块(仅1个)
• 应用模块(仅1个)

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

功能模块。这到底是什么？确实没有明确的定义，但是您认为模块中可以自包含的任何功能区域，您也可以这样做。您会将这些功能模块导入到您的布局模块中，因为这些功能构成了不同的布局组件

核心模块。您将在这里导出您的布局模块和所有核心(单例)服务。您只需导出(而不是导入)模块，因为核心模块中没有任何内容会实际使用这些布局模块。您只需导出它们，以便应用程序模块可以使用它们。核心模块只会导入到app模块

共享模块。您将在此处声明所有共享管道、指令和组件。您还可以导出常用模块，如 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 ]
    }
  }
}

应用模块

@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