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

Как определить хорошую структуру папок?

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

Если вы сравниваете проекты очень маленького размера, вы не увидите разницы, но по мере увеличения размера проекта вы начнете ощущать сопротивление (если ваша структура папок - отстой) в разработке.

Как определить, отстойна ли структура ваших папок

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

Ниже приведены моменты, которые я лично испытал во время работы с моей командой в течение 1 года из-за испорченной структуры папок:

  1. Если вы снова и снова запутались из-за конфликтующих имен файлов
  2. Вы не можете найти файл, который хотите отредактировать, в течение 2–3 секунд.
  3. Файлы и папки не соответствуют одним и тем же соглашениям об именах.
  4. Файлы организованы таким образом, что противоречат лучшим практикам фреймворка (Angular) или библиотеки (ReactJS), над которой вы работаете.
  5. Добавление новой папки или файла кажется жизненным решением: куда добавить, как добавить и как назвать.
  6. Каждая папка или файл, которые добавляются в кодовую базу, вызывают у вас беспокойство.

Структура папок, которой я придерживаюсь

Вы можете найти демо-приложение на моем Github - Нажмите здесь

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

Заявление об ограничении ответственности: это не СТРУКТУРА ПАПКИ . Это также не та структура папок, которая подходит для каждого отдельного приложения Angular. Есть много других, которые предложены разработчиками, гораздо более опытными и заслуживающими доверия, чем я. Это то, чему я следую и следую, чтобы создавать масштабируемые приложения Angular уже более года, не задев стенку.

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

  1. Структура папки Angular от Тома Коули
  2. Как определить масштабируемую структуру папок для вашего проекта Angular, Матис Гарберг

Я постараюсь сделать это как можно более практичным с пояснениями, чтобы все, что вам нужно было делать, - СЛЕДОВАТЬ.

ШАГ 1. Создайте новое приложение Angular

Создайте папку с именем scalable-angular-app и откройте ее в VS CODE (вы можете использовать любую IDE). Создайте новое приложение angular в текущем каталоге с флагом для SCSS, чтобы все таблицы стилей были основаны на SASS.

ng new scalable-angular-app --directory ./ --style=scss

ШАГ 2: Добавьте модуль CORE

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

Компоненты - он будет содержать компоненты, общие для всего приложения, такие как верхний колонтитул, панель навигации и нижний колонтитул.

Охрана - это специальные службы, которые помогают предоставлять или отменять доступ к определенным частям приложения.

Перехватчики - они помогают перехватывать или изменять исходящие запросы или входящие ответы. В основном используются два типа перехватчиков: HttpTokenInterceptor и HttpErrorInterceptor.

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

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

Маршруты - папка будет содержать один файл с именем all-routes.ts, который будет содержать все маршруты с отложенной загрузкой.

Службы. Одна из самых больших ошибок, которые совершают разработчики, заключается в том, что они не понимают, как работает внедрение зависимостей в Angular. Просто потому, что несколько функциональных модулей используют одну и ту же услугу, они добавляют услугу к поставщикам «общего модуля», а затем импортируют общий модуль в свои функциональные модули. Теперь это портит всю систему, потому что теперь каждый функциональный модуль создает локальную копию службы и использует ее локальную копию. Другими словами, если 5 функциональных модулей используют «службу аутентификации» и каждый из них импортировал общий модуль, в приложении имеется 5 копий одной и той же службы аутентификации. Золотое правило, которое вы должны запомнить, заключается в том, что все службы должны быть синглтонами, то есть все функциональные модули будут использовать одну и ту же копию службы.

Утилиты - папка состоит из файлов и папок, которые протягивают руку помощи. У меня есть два файла, а именно custom-validators.ts и utility.service.ts. Имена говорят сами за себя. В первом файле есть настраиваемые валидаторы формы, которые я использую при разработке реактивных форм, а последний содержит фрагменты кода (набор функций), которые помогают мне в выполнении мелких задач.

Создайте основной модуль в каталоге app.

При выполнении этой команды будет создана папка с именем core с именем файла core.module.ts.

Затем добавьте оставшиеся папки, указанные выше, в основной модуль.

Начнем с добавления проекта-макета в папку «макеты». Это компонент, который будет содержать структуру основного приложения. Можно сказать, что это заменяет app.component.html / .ts.

Перейдите в папку «макеты» и затем запустите:

ng g c project-layout

Затем мы добавим 2 наиболее часто используемых компонента - верхний колонтитул и нижний колонтитул в папку компоненты. Переключитесь в папку с компонентами и запустите:

ng g c header
ng g c footer

Я широко использую два компонента:

  • not-found404: этот компонент загружается, когда маршрут не найден
  • scroll-to-top: это добавляет небольшую плавающую кнопку в правом нижнем углу, которая поможет прокрутить страницу к началу после определенного количества прокрутки.

Компоненты будут автоматически объявлены в основном модуле. Затем вы можете легко использовать их в компоненте «projects-layout».

После этого пойдем в сторону «охранников» и «перехватчиков».

Единственное средство защиты, которое у нас будет на данный момент, - это EnsureModuleLoadedOnceGuard. У вас также может быть Auth Guard или Route Guard, но давайте оставим их на другой раз. Следующий охранник гарантирует, что модуль, в котором присутствует этот охранник, загружается только один раз, и если по ошибке он загружается где-то еще, он выдаст ошибку.

Код модуля находится в файле secure-module-loaded-once.guard.ts, а защита импортируется в основной модуль.

После этого пришло время перехватчиков. На данный момент мы добавим 2 перехватчика, но не будем их использовать. Об использовании гвардейцев и перехватчиков я напишу отдельный пост (расширение текущего поста). Двумя перехватчиками являются:

  1. http-error.interceptor.ts - поможет обрабатывать входящие ответы.
  2. http-token.interceptor.ts - поможет изменить исходящие запросы с помощью токенов аутентификации и т. д.

Маршрутизация и услуги

Я решил вынести это в отдельный раздел из-за его важности. Сначала при маршрутизации будет один файл all-routes.ts в папке «routes». Файл будет содержать путь ко всем функциональным модулям, но с отложенной загрузкой. Мы обеспечим ленивую загрузку функционального модуля, указав путь с помощью клавиши loadChildren.

Затем службы будут добавлены в папку «services», и все эти службы будут предоставлены в массиве «sizes» основного модуля. На данный момент я добавил base.service.ts, в котором мы используем переменные среды для получения базового URL-адреса. Не волнуйтесь, я буду использовать все это в следующих статьях, в которых я расширю это, чтобы создать угловой шаблон.

Последний основной модуль выглядит так:

Добавьте основной модуль в массив `import` файла app.module.ts

Убедитесь, что вы не только импортируете модули, которые вам нужны в основном модуле, но также экспортируете модули и компоненты, к которым app.module.ts должен иметь явный доступ. Например, я экспортирую HttpClientModule из основного модуля.

ШАГ 4. Добавьте домашний модуль (функциональный модуль)

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

Ленивая загрузка (также называемая загрузкой по запросу) - это метод оптимизации онлайн-контента, будь то веб-сайт или веб-приложение.

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

https://www.geeksforgeeks.org/what-is-lazy-loading/

Создайте домашний модуль в папке «app» вместе с файлом маршрутизации.

ng g m home --routing

Флаг `-routing` гарантирует создание файла маршрутизации (home-routing.module.ts) для этого модуля.

Домашний модуль будет создан помимо ядра и модуля приложения.

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

Входной компонент функционального модуля

После создания домашнего модуля с его файлом маршрутизации я создаю «ВХОДНОЙ КОМПОНЕНТ» для этого функционального модуля. Этот компонент записи имеет имя «home-layout». Перейдите в каталог домашнего модуля и сгенерируйте компонент записи для этого модуля:

ng g c home-layout

Этот компонент позаботится о компоновке домашнего модуля. Если у модуля нет особого макета, просто дайте «‹router-outlet› ‹/router-outlet› его файлу .html и пусть будет. Но если вы хотите, чтобы у вашего домашнего модуля была другая компоновка, чем у других функциональных модулей, это то место, где это можно сделать.

Это также компонент, в котором вы можете вызывать API для загрузки исходных данных для всего домашнего модуля.

Страницы в функциональном модуле

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

Учтите, что в нашем приложении angular есть 3 статические страницы:

Теперь они составляют 3 страницы в домашнем модуле. Страницы являются независимыми объектами в данном функциональном модуле.

Поэтому создайте папку «страницы» внутри каталога функционального модуля. Затем перейдите в каталог страниц и сгенерируйте 3 страницы (или компоненты):

ng g c landing
ng g c about-us
ng g c contact-us

Общие компоненты для определенного функционального модуля

Не пугайтесь и не ведите себя как всезнайка. Просто выслушай меня. Итак, дело в том, что есть два типа общих компонентов. Один из них является общим для функциональных модулей, а другой - для страниц одного функционального модуля. Первые компоненты будут помещены в папку «shared-components» раздела «shared-module», а последние компоненты, которые используются совместно страницами одного модуля, будут перемещены. в папке «компоненты» функционального модуля.

Прочтите его трижды, и вы все поймете.
Обещание. Pinky Promise!

Создайте папку «компоненты» в домашнем каталоге модуля.

Теперь представьте, что «свяжитесь с нами» и «about-us» используют компонент «testimonial», но не другие функциональные модули. использует этот компонент «характеристика».

Следовательно, сгенерируйте компонент «отзыв» в папке «компоненты» и используйте его как в «свяжитесь с нами», так и в « о-нас «страницы.

Перейдите в папку «компоненты» и запустите:

ng g c testimonial

Вот как страницы «О нас» и «Свяжитесь с нами» используют общий компонент «Отзывы».

Компонент about-us:

Компонент свяжитесь с нами

Маршрутизация функционального модуля

Маршрутизация здесь действительно проста. Вы открываете компонент с входным компонентом «HomeLayoutComponent», и тогда все страницы становятся дочерними маршрутами для этого модуля. Я загрузил «LandingComponent» в корневой путь (путь, по которому вызывается этот функциональный модуль).

ШАГ 5. Подготовьте app-routing.module.ts!

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

ШАГ 6. Добавьте общий модуль

Наконец, мы добавляем общий модуль. Здесь мы храним:

  • Директивы
  • Трубы
  • Модули - используются несколькими функциональными модулями
  • Компоненты - используются несколькими функциональными модулями

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

Создайте общий модуль в папке «app»:

ng g m shared

Добавьте папки - директивы, каналы, модули и компоненты.

Шаг 7: Запуск

ng serve

ЗАКЛЮЧЕНИЕ:

Найдите репо здесь: https://github.com/adityatyagi/scalable-angular-folder-structure

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

Попробуйте и дайте мне знать, как, если вам это понравилось.

Предложения, отзывы и вопросы? Задайте вопрос в разделе комментариев ниже!

Первоначально опубликовано на https://adityatyagi.com 12 декабря 2019 г.