您如何组织Angular应用的代码？ （代码组织模式）

Question

我正在为Angular应用中的最佳代码结构模式而苦苦挣扎。

我有一个包含更多模块的项目；每个模块都有组件测试等。

/app
    /commons
        /components
        /constants
            constant-1.constant.ts
            constant-2.constant.ts
            constant-3.constant.ts
            constant-4.constant.ts
            ...
        /helpers
            helper-1.helper.ts
            helper-2.helper.ts    
            ...
    /module-name-1
         /commons
             /helpers
             /constants
         /component-name-1
            /component-name-subcomponent-1
               component-name-subcomponent-1.component.ts
         /component-name-2
            component-name-subcomponent-2.component.ts   
         module-name-1.module.ts
         module-name-1-routing.module.ts

这就是我的代码组织的样子。我想问你，你如何处理一些作为常量/函数/帮手的共享/公共部分……例如常量-我尝试将共享常量保存在模块路径中的一个文件夹中，或者在模块之间共享（如果模块之间共享）。但是有时候，我只在一个组件或其中两个组件中使用常量，然后我在组件树后面跟随一个很远的共享文件夹，在其中定义了两行代码。接口也是如此-我将所有接口都放在一个文件夹中，但是有时接口仅在一个组件中使用，有时在其子组件中使用。您如何组织它？大型项目的最佳做法是什么？

我想知道一个commons /文件夹的应用程序内路由，其结构与其余的app / module / component /相似，并且保持与组件相关的接口和常量，并保持与它们的通用路径-但是当我尝试它-也很混乱，并且没有有用的工具来管理它。

有什么建议吗？

Answer 1

这个问题会有很自以为是的答案，但根据
角度样式指南应该具有这样的角度应用架构：

|-- app
         |--Feature Modules Folder
           |-- Feature-1 Module  // comprising of feature-1 components
               |-- [+] components
               |-- [+] services // service provide by feature module
               |-- feature-1-routing.module.ts
               |-- feature-1.module.ts
         |-- Core Module Folder // all core functionality and singleton services 
           which will be imported by root module and consist of no exports
           |-- [+] authentication
           |-- [+] footer
           |-- [+] guards
           |-- [+] http
           |-- [+] interceptors
           |-- [+] mocks
           |-- [+] services
           |-- [+] header
           |-- core.module.ts
           |-- logger.service.ts
         |-- Shared Module Folder // this modules containes components 
              etc which are used multiple times across the app, Shared 
              Module is imported by Features Module
              |-- [+] components
              |-- [+] directives
              |-- [+] pipes
              |-- [+] models
              |-- SharedModule.module.ts
         |-- [+] configs
    |-- assets
         |-- scss/ css
              |-- styles.scss/styles.css

Answer 2

我个人喜欢这样的结构：

/app
    /components
        /page-components
            /home
            /contact
        /page-element-components
            /form
               ...
               ...
            /pop-ups
               ...
               ...
            /wizards
               ...
    /Services
        /global-services
            ...
            ... 
        /http-services
            ...
            ... 
    /Modules
        /app.module.ts
        /lazy-modules
            ...
            ... 
        /shared-modules
            ...
            ... 
    /Utils
        /helpers
            ...
            ... 
        /form-validators
        /pipes
    /Assets
        /global-styling
        /icons