Folder Structure in AngularJS

This article shows how to layout a folder structure for a large and scaleable AngularJS application.

Folder Structure in AngularJS

Our Angular application is growing, and we want our structure to adapt. As our app grows, it becomes even more important to structure to make it easy to manage and maintain our app while it grows.

There are two approaches to making it easier to understand, maintain, and manage our application. The first one is sorting our files by their respective types.

For example, arranging Controllers in Controllers folder, Views in View folder, Services in Services folder.

On the left side, we are using Sort By Type, in which we have arranged our files by their types. This folder structure is useful for a smaller application with few views, controllers, and services.

But imagine if we have 30 or 40 controllers, views, and services, it will be very hard to find the right file we are looking for.

The second method (right side) is Sort By Feature, sorting our files by features; this is the best method to sort our folder structure for a larger and scalable application. This method is easy to understand, maintain and manage.

We have arranged our files by features on the right side of the image; we have made folders for each feature.

Each folder contains a view, service, and controller for a certain feature. It is very easy to find and edit the feature we are looking for.