Организовать свой шкаф очень просто, корпоративное приложение - не так уж и много. К счастью для нас, разработчиков 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!