Angular - 构建模块的最佳实践 [英] Angular - Best practice to structure modules

问题描述

我是 angular 的新手，所以请多多包涵.前几天我正在阅读一篇文章/文档，其中强调了在您的应用中构建模块的最佳方式，但我只能粗略地记住它.

I'm new to angular, so please bear with me. I was reading an article/documentation the other day that highlighted the best way to structure modules in your app, and can only remember it loosely.

App.controllers
App.services
....

angular.module('App', [App.controllers, App.services ...);

此代码示例很可能不正确，但重点是将控制器、服务等组合在一个命名空间中.

This code sample is very likely to be incorrect, but the point was to group controllers, services etc together in one namespace.

有人可以扩展这种方法吗?

Could anyone expand upon this approach?

推荐答案

企业项目组织

我组织 angular 项目的方式是:

The way I organize my angular project is:

/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

使用项目需要的组织方式，不要选择会使项目不必要地复杂化的方式.

Use the way your project needs to be organized and don't choose the way that will unnecessarily complicate your project.

这篇关于Angular - 构建模块的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！