Angular Directory Structure: MVVM and Container/Presentational

Takahiro Iwasa

Oct 29, 2021

2 min read

Angular

I adopted MVVM architecture and split components based on Container/Presentational pattern in my latest Angular project.

en.wikipedia.org

Model–view–viewmodel - Wikipedia

I strongly recommend reading Angular coding style guide before designing your Angular app. It not only covers directory structure but also a wide range of topics related to the coding style.

angular.io

Angular

I designed the directory structure as follows.

Divided into three main directories: core, features and shared

• core
  • Application foundation containing application-wide parts
  • Accessible from features but must not have references to them
• features
  • Each feature
  • Can have references to core and shared but must not be referred to from them
• shared
  • Shared parts containing not application-wide but feature-wide parts
  • Accessible from features but must not have references to them

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

Although the coding style guide recommends keeping directories as flat as possible, I created subdirectories because it was clear that I would need more than seven directories in each main directory.

Consider creating sub-folders when a folder reaches seven or more files.