web-dev-qa-db-ja.com

Angular2 AppModuleをクリーンアップする方法

私はオンラインでチュートリアルを使用しており、「OK」のSPAデータ入力アプリケーションを作成しました。

私はそれを私のWEB APIにうまく接続していますが、1つのモデルしか構築しておらず、すでに私の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 { }

フォルダ構造

enter image description here

angularstructurecomponentssingle-page-application
12
Glenn Sampson

モジュールの使い方を学ぶ必要があります。

私は通常、モジュールをこれらのタイプに分類します

  • レイアウトモジュール
  • 機能モジュール
  • コアモジュール（1つのみ）
  • 共有モジュール（1つのみ）
  • アプリモジュール（1つのみ）

レイアウトモジュールはアプリをレイアウトするためのものです。たとえば、トップバーモジュール、サイドメニューモジュール、フッターモジュール、メインコンテンツモジュールなどです。

機能モジュール。これは正確には何ですか？明確な定義は実際にはありませんが、モジュールに自己完結していると思われる機能領域があれば、それを行うこともできます。機能はさまざまなレイアウトコンポーネントを構成するものであるため、これらの機能モジュールをレイアウトモジュールにインポートします

コアモジュール。ここでは、レイアウトモジュールとすべてのコア（シングルトン）サービスをエクスポートします。コアモジュール内の何も実際にこれらのレイアウトモジュールを使用しないため、モジュールをexportする必要があります（インポートしないでください）。それらをエクスポートして、アプリモジュールがそれらを使用できるようにします。コアモジュールはアプリモジュールにのみインポートされます

共有モジュール。ここで、すべての共有パイプ、ディレクティブ、およびコンポーネントを宣言します。また、CommonModuleやFormsModuleなどの一般的に使用されるモジュールをエクスポートできます。他のモジュールはモジュールを使用します

App module。これが何であるかはすでにご存じでしょう。独自に作成したモジュールのうち、インポートする必要があるのは、共有モジュールとコアモジュールだけです。

ここに基本的なレイアウトがあります

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アプリケーションを構成するすべてのレイアウトモジュールを1つにまとめます。また、他のモジュールに関連付けられていない他のアプリ全体のサービスを追加します

@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 {}

関連項目：

30
Paul Samsotha