javascript - 我应该把 AngularJS 工厂和服务放在哪里？

Question

我正在努力根据最佳实践清晰地构建我的 AngularJS 应用程序，其中包括将 Controller 和应用程序分离到不同的脚本文件中。

快速提问:我应该把我的工厂和服务放在哪里？我问的是工厂和服务将在单个 Controller 范围之外访问以及有一些在单个 Controller 的范围内。

Answer 1

更新:下面的即时答案不再正确。请参阅此答案的最新附录(2015 年 3 月 1 日编写)。

明白了!根据 Brian Ford 关于 Building Huuuuuuuge Angular Apps 的文章，最佳实践似乎是在单独的文件中将服务和工厂连接到应用程序，如下所示:

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!如果您想知道的话，Brian Ford 是 AngularJS 团队的一员，所以他的回答似乎很合理。)

添加(2013 年 4 月 24 日)

这就在: Yeoman 是一个很棒的工具，可以为大型、功能性的 Angular 应用程序生成具有适当目录结构的应用程序。它甚至有 Grunt & Bower 打包!

附录(2015 年 3 月 1 日)

根据 a comment通过PaoloCargnin , Google 实际上推荐了一种不同的结构，详见 this document .结构应如下所示:

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