AngularJS - Recommended Folder Structure

Usually at starting of the project, we don’t spend much time for project folder structure. This scenario works nicely in short term for rapid development, but in long term it creates lot of duplicate code issue and maintainability issue.

See the following two different kinds of folder structures

Normal folder structure:

projectapp/                        è this is the root folder

………………… index.html    è used main landing page

………………… app.js   è used for loading angular module, configuration, routes and etc.

…………………. controllers/         è used for specifying application required controllers

…………………………… loginController.js

…………………………… signupController.js

……………………………dashboardController.js

………………….directives/                è used for creating all re-useable html directives

……………………………loginInfoDirective.js

……………………………menuDirective.js

……………………………headerDirective.js

…………………………… footerDirective.js

………………….services/       è used for creating data services

………………………… userinfoService.js

………………………… itemService.js

………………….js/                  è used for specifying all third partly libraries

…………………........ jquery.js

……………………… angular.js

……………………… ngstorage.js

……………………… lodash.js

………………….templates/  è used for specifying all required html views

……………………….. logintemplate.html

……………………….. signuptemplate.html

………………………… dashboardtemplate.html

The above structure is very common and also has some amount of separation. Here mainly we kept all views in one folder, all external libraries in one folder and all controllers in one folder.

The above structure looks good for smaller project. But in larger application it is not developer friendly structure. Take a simple example for modifying login page; we need to find out login controller, directive, service and login view to make necessary change.

Recommended folder structure:

projectapp/                         è this is the root folder

………………… index.html       è used main landing page

………………… app.js                è used for loading angular module and configuration.

…………………. app.routes.js  è used for specifying angular routes/states

…………………. app.constants.js è used for specifying application constants

…………………. app.messages.js è used for specifying validation messages, alerts

…………………. components/      è used for specifying page components

…………………………. login/

……………………………… loginController.js

……………………………… loginService.js

……………………………… loginTemplate.html

…………………………. dashboard/

…………………………………… dashboardController.js

…………………………………… dashboardService.js

…………………………………… dashboardTemplate.html

………………….shared/                        è used for creating all re-useable components

…………………………. header/

……………………………….. headerDirective.js

.................................................. headerController.js

……………………………….. headerTemplate.html

…………………………. menu/

………………………………. menuDirective.js

………………………………. menuTemplate.html

………………….assets/                 

…………………………… img/          è used for specifying application images

…………………………………. favicon.png 

…………………………… css/           è used for specifying application styles

…………………………………. site.css

…………………………………. bootstrap.css

…………………………… libs/          è used for specifying all third partly libraries

…………………………………. jquery.js

…………………………………. angular.js

…………………………………. ngstorage.js

…………………………………. lodash.js

………………………….. js/               è used for specifying custom JavaScript files 

The above structure shows modularized approach to build angular application. Here, we kept all routes in app.routes.js, all constants in app.constants.js, all login related functionality into login component.

Happy Coding :)