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将过滤器，服务和指令放入单独的模块中，但这对我来说似乎有些愚蠢。根据应用程序的不同，我更倾向于按页面/路线组织模块。从性能角度来看，组织模块的方式并不重要，因此请选择最适合您项目的方法。

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

Answer 3

来自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

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

Angular - 构建模块的最佳实践

4 个答案: