Project structure in Angular application

File structure

Usual structure

We all know the basic file structure. Take all our services and put them in the services folder then take all models and put them in the model folder etc.

This structure is working for a small project when you have around 30 files. Now imagine a huge project with hundreds of files in it. It will be impossible to find what you need in the right folder.

Page structure

Every web project already has a structure. Let’s analyze a small website.

On every page, we use different components, services, etc. We can use a page structure in our folder structure.

The biggest benefit of this approach is page structure and folder structure are the same. That means we already know the location of a component.

The key part of this structure is the components. We build the structure around components. Mostly each page uses unique components. Each component uses a specific service, model, etc. We just need to put everything that we use in a component in one folder with the component.

Shared structure

If we need to use the same service or component in many places we should put this element in a shared folder.

The structure in the shared folder should be built around the business logic. For example, everything related to order logic should be put in the order folder. Inside this folder, we can build around components like in page structure.

Originally published at http://tomorrowmeannever.wordpress.com on May 9, 2022.