Angular2如何清理AppModule

Question

我一直在线使用这些教程并创建了一个'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 { }

文件夹结构

Answer 1

您需要学习如何使用模块。

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

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

布局模块用于布置应用程序。 例如，顶部模块，侧面菜单模块，页脚模块和主内容模块。

功能模块 。 究竟是什么？ 实际上没有明确的定义，但无论您认为哪个功能区域都可以自包含在模块中，您也可以这样做。 您将这些要素模块导入到布局模块中，因为这些要素构成了不同的布局组件

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

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

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

这是一个基本布局

SharedModule

@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文档 。 可能有些事情你不明白。 这些都在文档中解释
• Angular 2风格指南 。 有一个关于App结构和Angular模块的部分