Angular 文件夹结构和组件服务

pan*_*nis 6 angular-services angular-components angular

我已经阅读了很多关于 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                 
Run Code Online (Sandbox Code Playgroud)

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

.
??? 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
Run Code Online (Sandbox Code Playgroud)

小智 4

在我看来,这都是关于语义可读性的。仅仅以适合您和您方便的方式进行操作并不意味着它是一个好的实践。对于新手或替代开发人员来说,应该很容易在短时间内弄清楚您的方法,因此您可能应该关注这一点。

要记住的提示:

1)服务应该容易产生关联并且不应该造成任何混乱

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

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

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

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