Как определить высоко масштабируемую структуру папок для вашего Angular проекта

Sep 8, 2018

Вы можете изучить проекта на GitHub (angular folder structure)

Предисловие

Структура папок зависит от ваших целей и функциональности вашего приложения, поэтому приведенной структуре папок следовать строго необязательно. Однако, если вас интересует структура, которая сфокусирована на многомодульной архитектуре с большим фокусом на масштабирование продолжайте чтение.

Отметьте [+] указывает, что в папке есть дополнительные файлы.

|-- app
     |-- modules
        |-- home
            |-- [+] components
            |-- [+] pages
            |-- home-routing.module.ts
            |-- home.module.ts
     |-- core
        |-- [+] authentication
        |-- [+] footer
        |-- [+] guards
        |-- [+] http
        |-- [+] interceptors
        |-- [+] mocks
        |-- [+] services
        |-- [+] header
        |-- core.module.ts
        |-- ensureModuleLoadedOnceGuard.ts
        |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
     |
     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss

Angular Style Guide (Руководство по стилю)

Руководство по стилю от Angular - styleguide. Основные рекомендации, на которые стоит обратить внимание:

Структурируйте приложение так, чтобы вы могли быстро найти код.

Имейте краткосрочный взгляд на реализацию и долгосрочное видение.

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

Modules (Модули)

|-- core
    |-- [+] authentication
    |-- [+] footer
    |-- [+] guards
    |-- [+] http
    |-- [+] interceptors
    |-- [+] mocks
    |-- [+] services
    |-- [+] header
    |-- core.module.ts
    |-- ensureModuleLoadedOnceGuard.ts
    |-- logger.service.ts

Tom Crowley написал полезную статью (angular folderstructure), где он описывает свой подход на построение структуры папок в Angular. Мне очень понравилась идея модулей с проектированием папок для страниц-компонентов.

Core Module (Ядро)

CoreModule берет на себя роль корневого AppModule, но он не является модулем, который загружается (bootstrapped) Angular. CoreModule должен содержать сервисы синглтоны и другой функционал, который должен быть в единственном экземпляре для всего приложения. Чтобы предотвратить повторный импорт CoreModule где-либо еще вы должны также добавить guard в конструктор CoreModule.

Папка authentication просто обрабатывает цикл аутентификации пользователя (от входа в систему до выхода).

|-- authentication
     |-- authentication.service.ts|spec.ts

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

|-- http
     |-- user
          |-- user.service.ts|spec.ts
     |-- api.service.ts|spec.ts

Angular 4.x ввела долгожданный функционал для обработки http-запросов – интерфейс HttpInterceptor. Они позволяют нам ловить и модифицировать запросы и ответы наших http-запросов. Папка interceptors содержит коллекцию interceptors, которую я нахожу особенно полезной.

|-- interceptors
    |-- api-prefix.interceptor.ts
    |-- error-handler.interceptor.ts
    |-- http.token.interceptor.ts

Папка guards содержит всех защитников, которых я использую для защиты различных маршрутов в моем приложении.

|-- guards
     |-- auth.guard.ts
     |-- no-auth-guard.ts
     |-- admin-guard.ts

Mocks особенно полезны для тестирования, но вы можете использовать их, чтобы извлекать фиктивные данные пока back-end настраивается или отключен.

|-- mocks
       |-- user.mock.ts

Все сервисы синглтоны располагаются в папке services.

|-- services
     |-- srv1.service.ts|spec.ts
     |-- srv2.service.ts|spec.ts

Shared Module (общий модуль)

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

|-- shared
     |-- [+] components
     |-- [+] directives
     |-- [+] pipes

Папка components содержит все общие компоненты. Например, это могут быть loaders и buttons, которые потребуются многим компонентам.

|-- components
     |-- loader
          |-- loader.component.ts|html|scss|spec.ts
     |-- buttons
          |-- favorite-button
               |-- favorite-button.component.ts|html|scss|spec.ts
          |-- collapse-button
               |-- collapse-button.component.ts|html|scss|spec.ts

Папки directives, pipes и models содержат соответствующие сущности.

|-- directives
      |-- auth.directive.ts|spec.ts

|-- pipes
     |-- capitalize.pipe.ts
     |-- safe.pipe.ts

|-- models
     |-- user.model.ts
     |-- server-response.ts

Configs (Конфигурация)

Папка configs содержит настройки приложения и другие предопределенные значения.

|-- configs
     |-- app-settings.config.ts
     |-- dt-norwegian.config.ts

Styling (Стили)

Глобальные стили проекта расположены в папке scss, которая, в свою очередь располагается в папке assets.

|-- scss
     |-- partials
          |-- _layout.vars.scss
          |-- _responsive.partial.scss
     |-- _base.scss
|-- styles.scss

Папка scss содержит только одну папку – partials. Partial-файлы могут быть импортированы в других файлы scss. В моем случае, style.scss импортирует все части, чтобы использовать их стили.

Lazy Loading (Ленивая загрузка)

Приложение использует ленивую загрузку, это означает, что модуль не будет загружен до тех пор пока пользователь действительно не затребует маршрут. Используя структуру описанную в секции модуль, вы можете ссылаться на каждый модуль в вашем основном файле маршрутизации.

Полезные ссылки

Добавить комментарий