Question

我已经阅读了许多有关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

Answer 1

我不认为文件夹结构有一个合适的大小，因为它完全自以为是，而且确实很不错。

有人说我们应该基于功能分组。

有人说我们应该基于相似性分组。

列表继续...

我记得Dan Abramov的指南中确实谈到了我们应该如何真正看待构建应用程序。可以找到Here。

简单但不简单，只是以您认为最好的方式工作。

Answer 2

我认为，这完全与语义和 可读性 有关。仅以适合您的方式进行操作，而您的方便并不会成为一种好的做法。对于新手或替代开发人员来说，在短时间内找出您的方法应该很容易，因此您应该专注于此。

要记住的提示：

1）服务应该易于关联并且不会造成任何混乱

2）路径导航不应变得复杂（例如：避免出现../../../../的情况）

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

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

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

Answer 3

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

角文件夹结构和组件服务

3 个答案: