Схемы, что это такое и чем они могут быть полезны, очень важно понимать, когда вы пытаетесь заложить основу для крупномасштабного проекта. Давайте сначала прочитаем официальное определение.
Схема - это генератор кода на основе шаблона, который поддерживает сложную логику. Это набор инструкций по преобразованию программного проекта путем генерации или изменения кода.
Коллекция схем может быть мощным инструментом для создания, изменения и поддержки любого программного проекта, но особенно полезна для настройки проектов Angular в соответствии с конкретными потребностями вашей организации. Вы можете использовать схемы, например, для создания часто используемых шаблонов пользовательского интерфейса или определенных компонентов, используя предопределенные шаблоны или макеты. Вы можете использовать схемы для обеспечения соблюдения архитектурных правил и соглашений, делая ваши проекты согласованными и взаимодействующими.
Все мы, используя Angular, сталкивались с командами Angular CLI. Когда вы используете команду generate для генерации компонента, за кулисами используется схема для определения того, что должно быть помещено в этот вновь созданный файл машинописного текста на основе различных предоставленных вами флагов.
Давайте рассмотрим сценарий, в котором мы хотим добавить заголовок файла авторских прав всякий раз, когда мы создаем компонент. Это очень распространенный сценарий, который может понадобиться в корпоративном проекте. Например: -
Для этого автоматически мы можем создать схему, которая будет использоваться для генерации компонентов и автоматически присоединить этот заголовок, чтобы разработчики не упустили это в компонентах.
Построим такую схему шаг за шагом.
- Интерфейс командной строки для схем.
Схемы поставляются с собственным инструментом командной строки. Используя Node 6.9 или выше, установите инструмент командной строки Schematics глобально:
npm install -g @angular -devkit / schematics-cli
2. Создайте рабочее пространство Angular
Создайте новое рабочее пространство angular для нашей библиотеки с помощью следующей команды.
новый заголовок ng - createApplication = false
3. Создайте библиотеку Angular
Создайте библиотеку внутри этой рабочей области с помощью следующей команды.
ng сгенерировать заголовок файла библиотеки
4. Создание папки схем
В корневой папке вашей библиотеки создайте папку с именем schematics. Также создайте файл collection.json внутри этой папки для создания схематической коллекции со следующим содержимым.
5. Создание schema.json
Создайте папку с именем component-header внутри папки схем и добавьте в эту папку файл schema.json со следующим содержимым.
- id: уникальный идентификатор схемы в коллекции.
- title: удобочитаемое описание схемы.
- type: дескриптор для типа, предоставляемого свойствами.
- свойства: объект, определяющий доступные параметры схемы.
6. Создание schema.ts
Создайте schema.ts там, где вы создали schema.json для текущей схемы. Он определяет интерфейс, в котором хранятся значения параметров, определенных в файле schema.json.
7. Добавить файлы шаблонов
Создайте папку с файлами внутри папки заголовков компонентов. После этого создайте файлы с именем
__name@dasherize__.component.ts.template, __name@dasherize__.component.html.template, __name@dasherize__.component.css.template
со следующим содержанием.
8. Добавить фабрику правил
Создайте файл index.ts, в котором был создан schema.json, а затем добавьте в него фабрику правил, как показано ниже.
9. Определить правило генерации
Теперь мы создадим правило генерации, чтобы использовать наши файлы шаблонов и создавать файлы компонентов для нас.
Чтобы понять различные части этого кода, вы можете обратиться к официальной документации Angular Создание схемных правил.
10. Обновите collection.json схемой
Обновите collection.json этой вновь созданной схемой.
11. Обновите package.json библиотеки.
Обновите package.json внутри projects \ file-header содержимым ниже и запустите npm install.
12. Создайте tsconfig.schematics.json
Создайте tsconfig.schematics.json в корне вашей библиотеки со следующим содержимым.
13. Создать Gulpfile
Gulpfile в корне библиотеки для копирования схем в папку dist.
14. Создать приложение
Создайте приложение в той же рабочей области, чтобы использовать эту коллекцию схем, используя следующую команду.
ng сгенерировать приложение my-first-app
15. Создать и связать библиотеку
Создать библиотеку с помощью команды
заголовок файла сборки ng
Затем зайдите в папку проектов / заголовка файла и запустите команду
npm запустить сборку
Затем нам нужно связать эту библиотеку из корня рабочей области, то есть из нашей папки заголовка. Чтобы связать нам нужно запустить команду
заголовок файла ссылки npm
16. Начать использовать схему
Теперь вы можете использовать эту схему в моем первом приложении, которое вы только что создали на шаге 14 с помощью команды.
ng генерировать заголовок файла: заголовок компонента
Где заголовок файла - это имя библиотеки, а заголовок компонента - имя нашей схемы.
Это даст вам результат, как показано ниже.
Теперь файл машинописного текста имеет заголовок, как мы и хотели.
В одну и ту же коллекцию теперь можно добавить несколько схем, которые можно использовать для принудительного применения определенных практик в проекте и для автоматического выполнения этих действий.
Показанный пример описывает схему для генерации. Вы также можете создать схему для обновления. Это может быть очень удобно, если вы публикуете библиотеку для поддержки обратной совместимости.
Angular использует схемы для разных целей. Когда вы запускаете ng update для обновления угловых зависимостей, есть несколько схем, которые запускаются за кулисами для автоматического обновления вашего кода.
Примечание. Команда generate в Angular CLI поддерживает различные флаги и параметры при создании компонента, а также автоматически обновляет модуль, чего наша схема в этом примере не выполняет. Поскольку этот пример был больше сфокусирован на том, чтобы дать представление о том, как создать схему. Чтобы увидеть исходный код официального источника CLI для команды создания компонента, вы можете посетить их ссылку на Github: - https://github.com/angular/angular-cli/tree/master/packages/schematics/angular/component
Чтобы узнать, как создавать различные типы схем помимо генерации, вы можете посетить официальную документацию Angular: - https://angular.io/guide/schematics
Чтобы увидеть полный исходный код примера, упомянутого выше, вы можете посетить мой репозиторий на github: - https://github.com/aakashgarg19/header
Схемы могут предоставить бесконечные возможности для приложения, а различные действия, которые повторяли разработчики, можно автоматизировать, если их использовать с умом. Как только схема будет разработана, это всего лишь команда, которая сделает всю тяжелую работу за вас.
