Angular 文件夹结构和组件服务

Angular folder structure and component services

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

每个组件及其服务都放在同一个文件夹中

.
├── 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                 

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

.
├── 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

我不认为有一个适合所有人的文件夹结构,因为它完全自以为是,而且真的很不错。

有人说我们应该根据特征分组。

有人说我们应该根据相似性分组。

列表还在继续...

我记得丹·阿布拉莫夫 (Dan Abramov) 的一篇指南确实谈到了我们应该如何真正看待应用程序的结构。可以找到Here.

简单但不简单,只做你认为最好的。

一切都是关于语义可读性 在我看来。仅仅以适合您和您的方便的方式来做并不会成为一个好习惯。新手或替代开发人员应该很容易很快弄清楚您的方法,因此您应该专注于此。

要记住的提示:

1) 服务应该容易产生共鸣,不应造成任何混淆

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

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

我会说你建议的第二种方法是遵循的通用标准。

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

Personally, I'll prefer this architecture, Since everything related to clients is in client module.It is easy for someone new to get this architecture and it is predeicatble.

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

Apart from this, the architecture is for own ease...

My current architecture is like 

--app.component.html
--app.component.ts
--app.module.ts
--app-routing.module.ts
--pages
----- About
-------- Component
----------- Has Details
--------------Component.ts
-----------------Html
--------- Service
------------All services here
----- Contact US
-------- Component
----------- Details
--------------Component.ts
-----------------Html
-------- Models
------------Model.ts
--------- Service
------------All services here 
--Theme
---- Common components

我更喜欢将服务与组件分开,因为对于大多数应用程序而言,组件的包结构可能会直观地反映它们在页面上的位置。对于服务,您可能希望“按 domain/feature”打包 https://medium.com/sahibinden-technology/package-by-layer-vs-package-by-feature-7e89cde2ae3a 当您还必须将服务塞入相同的文件夹结构时,需要自己的文件夹的组件也无助于导航。