Angular ディレクトリ構成: MVVM および Container/Presentational
Takahiro Iwasa
3 min read
Angular
最近 Angularプロジェクトで、 MVVM アーキテクチャを採用し、 Container/Presentational に基づいてコンポーネントを分割しました。 備忘録として残しておきます。
前提条件
URL Copied!
Angular アプリケーションを設計する前に、 Angular coding style guide を読むことを強くお勧めします。 これはディレクトリ構成だけでなく、コーディングスタイルに関連する広範なトピックも網羅しています。
ディレクトリ構成
URL Copied!
以下のようなディレクトリ構成にしました。
3つの主要ディレクトリ core
, features
, shared
に分割しています。
core
- アプリケーション全体の共通パーツ を含むアプリケーションの基盤
features
からアクセス可能ですが、features
への参照は持ちません。
features
- 各機能
core
とshared
への参照を持つことはできますが、それらからの参照はできません。
shared
- アプリケーション全体ではなく、機能レベルで 共有するパーツ
features
からアクセス可能ですが、features
への参照は持ちません。
src/
|-- app/
| |-- core/
| | |-- constants/
| | |-- decorators/
| | |-- guards/
| | |-- interceptors/
| | |-- interfaces/
| | | `-- api/
| | |-- models/
| | |-- resolvers/
| | |-- services/
| | | `-- api/
| | `-- validators/
| |-- features/
| | |-- auth/
| | | |-- password-reset/
| | | |-- sign-in/
| | | |-- sign-up/
| | | |-- verify/
| | | |-- auth.module.ts
| | | |-- auth.service.ts
| | | `-- auth-routing.module.ts
| | `-- .../
| |-- shared/
| | |-- components/
| | |-- directives/
| | | |-- attribute/
| | | `-- structural/
| | |-- forms/
| | | |-- input/
| | | |-- select/
| | | `-- .../
| | |-- pipes/
| | `-- services/
| |-- app.component.ts
| |-- app.module.ts
| `-- app-routing.module.ts
|-- assets/
|-- environments/
|-- styles/
|-- tests/
|-- theme/
`-- global.scss
Coding style guide はディレクトリをできるだけフラットに保つことを推奨していますが、各メインディレクトリに7つ以上のディレクトリが明らかに必要だったので、サブディレクトリを作成しました。
Consider creating sub-folders when a folder reaches seven or more files.