问题
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...
回答1:
There are lot's of ways to organize your code. You can look in the following links
- Building Huuuuuge Apps with AngularJS
- Code Organization in Large AngularJS and JavaScript Applications
- AngularJS Best Practices: Directory Structure
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
回答2:
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!!
回答3:
See how these two starter projects organize files for a larger-scale application:
- https://github.com/angular-app/angular-app/
- https://github.com/joshdmiller/ng-boilerplate
回答4:
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.
回答5:
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...
回答6:
Check this, build your angular app with CoffeeScript, SCSS.
https://github.com/nhim175/modular-angular-skeleton/
来源：https://stackoverflow.com/questions/17461242/angularjs-application-file-structure