Question

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

我已将它连接到我的WEB API，但只构建了一个Model，而且我的AppModule已经安静了几行。

我正在思考并使用当前的方法我认为AppModule在使用它之后将是一个疯狂的大小，难以阅读，甚至可能更难调试。

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

我很难在线找到一个大于1个组件的教程/项目供参考。

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

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

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

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个）
App模块（仅限1个）

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

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

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

共享模块。您可以在此处声明所有共享管道，指令和组件。您也可以导出常用的模块，如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 docs on using modules。可能有些事情你不明白。这些都在文档中解释
The Angular 2 Style Guide。 App structure and Angular modules

Angular2如何清理AppModule

app.module

文件夹结构

1 个答案: