我是棱角分明的新人，所以请耐心等待我。前几天我正在阅读一篇文章/文档，重点介绍了在应用程序中构建模块的最佳方法，并且只能松散地记住它。
App.controllers
App.services
....
angular.module('App', [App.controllers, App.services ...);
此代码示例很可能不正确，但重点是将控制器，服务等组合在一个命名空间中。
有人可以扩展这种方法吗？
答案 0 :(得分：38)
企业项目组织
我组织角度项目的方式是：
/app
/img # application-level images
/css # application-level css styles
/js # application-level javascripts
/modules # application modules
/gallery # independent module with its own infrastructure
/controllers # gallery module's controllers
/css # gallery module's css styles
/directives # gallery module's directives
/img # gallery module's images
/filters # gallery module's filters
/services # gallery module's services
/views # gallery module's views (htmls)
/ ... # other gallery module component folders
galleryMod.js # the module itself
/user # independent module with its own infrastructure
/controllers # user module's controllers
/ ... # other user module component folders
userMod.js # the module itself
/ ... # other modules
/ ... # other application-level folders
index.html
替代企业项目组织（简化）
/app
/img # application-level images
/css # application-level css styles
/js # application-level javascripts
/modules # application modules
/gallery # independent module with its own infrastructure
/js # gallery module's javascripts (includes
# services.js, directives.js, filters.js, ...)
/css # gallery module's css styles
/img # gallery module's images
/views # gallery module's views (htmls, "partials")
/ ... # other gallery module component folders
galleryMod.js # the module itself
/user # independent module with its own infrastructure
/controllers # user module's controllers
/ ... # other user module component folders
userMod.js # the module itself
/ ... # other modules
/ ... # other application-level folders
index.html
中间项目组织（没有模块）
/app
/img # application's images
/css # application's css styles
/controllers # application's controllers
/directives # application's directives
/filters # application's filters
/services # application's services
/views # application's views (htmls)
/ ... # other component folders
index.html
简单的项目组织（就像种子一样）
/app
/img # application's images
/css # application's css styles
/js # application's javascripts (includes
# services.js, directives.js, filters.js, ...)
/views # application's views (htmls), e.g. partials
/ ... # other component folders
index.html
使用项目需要组织的方式，不要选择不必要地使项目复杂化的方式。
答案 1 :(得分：16)
这种方法由Angular Seed提供，它只是构建应用程序结构的方法之一。它对于调试非常有用：如果您在某些服务中看到错误，请转到services.js并抓住它。
Brain Ford在他的文章Building Huuuuuge Apps with AngularJS中写道：
唯一剩下的问题是如何将控制器，指令，服务和过滤器细分为模块。 Angular Seed将过滤器，服务和指令放入单独的模块中，但这对我来说似乎有些愚蠢。根据应用程序的不同，我更倾向于按页面/路线组织模块。从性能角度来看，组织模块的方式并不重要，因此请选择最适合您项目的方法。
他还提出了不同的app结构，其中每个指令或服务都是一个单独的文件（参见上面的文章）。
答案 2 :(得分：12)
来自John Pappa's AngularJS Style Guide。这正成为大型应用的“角度标准结构”。
逐个功能的文件夹结构：创建以其所代表的功能命名的文件夹。当文件夹增长到包含7个以上的文件时，请考虑为它们创建一个文件夹。您的阈值可能不同，因此请根据需要进行调整。
为什么？：开发人员可以找到代码，一目了然地识别每个文件代表的内容，结构是否平坦，并且没有重复或冗余的名称。
为什么？：LIFT指南都包含在内。
为什么？：通过组织内容并使其与LIFT指南保持一致，帮助减少应用程序的混乱。
为什么？：当存在大量文件（10+）时，使用一致的文件夹结构更容易找到它们，而在平面结构中更难以找到它们。
/**
* recommended
*/
app/
app.module.js
app.config.js
app.routes.js
components/
calendar.directive.js
calendar.directive.html
user-profile.directive.js
user-profile.directive.html
layout/
shell.html
shell.controller.js
topnav.html
topnav.controller.js
people/
attendees.html
attendees.controller.js
speakers.html
speakers.controller.js
speaker-detail.html
speaker-detail.controller.js
services/
data.service.js
localstorage.service.js
logger.service.js
spinner.service.js
sessions/
sessions.html
sessions.controller.js
session-detail.html
session-detail.controller.js
答案 3 :(得分：1)
这种文件夹结构使我能够缩放Angular并通过理解和分组它们的整体功能来快速找到每个文件。
/app
/features
/product #one folder per entity
/get-products component
/create-product component
/update-product component
/delete-product component
/state #ngrx state
/actions
/effects
/reducers
/selector
index
/models
auth
user
product
# additional.model.ts
/services
backend service
api service
auth service
firebase service
auth-guard service
# additional.service.ts
/store
/actions
/effects
/reducers
app-store
index
/utilities
router.animation
customAngularMaterial module
uuid
validator
pipe
directive
# additional utilities
/views
/admin component
/auth component
/header component
/footer component
/navbar component
/profiles component
/home component
/contactus component
#additional views
app-routing.module
app.component
app.module
/assets
/css #custom styles.css
/icons #svg files
/favicon.ico
/images
#additional assets
main
index #material icons
styles #angular material prebuilt theme