Организовать свой шкаф очень просто, корпоративное приложение - не так уж и много. К счастью для нас, разработчиков Angular, интерфейс командной строки Angular помогает нам начать работу с некоторой базовой структурой, но по мере создания приложения это становится сложным. В этой статье я дам вам сложную страницу и покажу, как я разбиваю ее на небольшие части, что приводит к чистой структуре папок.

Структура, сгенерированная CLI

Давайте посмотрим на базовую структуру, которую Angular CLI генерирует для нас:

my-app/
  src/
    app/
      app.component.ts
    assets/
    environments/

Это хорошее начало, но довольно простое. Из этого мы получаем корневой компонент с именем app.component.ts, который мы можем начать строить.

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

my-app/
  src/
    app/
      admin/
        admin.module.ts
        admin.component.ts
      dashboard/
        dashboard.module.ts
        dashboard.component.ts
      search/
        search.module.ts
        search.component.ts

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

my-app/
  src/
    app/
      admin/
        profile/
           profile.component.ts
        users/
           users.component.ts

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

Затем одно из первых действий, которое я делаю после создания скаффолдинга, - это создание общей папки, в которую я помещаю:

  • Общие компоненты
  • Модели
  • HTTP-сервисы
  • Такие утилиты, как валидаторы или охранники

Обычно это выглядит так:

my-app/ 
  src/
    app/
    shared/
      components/
      models/
      services/
      guards/
      validators/
      utils/

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

Разбивка страницы

Давайте посмотрим на эту страницу, она содержит несколько ключевых элементов:

  • Глобальный заголовок на каждой странице
  • Страница редактирования элемента
  • Левая навигация, относящаяся к этой странице
  • Тело, которое является выбранной левой навигацией на странице

На этой странице много взаимосвязанных компонентов. Допустим, требования к этой странице:

  • Когда пользователь нажимает «Изменить элемент», он должен попасть на описание.
  • Когда пользователи нажимают разные элементы в левой навигационной панели для элемента, он должен заменять тело на соответствующий выбранный элемент.
  • Навигация всегда должна быть представлена ​​в левом навигаторе.

Начнем с определения нашего маршрута:

[
  {
    path: 'edit',
    component: EditComponent,
    children: [
      { path: '', redirectTo: 'description' },
      { path: 'description', component: DescriptionComponent },
      { path: 'images', component: ImagesComponent },
      { path: 'permissions', component: PermissionsComponent }
    ]
  }
]

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

Мне нравится структурировать свою навигацию в соответствии с моим определением маршрута, с учетом сказанного, вот как я бы ее разбил:

my-app/
  src/
    app/
      edit-item/
        description/
          description.component.ts
        images/
          images.component.ts
        permissions/
          permissions.component.ts
        edit-item.component.ts 
        edit-item.module.ts
     shared/
       components/
         header/
           header.component.ts
           header.module.ts

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

Довольно просто, да? Резюмируем:

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

Надеюсь, вам понравился пост, если он вам понравился, подпишитесь на меня в Twitter и Github, чтобы получить больше советов / мнений / проектов / статей / и т. Д. По JavaScript!