angularjs - Angular - 构建模块的最佳实践

Question

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

App.controllers
App.services
....

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

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

任何人都可以扩展这种方法吗？

Answer 1

企业项目组织

我组织我的角度项目的方式是：

/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

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

Answer 2

这种方法由Angular Seed提供，它只是组织应用程序结构的方法之一。它对调试很有用：如果您在某些服务中发现错误，您可以去services.js捕获它。

Brain Ford 在他的文章Building Huuuuuge Apps with AngularJS 中写道：

剩下的唯一问题是如何将控制器、指令、服务和过滤器细分为模块。Angular Seed将过滤器、服务和指令放入单独的模块中，但这对我来说似乎有点傻。根据应用程序，我更倾向于按页面/路线组织模块。从性能的角度来看，你如何组织你的模块并不重要，所以选择最适合你项目的方法。

他还提出了不同的应用程序结构，其中每个指令或服务都是一个单独的文件（参见上面的文章）。

Answer 3

来自John Pappa 的 AngularJS 样式指南。这正在成为大型应用程序的“Angular 标准结构”。

按功能的文件夹结构：创建以其所代表的功能命名的文件夹。当一个文件夹增长到包含超过 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  

Answer 4

这种文件夹结构允许我扩展 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