AngularJS application file structure

Question

On a large AngularJS application having all my controllers in a single "controllers.js" file seems a little un-maintainable to me. Is there a better way to do this such as:

\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js

and that also applies for filters, services, directives etc...

Answer 1

There are lot's of ways to organize your code. You can look in the following links

• Building Huuuuuge Apps with AngularJS
• Code Organization in Large AngularJS and JavaScript Applications
• AngularJS Best Practices: Directory Structure

You can follow their standard or you can make your own.

Try to follow the following guidelines:

• Contollers shouldn't be too long, if it's too long then it is handling multiple responsibilities
• Try to use Directives and Services in your system to reuse your code/logic
• Directives are the most powerful things in Angualrjs, try to get maximum advantage of it.
• Write Tests; even better you can try to practice TDD with AngularJS

Answer 2

You can manage it like module wise!!

For example , take user view , you make one directory, here its name is user!!

user // directory , now put all controller ,service and directive file into it !! 

-- userController.js    //  controller file 

-- userService.js       // service file

-- userDirective.js     // directive file

-- views                // make directory, and put all html file regarding that module into this

  --users.html          // html file

Hope this will help you!!

Answer 3

See how these two starter projects organize files for a larger-scale application:

• https://github.com/angular-app/angular-app/
• https://github.com/joshdmiller/ng-boilerplate

Answer 4

You may wish to have a look at this community-driven guide.

The guide describes best practices for organizing the directory structure of a large AngularJS application.

It also makes recommendations on naming and structuring AngularJS modules, controllers, directives, filters and services.

It's also worth it to check out a tool like Lineman.js with the AngularJS application template.

For enterprise AngularJS projects, you may wish to look at this kickstarter which is based on ng-boilerplate.

Answer 5

There's a nice document out there from Google's own team that back up Shivali's example: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

Something like this:

sampleapp/
    app.css
    app.js                top-level configuration, route def’ns for the app
    app-controller.js
    app-controller_test.js
    components/
    adminlogin/                                
            adminlogin.css                styles only used by this component
            adminlogin.js              optional file for module definition
            adminlogin-directive.js
            adminlogin-directive_test.js        
                    private-export-filter/
                            private-export-filter.js
                            private-export-filter_test.js
    userlogin/
    somefilter.js
    somefilter_test.js
    userlogin.js
    userlogin.css                
    userlogin.html                
    userlogin-directive.js
    userlogin-directive_test.js
    userlogin-service.js
    userlogin-service_test.js                
            index.html
    subsection1/
    subsection1.js
    subsection1-controller.js
                    subsection1-controller_test.js
                    subsection1_test.js                         
                    subsection1-1/                        
                            subsection1-1.css
                            subsection1-1.html
                            subsection1-1.js
                            subsection1-1-controller.js
    subsection1-1-controller_test.js
                    subsection1-2/                        
            subsection2/
    subsection2.css
    subsection2.html
    subsection2.js
    subsection2-controller.js
    subsection2-controller_test.js
            subsection3/
                    subsection3-1/
    etc...

Answer 6

Check this, build your angular app with CoffeeScript, SCSS.

https://github.com/nhim175/modular-angular-skeleton/