Zenn
🔥

Angular の シンプルなディレクトリルール

2022/04/03に公開
Angular
tech

Angular におけるシンプルなディレクトリルール

モジュール開発をする前提です。

app 以下のルール

app ディレクトリの配下は 以下のような構成とします。

app
  guards/
  routed/
  service/ 
  shared/
  store/
  app.component.html/scss/ts
  app.module.ts
  app-routing.module.ts
  • guards : app-routing.module.ts 内で用いるグローバルなガードを記述する。
  • routed : 遅延ロードされる子ルートを持つ、フューチャーモジュールを記述する。
  • service : injectedIn: "root" のサービスが許容される唯一の場所。
  • shared : ルートを持たないフューチャーモジュールを記述する。
  • store : NGXS などのグローバルなストアファイル

app.module.ts における import では、shared 内に格納されたモジュールのみが読み込みの対象となり、
遅延ロードされるべき routed 内のモジュールは どこからも import されません。

Routed なフューチャーモジュールのルール

以下は mypage フューチャーモジュールのコード例です。

app/routed/mypage/
  pages/
    index-page/
      index-page.component.html/scss/ts
    profile-page/
      profile-page.component.html/scss/ts
  widgets/
    profile-form/
      index-page.component.html/scss/ts
  service/ 
    some-deal.service.ts
  mypage.module.ts
  mypage-routing.module.ts
  • フィーチャーモジュールのファイル名は、格納するフォルダ名を用いて {フォルダ名}.module.ts とします。
  • Route のモジュールは、モジュールのフォルダルートに flat で作成し、{フォルダ名}-routing.module.ts とします。
  • コンポーネントのうち、ルートに紐付けられるコンポーネントは pages フォルダに配置します。
  • ルートに紐付けられるコンポーネントは、その url path を - で区切り、末尾に -page を付与して {url}-page.component.ts とします。
  • "" のトップ path に紐付けられるコンポーネントは index-page.component.ts とします。
  • コンポーネントのうち、ルートに紐付かないコンポーネントは、widgets フォルダに配置します。
  • モジュール内で利用されるサービスは、 service フォルダに配置します。
  • service フォルダ内のserviceは、injectedIn: "root" を使わず、injectedIn: {module} で運用します。

コンポーネントの命名に -page を付与するのは、エディタ上でファイル名だけを見て、ルートに紐づくファイルかどうかをわかりやすくするためです。

routed な フィーチャーモジュールは、遅延ロードを前提として運用されるため、service のファイルで injectedIn: "root" を利用することを禁止しています。

参考

モジュールの種別に関する表現は、下記の公式資料を参考にしています。

https://angular.jp/guide/module-types

Discussion