角项目结构最佳实践

Question

有人可以给我一些有关我的项目结构的建议吗？

-app
  -layout
     -home-layout
         -header
         -menu
         -content
            -detail-page
               -left-side
                  -left-side.component.html
                  -left-side.component.ts
               -right-side
             -detail-page.component.html
             -detail-page.component.ts
         -footer
     -pipes
     -widget-features
  -material-module
  -services
  -models

凭借实际的结构，站点地图的组织非常精明，我可以轻松地找到不同页面的内容。但是要获得模块化架构，我想重新组织结构。你能给我一些建议吗？

谢谢。

Answer 1

我喜欢这篇 Medium 文章中推荐的结构：Angular 文件夹结构，但经过一些修改，我们在我的公司得到了以下结果：

-app
  
 -shared
     -services
     -pipes
     -components
     -models

-modules
  -users
    -components
        -list
        -edit
    -models
        -users.model.ts
    -services
        -user-service.ts

    users.component.ts // this component should act like a container/smart component
    users.component.html
    users.module.ts
    users.route.ts

  -organisations
    -components
        -list
        -manage
    -models
        organisation.model.ts
    -services
        organisation.service.ts
        
    organisations.component.ts  // this component should act like a container/smart component
    organisations.component.html
    organisations.module.ts
    organisations.route.ts

-app.component.ts
-app.component.html
-app.module.ts
-app-routing.module.ts

这也提供了一种微服务架构，其中每个模块/功能都有自己的服务/依赖项。

Answer 2

请记住，没有适用于所有项目的通用方法或万能药方。

也就是说，您可以使用官方的Angular样式指南，该指南尝试遵循按功能分类的文件夹结构。

关于应用程序结构，您必须牢记LIFT：

做结构的应用程序，这样你可以大号 ocate代码很快，我 dentify代码一目了然，保持˚F lattest结构就可以了，牛逼 RY是干的

• 大号 ocate

一定要使定位代码直观，简单和快速。

• 我 dentify

命名文件，以便您立即知道它包含和代表的内容。

请使用文件名进行描述，并将文件内容仅保留到一个组件中。

避免使用包含多个组件，多个服务或混合的文件。

• ˚F LAT

尽可能保持平坦的文件夹结构。

当一个文件夹包含七个或更多文件时，请考虑创建子文件夹。

考虑将IDE配置为隐藏分散的，不相关的文件，例如生成的.js和.js.map文件。

• 牛逼 RY是干的

做干（不要重复自己）。

避免过于干燥而牺牲可读性。

根据显示的结构，一件事可能值得回顾：遵循该原则的文件夹嵌套级别Do keep a flat folder structure as long as possible。

这意味着您应该使结构尽可能平坦，这样可以更快地找到文件。但这不是必须的规则，而是应该的规则。因此，如果使结构更平坦不影响您当前拥有的逻辑组织，则您可能应该使它更平坦（否则不应该）。

请记住，这旨在改善开发过程：如果某项措施不能改善您的团队组织/生产率等，则不要使用它，如果有帮助，请使用它。

Answer 3

作为我的项目中的一种方式，我通常在项目中选择以下结构。模块组件和共享组件之间的区别在于，共享组件在所有模块中使用，但模块的组件之一仅与该模块相关。

共享组件示例：ModalComponent、LoaderComponent 等...

• 应用程序
  • 核
    • 服务
    • 拦截器
    • 守卫
    • 楷模
    • 帮手
  • 模块
    • x模块
      • 成分
      • 页面
    • y 模块
      • 成分
      • 页面
  • 共享
    • 成分
    • 标头
    • 页脚
    • 指令
    • 管道

Answer 4

该体系结构角度设计指南朝向被称为一个“功能模块”体系结构，其中特征被封装角模块（打字稿类与@ngModule装饰）内倾斜。

要尝试一下，请尝试使用Angular CLI运行一些generate命令。

例如，要创建包含一些封装的组件/服务的功能模块，请依次运行以下命令：

ng g m my-awesome-feature
ng g c my-awesome-feature/cool-component
ng g s my-awesome-feature/fancy-service

CLI将为您创建一个不错的模块体系结构，甚至自动在模块文件中声明您的组件！

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoolComponentComponent } from './cool-component/cool-component.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [CoolComponentComponent]
})
export class MyAwesomeFeatureModule { }

Answer 5

在我看来，我总是遵循类似的结构，它结合了基于 url 的结构和模块化架构的优点。它是这样的：

• 应用程序
  • _楷模
  • _服务
  • _共享
    • 共享组件
    • 共享模块
  • 家
  • 任何页面
    • 无论是什么特定的组件

基本上，在“_shared”中，您将放置在不同页面之间共享的所有组件和模块，例如页脚或材料模块。您必须在 _shared 模块中声明或导入它们，以及导出它们。

我假设所有的服务都是在 app 模块中共享和提供的，但当然你可以把它们放在 _shared 模块或任何其他孩子的模块中。

顺便说一句，我用实际的下划线命名它们，以便它们在资源管理器中冒泡。知道他们总是会在那里很方便。