Когда веб-разработчик начинает писать проект "с нуля", он не особо задумывается, что будет с проектом через год-два, какова будет общая численность разработчиков на текущем проекте, как дописывать новый функционал в будущем, да вообще в целом ориентироваться в проекте.
Я хотел бы подчеркнуть, что методы, используемые в этой статье, очень применимы для моего варианта использования и ни в коем случае не должны строго соблюдаться. Структура папок проекта будет меняться в зависимости от широкого спектра факторов. Но если вам интересна структура, в которой основное внимание уделяется многомодульной архитектуре с большим акцентом на масштабирование, это то, что Вам нужно.
|-- app
|-- core
|-- [+] animations
|-- [+] components
|-- [+] configs
|-- [+] constants
|-- [+] enums
|-- [+] functions
|-- [+] guards
|-- [+] interceptors
|-- [+] interfaces
|-- [+] models
|-- [+] preloader
|-- [+] resolvers
|-- [+] services
|-- [+] settings
|-- [+] types
|-- core.module.ts
|-- index.ts
|
|-- modules
|-- admin
|-- [+] components
|-- admin-routing.module.ts
|-- admin.module.ts
|-- authentication
|-- [+] components
|-- authentication-routing.module.ts
|-- authentication.module.ts
|-- private
|-- [+] pages
|-- private-routing.module.ts
|-- private.module.ts
|-- public
|-- [+] pages
|-- public-routing.module.ts
|-- public.module.ts
|
|-- shared
|-- [+] components
|-- [+] directives
|-- [+] pipes
|
|-- store
|-- [+] store one
|-- [+] store two
|-- index.ts
|-- selectors.ts
|-- state.ts
|-- store.module.ts
|
|-- assets
|-- [+] css
|-- [+] fonts
|-- [+] icons
|-- [+] images
|-- [+] js
|
|-- environments
|-- environment.dev.ts
|-- environment.interface.ts
|-- environment.prod.ts
|-- environment.ts
|
|-- scss
|-- [+] components
|-- [+] elements
|-- _fonts.scss
|-- _main.scss
|-- _mixins.scss
|-- _reset.scss
|-- _variables.scss
|-- style.scss
Руководство по стилю (Angular Style Guide)
Логическое место, чтобы начать искать лучшие практики в Angular - Angular Style Guide. Руководство предлагает объективный взгляд на синтаксис, соглашения и структуру приложения.
Ключевыми руководящими принципами, которые действительно выделялись для меня, были «Структурируйте приложение таким образом, чтобы вы могли быстро находить код» и «Имейте краткосрочный взгляд на реализацию и долгосрочное видение. Начните с малого, но имейте в виду, куда движется приложение». Это означает, что вы не должны привязываться к одной структуре, поскольку она сильно изменится в зависимости от проекта.
Основной модуль (Core Module)
CoreModule берет на себя роль корневого AppModule, но не является модулем, который загружается Angular во время выполнения. Модуль CoreModule должен содержать одноэлементные сервисы (как это обычно и бывает), универсальные компоненты и другие функции. Чтобы предотвратить повторный импорт основного модуля в другое место, Вы также должны добавить для него защиту в конструкторе основного модуля.
|-- core
|-- [+] animations
|-- [+] components
|-- [+] configs
|-- [+] constants
|-- [+] enums
|-- [+] functions
|-- [+] guards
|-- [+] interceptors
|-- [+] interfaces
|-- [+] models
|-- [+] preloader
|-- [+] resolvers
|-- [+] services
|-- [+] settings
|-- [+] types
|-- core.module.ts
|-- index.ts
Компоненты header и footer это глобальные компоненты, статически используемые во всем приложении. Эти компоненты будут отображаться практически на каждой странице Вашего приложения.
|-- components
|-- header
|-- header.component.ts|html|scss|spec.ts
|-- footer
|-- footer.component.ts|html|scss|spec.ts
Папка services обрабатывает такие вещи, как вызовы http из нашего приложения, работа с хранилищем, вспомогательные общие сервисы. Например файл server.service.ts, отвечает за HTTP-вызовы, то есть чтобы все обращения к api проходили в одном месте. Файл store.service.ts содержит только функции обращения к хранилищу данных.
|-- services
|-- server.service.ts|spec.ts
|-- store.service.ts|spec.ts
В Angular 4.x появилась долгожданная функция для обработки http-запросов - интерфейс HttpInterceptor. Это позволяет нам отлавливать и изменять запросы и ответы от наших вызовов API. Папка interceptors - это коллекция перехватчиков, которые я нахожу особенно полезными.
|-- interceptors
|-- api-prefix.interceptor.ts
|-- error-handler.interceptor.ts
|-- http-token.interceptor.ts
|-- browser.interceptor.ts
|-- server.interceptor.ts
Папка guards содержит все средства защиты, которые я использую для защиты различных маршрутов в приложениях.
|-- guards
|-- auth.guard.ts
|-- no-auth-guard.ts
|-- admin-guard.ts
Общий модуль (Shared Module)
SharedModule - это место, куда должны идти любые общие компоненты, пайпы/фильтры и директивы. SharedModule может быть импортирован в любой другой модуль, когда эти элементы понадобятся. Общий модуль не должен иметь никакой зависимости от остальной части приложения и поэтому не должен полагаться на какой-либо другой модуль.
|-- shared
|-- [+] components
|-- [+] directives
|-- [+] pipes
Стайлинг
Глобальные стили для проекта помещаются в папку scss. Папка scss содержит папки - components и elements. Файлы из них могут быть импортированы как другими файлами scss, так и корневым файлом styles.scss. Все партиалы разбиты по логическим названиям и импортируются в styles.scss. Но и это правило условное, всё зависит от реальных потребностей в приложении.
|-- scss
|-- [+] components
|-- [+] elements
|-- _fonts.scss
|-- _main.scss
|-- _mixins.scss
|-- _reset.scss
|-- _variables.scss
|-- style.scss
Отложенная Загрузка (Lazy Loading)
Приложение использует отложенную загрузку, это означает, что модуль не загружается до того, как пользователь фактически получит доступ к маршруту. Используя структуру, описанную в разделе «Модули», вы можете легко ссылаться на каждый модуль в своем основном файле маршрутизации приложения.
И, в заключение, хочу добавить, что нет такого проекта, которой будет соблюдать структуру папок по какому-то единому мировому стандарту. Структура сильно изменится в зависимости от проекта, над которым Вы работаете. В этой статье рассматривается вариант использования нескольких модулей, которые в свою очередь делятся на страницы и общий набор компонентов.
Надеюсь, данная статья будет полезна как начинающим, так и опытным веб-разработчикам.
