Когда веб-разработчик начинает писать проект "с нуля", он не особо задумывается, что будет с проектом через год-два, какова будет общая численность разработчиков на текущем проекте, как дописывать новый функционал в будущем, да вообще в целом ориентироваться в проекте.
Я хотел бы подчеркнуть, что методы, используемые в этой статье, очень применимы для моего варианта использования и ни в коем случае не должны строго соблюдаться. Структура папок проекта будет меняться в зависимости от широкого спектра факторов. Но если вам интересна структура, в которой основное внимание уделяется многомодульной архитектуре с большим акцентом на масштабирование, это то, что Вам нужно.
|-- 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)
Приложение использует отложенную загрузку, это означает, что модуль не загружается до того, как пользователь фактически получит доступ к маршруту. Используя структуру, описанную в разделе «Модули», вы можете легко ссылаться на каждый модуль в своем основном файле маршрутизации приложения.
И, в заключение, хочу добавить, что нет такого проекта, которой будет соблюдать структуру папок по какому-то единому мировому стандарту. Структура сильно изменится в зависимости от проекта, над которым Вы работаете. В этой статье рассматривается вариант использования нескольких модулей, которые в свою очередь делятся на страницы и общий набор компонентов.
Надеюсь, данная статья будет полезна как начинающим, так и опытным веб-разработчикам.