角度：许多组件使用可重用服务答案

【问题标题】：angular: many components using reusable service角度：许多组件使用可重用服务
【发布时间】：2017-04-21 17:04:18
【问题描述】：

我正在关注 todd motto's styleguide 的角度。在他的方法中，以及在 john papa 的方法中，他们说每个组件都应该有自己依赖的服务。

我的问题是，当我有一项服务（例如 getArticlesByStoreId）我想从彼此不相关的不同组件中使用时会发生什么。从这个样式指南中，我了解到我必须将我的服务文件重写为两个组件，但我认为我可以为所有这些共享服务提供一个“sharedServices/”，这样我就不会最终重写代码。

在这种情况下你们会怎么做？

app/  
|--components/  
   |--comp1/  
      |--service.js  
   |--comp2/  
      |--service.js

或

app/  
|--components/  
   |--comp1/  
   |--comp2/  
|--services/  
   |--sharedServices/
      |--service.js

【问题讨论】：

标签： angularjs service angularjs-1.5 component-based

【解决方案1】：

我在大型项目中使用 Angular 1.5 和组件架构。我们有以下结构，到目前为止一切都很好。

└─ src/app/ ├─ app.js # app entry file ├─ app.html # app template ├─ common/ ├─ common.js # common entry file └─ services/ # common services └─ components/ # where components live ├─ components.js # components entry file └─ home/ # home component ├─ home.js # home entry file (routes, configurations etc) ├─ home.component.js # home component definition ├─ home.controller.js # home controller ├─ home.service.js # home service ├─ home.scss # home styles ├─ home.html # home template └─ home.spec.js # home specs (for entry, component, and controller)

【讨论】：

【解决方案2】：

好的，既然您的问题是我会做什么，我会这样做...按功能（John Papas 文件夹结构之一）构建我的应用程序。请记住，每个应用程序可能需要不同的文件夹结构。我将以下文件夹结构用于中小型应用程序。同样，您的应用程序需求在这里很重要。使用您将使用的文件夹结构，您的应用会增长多少以及它的可管理性。

app/  
    |--core
        |--login.service.js
    |--feature1/  
        |--feature1.component.js
        |--feature1.service.js  
    |--feature2/  
        |--feature2.service.js

我希望我的文件夹结构尽可能平坦。我相信，我在 John Papas 中阅读了关于文件夹结构的指南，其中嵌套文件夹不超过 2 个。这是他所说的文章：https://johnpapa.net/angular-app-structuring-guidelines/

【讨论】：