Angular Directory Structure: MVVM and Container/Presentational

Angular Directory Structure: MVVM and Container/Presentational

Takahiro Iwasa
(岩佐 孝浩)
Takahiro Iwasa (岩佐 孝浩)
2 min read
Angular

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

Prerequisites

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.

Directory Structure

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.

Takahiro Iwasa
(岩佐 孝浩)

Takahiro Iwasa (岩佐 孝浩)

Software Developer at KAKEHASHI Inc.
Involved in the design, development, and operation of the prescription data collection platform