Angular 文件夹结构和组件服务 [英] Angular folder structure and component services

问题描述

我已经阅读了很多关于 Angular 文件夹结构的文章.我仍然不清楚我们把组件服务放在哪里.组件之间的共享服务被置于共享之下.但是仅由组件使用的服务呢?通常，我将所有组件逻辑都放入一个服务中，并将仅与 UI 相关的代码留给组件.哪个更好用:

每个组件和它的服务放在同一个文件夹

<预><代码>.├── app.component.html├── app.component.ts├── app.module.ts├── app-routing.module.ts└── 店铺├── 客户│ ├── clients.component.html│ ├── clients.component.ts│ ├── clients.component.css│ └──clients.service.ts├── 订单│ ├── orders.component.html│ ├── orders.component.ts│ ├── orders.component.css│ └── 订单.service.ts├── shop.module.ts└── shop-routing.module.ts

或一个服务文件夹下一个模块的所有服务

<预><代码>.├── app.component.html├── app.component.ts├── app.module.ts├── app-routing.module.ts└── 店铺├── 客户│ ├── clients.component.html│ ├── clients.component.ts│ └── clients.component.css├── 订单│ ├── orders.component.html│ ├── orders.component.ts│ └── 订单.component.css├──服务│ ├── clients.service.ts│ └── 订单.service.ts├── shop.module.ts└── shop-routing.module.ts

解决方案

一切都是关于语义和可读性在我看来.仅以适合您和您的方便的方式进行操作不会使其成为一种好的做法.新手或替代开发人员应该很容易在短时间内找出您的方法，因此您可能应该专注于这一点.

要记住的提示:

1)服务应该易于关联，不应造成任何混淆

2) 路径导航不应变得复杂(例如:避免 ../../../../的情况)

3) 共享服务应该放在一个有意义的文件夹下

我会说你建议的第二种方法是遵循的共同标准.

参考:https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

I have read many articles about Angular folder structure. It is still not clear to me where do we put component services. Shared services between components are put under shared. But what about a service that is used only by a component? Usually I put all my component logic into a service and leave the component with code relevant only to UI stuff. Which one is better to use:

Each component and its service into the same folder

.
├── app.component.html
├── app.component.ts
├── app.module.ts
├── app-routing.module.ts
└── shop
    ├── clients
    │   ├── clients.component.html
    │   ├── clients.component.ts
    │   ├── clients.component.css
    │   └── clients.service.ts
    ├── orders
    │   ├── orders.component.html
    │   ├── orders.component.ts
    │   ├── orders.component.css
    │   └── orders.service.ts
    ├── shop.module.ts
    └── shop-routing.module.ts                 

or all services of a module under a services folder

.
├── app.component.html
├── app.component.ts
├── app.module.ts
├── app-routing.module.ts
└── shop
    ├── clients
    │   ├── clients.component.html
    │   ├── clients.component.ts
    │   └── clients.component.css
    ├── orders
    │   ├── orders.component.html
    │   ├── orders.component.ts
    │   └── orders.component.css  
    ├── services
    │   ├── clients.service.ts
    │   └── orders.service.ts
    ├── shop.module.ts
    └── shop-routing.module.ts

解决方案

It is all about Semantics and Readability in my opinion. Just doing it in a way that suits you and your convenience won't make it a good practice. It should be easy for a newbie or substitute developer to figure out your method in not time, so you should probably focus on that.

Tips to keep in mind:

1) Services should be easily relatable and shouldn't create any confusion

2) Path navigation shouldn't become complex ( for eg: avoid cases of ../../../../ )

3) Shared services should be placed under a meaningful folder

I would say that the second method you suggested is the common standard followed.

Refer : https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

这篇关于Angular 文件夹结构和组件服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！