Угловой: много компонентов, использующих многоразовые услуги

Question

Я придерживаюсь руководства по стилю девиз Тодда для угловых. И в его подходе, и в подходе Джона Папы, они говорят, что у каждого компонента должны быть свои услуги, от которых они зависят.

Мой вопрос заключается в том, что происходит, когда у меня есть служба (например, getArticlesByStoreId), которую я хочу использовать из разных компонентов, которые не связаны друг с другом. Из этих руководств по стилю я пойму, что мне нужно переписать файл службы в оба компонента, но я думаю, что у меня может быть "sharedServices/" для всех этих общих служб, поэтому я не перезаписываю код.

Что бы вы, ребята, сделали в этом случае?

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

или же

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

Answer 1

Хорошо, поскольку ваш вопрос заключается в том, что мне делать, я бы сделал это... структурировать свое приложение по функциям (одна из структур папок Джона Папаса). Помните, что каждому приложению может потребоваться различная структура папок. Я использую приведенную ниже структуру папок для небольших и средних приложений. Опять же, ваши потребности приложения важны здесь. Насколько вырастет ваше приложение и насколько оно будет управляемым со структурой папок, которую вы будете использовать.

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

Мне нравится, чтобы структура папок была как можно более плоской. Полагаю, я прочитал в руководстве Джона Папаса, что структура папок не должна содержать более 2 вложенных папок. Вот статья, где он говорит это: https://johnpapa.net/angular-app-structuring-guidelines/

Answer 2

Я использую 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)