Angular Feature Structure

Представьте что вы решили сделать приложение в Angular, это будет простой список новостей...

Обычно когда мы говорим о проекте сгенерированном в Angular, подразумевается самая обычная структура по типу основных компонент фреймворка:

Вспомним какие бывают типы:

• Class
• Component
• Directive
• Enum
• Guard
• Interceptor
• Interface
• Module
• Pipe
• Service
• …

и т.д. и т.п.

По какой-то причине некоторые проекты имеют структуру, которая выглядит подобным же образом. Возможно существует множество других видов структуры приложения в Angular, рассмотрим один из них.

Пример структуры

Взглянем на типичное приложение, которое имеет следующую структуру:

- app
  - components
  - containers
  - directives
  - models
  - store
  - app-routing.module.ts

Такая структура не дает нам наглядной информации о том как устроен модуль внутри себя, необходимо смотреть файлы с роутами, "рыскать" по папкам. Чтобы сделать структуру более наглядной, можно попытаться выделить основные сущности нашего модуля, отделить их от общих компонент.

- app
  - feed - Главная страница, список новостей
  - post - Детальная страница новости
  - shared - Общие компоненты внутри приложения
  - app-routing.module.ts - Основные роуты приложения

Как можно определить, что является модулем который стоит оставить в корне папке, а что убрать в общие, распространяемые между модулями компоненты в shared. Для этого можно отталкиваться от нашего модуля с роутами. Т.е. у нас имеются следующие роуты в файле app-routing.module.ts:

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./feed/feed.module').then(m => m.FeedModule)
  },
  {
    path: ':id',
    loadChildren: () => import('./post/post.module').then(m => m.PostModule)
  }
];

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

Данная статья лишь одна из попыток построения более наглядной структуры приложения в Angular.

Пример проекта:
https://github.com/theruslanusmanov/angular-feature-structure

DEMO | Stackblitz:
https://stackblitz.com/github/theruslanusmanov/angular-feature-structure