CODEWITHSUNDEEP
javascriptangularjsdirectory-structure
AndrewMcLagan
AndrewMcLagan

Reputation: 13987

AngularJS application file structure

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...

Upvotes: 30

Views: 42943

Answers (6)

Imrul
Imrul

Reputation: 3526

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

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

Upvotes: 49

Thịnh Phạm
Thịnh Phạm

Reputation: 2663

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

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

Upvotes: 0

marksyzm
marksyzm

Reputation: 5601

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...

Upvotes: 3

Shivali Patel
Shivali Patel

Reputation: 894

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!!

Upvotes: 9

user2845946
user2845946

Reputation: 1815

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.

Upvotes: 3

Alexander Puchkov
Alexander Puchkov

Reputation: 5973

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

Upvotes: 3

Related Questions