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

Another good reference could be yeoman generator for angular https://github.com/yeoman/generator-angular — Daniel, Feb 10 '14 at 09:20
hope it will helpful http://tech-blog.maddyzone.com/javascript/code-organization-angularjs — Rituraj ratan, Sep 17 '14 at 12:33
Hope this leads you somewhere. https://github.com/jofftiquez/angular-app-starter-pack — jofftiquez, Oct 28 '15 at 13:55

Imrul · Accepted Answer · 2018-03-12T06:57:14.963

49

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

edited Mar 12 '18 at 06:57

answered Jul 04 '13 at 04:23

Imrul

3,456
5
32
27

organizing things by type is good for small projects, but it doesn't help if you want to borrow some of the features that you wrote in the past. That's where the origination by functionality, ex. module, comes into play. I really enjoy reading the second article in your list. Thanks for sharing. – windmaomao Oct 21 '14 at 21:12
Your third link is a 404 in 2018. – ale10ander Mar 02 '18 at 18:27
@ale10ander Thanks for pointing that out. The structure was for Angular 1, will update my Answer. – Imrul Mar 12 '18 at 06:55

score 9 · Answer 2 · answered Mar 16 '14 at 20:00

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

Check out my answer below, backs you up nicely: http://stackoverflow.com/a/24829399/892955 — marksyzm, Jul 18 '14 at 16:04

score 3 · Answer 3 · answered Jul 24 '13 at 20:56

3

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

answered Jul 24 '13 at 20:56

Alexander Puchkov

5,913
4
34
48

user2845946 · Answer 4 · 2014-03-08T14:20:19.977

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.

score 3 · Answer 5 · answered Jul 18 '14 at 16:03

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

score 0 · Answer 6 · answered Dec 05 '14 at 15:57

0

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

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

answered Dec 05 '14 at 15:57

Thịnh Phạm

2,528
5
26
39

AngularJS application file structure

6 Answers6

Linked