我正在努力根据最佳实践干净地构建我的AngularJS应用程序,其中包括将控制器和应用程序分成不同的脚本文件。
快速提问:我应该把工厂和服务放在哪里?我在工厂和工厂的背景下提出要求。将在单个控制器范围之外访问的服务,以及一些在单个控制器范围内的服务。
答案 0 :(得分:8)
更新:下面的即时答案不再正确。请参阅此答案的最新附录(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...