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模块的部分