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

2303 ワード

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} で運用します。