I'm working to cleanly structure my AngularJS app according to best practices, which includes separating the controllers and app into different script files.

Quick question: where should I put my factories and services? I am asking in the context of having factories & services that will be accessed outside of the scope of a single controller as well as having some that are within the scope of a single controller.

I'm working to cleanly structure my AngularJS app according to best practices, which includes separating the controllers and app into different script files.

Quick question: where should I put my factories and services? I am asking in the context of having factories & services that will be accessed outside of the scope of a single controller as well as having some that are within the scope of a single controller.

• javascript
• html
• angularjs

1 Answer 1

Update: the immediate answer below is no longer correct. Please see the latest addendum (written March 1, 2015) to this answer.

Got it! According to Brian Ford's article on Building Huuuuuuuge Angular Apps, the best practice appears to be to connect services and factories to the app in a separate file, like so:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

(PSST! In case you're wondering, Brian Ford is part of the AngularJS team, so his answer seems pretty legit.)

Addition (April 24, 2013)

This just in: Yeoman is a fantastic tool for generating apps with the proper directory structure for big, functional Angular apps. It even has Grunt & Bower packed in!

Addendum (March 1, 2015)

According to a ment via PaoloCargnin, Google actually remends a different structure, as detailed by this document. The structure should look like this:

sampleapp/
    app.css
    app.js //top-level configuration, route def’ns for the app
    app-controller.js
    app-controller_test.js
    ponents/
        adminlogin/                                
            adminlogin.css //styles only used by this ponent
            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...