javascript - Where should I put AngularJS Factories & Services? - Stack Overflow

admin管理员组

文章数量:1356472

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

Share Improve this question Follow asked Apr 5, 2013 at 16:56 Jordan ThornquestJordan Thornquest 1,13622 gold badges1212 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptWhere should I put AngularJS Factories amp ServicesStack Overflow