44

这是我的 Angular 项目的目录结构。Angular 应用程序可以通过许多不同类型的组件变得庞大。组织 Angular 应用程序的最佳实践是什么？

-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

有了实际的结构，站点地图组织就很清晰了，我可以很方便的找到不同的页面内容。

但是要获得模块化架构，我想重新组织结构。

请给我一些建议好吗？

4

6 回答 6

44

请记住，这没有灵丹妙药，也没有适用于所有项目的通用配方。

也就是说，您可以使用官方的Angular Style Guide，它试图遵循Folders-by-feature structure。

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

构建应用程序，以便您可以快速找到代码，我一目了然地识别代码，尽可能保持Flattest结构，并尝试保持DRY

  • 定位_

一定要让定位代码直观、简单、快速。

  • 我识别

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

请务必使用文件名进行描述，并将文件的内容保留在一个组件中。

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

  • 平_

尽量保持扁平的文件夹结构。

当文件夹达到七个或更多文件时，请考虑创建子文件夹。

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

  • 尽量保持干燥

一定要干燥（不要重复自己）。

避免过于干燥以至于牺牲了可读性。

根据您显示的结构，可能值得回顾的一件事是遵循“尽可能长时间保持扁平文件夹结构”原则的文件夹嵌套级别。

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

请记住，这旨在改进开发过程。如果某些东西没有改善您的团队组织/生产力等，那么不要使用它，如果它有帮助，请使用它。

于 2018-10-22T16:18:49.290 回答
26

我喜欢这篇 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

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

于 2020-07-03T01:21:17.473 回答
12

Angular 风格指南所倾向于的架构被称为“功能模块”架构，其中功能被封装在 Angular 模块中（带有 @NgModule 装饰器的 TypeScript 类）。

要感受一下，请尝试使用 Angular CLI 运行一些生成命令。

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

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 { }
于 2018-10-22T16:23:35.233 回答
7

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

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

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

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

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

于 2018-10-22T16:15:51.570 回答
1

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

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

  • 应用程序
    • 核
      • 服务
      • 拦截器
      • 警卫
      • 楷模
      • 帮手
    • 模块
      • x 模块
        • 成分
        • 页面
      • 模块
        • 成分
        • 页面
    • 共享
      • 成分
      • 标题
      • 页脚
      • 指令
      • 管道
于 2021-12-29T21:56:10.783 回答
1

这是来自 medium 的整篇文章，您将在其中找到对您的 Angular 项目有用的建议。

  1. 使用共享模块：简而言之，在使用共享模块时：务必声明组件、管道、指令并导出它们。务必导入 FormsModule、ReactiveFormsModule 和您需要的其他（第 3 方）模块。务必将 SharedModule 导入任何其他功能模块。不要在 SharedModule 中提供应用范围的单例服务。相反，将它们移动到 CoreModule。不要将 SharedModule 导入 AppModule。

  2. 使用核心模块：简而言之，当使用核心模块时：请导入应该在您的应用程序中实例化一次的模块。务必在模块中放置服务，但不要提供它们。不要声明组件、管道、指令。不要将 CoreModule 导入到 AppModule 以外的任何模块中。

  3. 简化您的导入：

  4. 缩短你的相对路径

  5. 使用 SCSS 变量

于 2021-06-16T13:48:26.340 回答