4

私のAngular 2コードをすべて含む単一のモジュールを作成する方が良いのか、それともすべてを複数のモジュールに分割する方が良いのか疑問に思っています。たとえば、私は Angular 2 でブログを作成しています。したがって、「記事リスト」コンポーネントと「記事」コンポーネントがあります。「article-list」は、記事のリストを返すサービスを呼び出してから「ngFor」を実行し、それぞれに「記事」を挿入します。

「記事」コンポーネントには「タグリスト」コンポーネントが含まれています (「記事リスト」コンポーネントと同じパターンに従うため、「タグ」コンポーネントもあります)。今のところ、すべてが 1 つのモジュールにあり、非常にうまく機能しますが、ここでは、「ヒーロー」関連のもの用のモジュールを作成したことがわかりますが、それが本当に必要かどうか疑問に思っています。

実際、すべてをメインのモジュールに入れるのではなく、モジュールを作成するコストが正確にはわかりません。そのため、1 つのモジュールで続行するか、「記事」モジュールと「タグ」モジュールを作成するかを判断するのに苦労しています。 .

4

2 に答える 2

13

はい、アプリケーションをモジュールに分割できます。これにより、アプリケーション内のモジュール間の結合が減少します。大規模なアプリケーションを構築する場合、アプリケーションを機能単位またはモジュールに分割することが重要です。

たとえば、メイン モジュール名は「app.module」です。

アプリケーションは、「ヘッダー」、「ホーム」、...、「フッター」セクションで構成されます。

ヘッダー セクションでは、複数のコンポーネントを作成できます。例えば。link(routes) と search セクション、これをモジュール ヘッダーに追加します。同様に、ホーム、フッター、およびその他のセクションには、関連するモジュールが含まれています。

たとえば、ホームセクションは多くの機能で構成される大きなセクションであり、複数のモジュールを作成して、「home.module」などのホームメインモジュールに挿入できます。

以下のコードは、Angular 2 で複数のモジュールを実装する方法を示す単なる例です。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent }   from './app.component';
import { HeaderModule }   from './header.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    HeaderModule
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

header.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
  InputTextModule, 
  ButtonModule,
  DataTableModule,
  SharedModule
} from 'primeng/primeng';

import { HeaderComponent }   from './header.component';
import { UploadFileComponent }   from './upload-file.component';


@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    HttpModule,
    InputTextModule,
    ButtonModule,
    DataTableModule,
    SharedModule
  ],
  declarations: [
    HeaderComponent,
    UploadFileComponent
  ],
  exports: [ 
    HeaderComponent 
  ]
})

export class HeaderModule { }

angular2 ngmoduleのドキュメントを参照してください

于 2016-09-28T20:12:47.020 に答える
4

機能に応じて、アプリケーションをモジュールに分割するように努める必要があります。

  • Angular モジュールを使用すると、機能の分離、テスト、および再利用が容易になります。
  • Angular モジュールを使用すると、ルーティング可能な機能を簡単に遅延ロードできます。

Angular チュートリアルの例に固執する場合: HeroesModule の下にすべてのヒーローをグループ化し、VillainsModule の下に悪役をグループ化することは理にかなっています。第 2 に、それらの両方とアプリ内の他のモジュールに関連する共通機能がある場合は、CommonModule などの別のモジュールを作成できます。

たとえば、Angular 2 自体には、NgFor や NgIf ディレクティブなどの基本的な機能を提供する Common モジュールが同梱されています。

于 2016-09-28T19:56:01.720 に答える