Генерация кода с помощью схем¶

28.02.2022

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

Схемы упаковываются в коллекции и устанавливаются с помощью npm.

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

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

Схемы для Angular CLI¶

Схемы являются частью экосистемы Angular. В Angular CLI используются схемы для применения преобразований к проекту веб-приложения.

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

Схемы, включенные в коллекцию @schematics/angular, запускаются по умолчанию командами ng generate и ng add. Пакет содержит именованные схемы, которые настраивают опции, доступные в CLI для подкоманд ng generate, таких как ng generate component и ng generate service.

Подкоманды для ng generate являются сокращением для соответствующей схемы.

Чтобы указать и сгенерировать конкретную схему или набор схем, используйте длинную форму:

1

ng generate my-schematic-collection:my-schematic-name

или

1

ng generate my-schematic-name --collection collection-name

Конфигурирование схем CLI¶

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

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

JSON-схемы для схем по умолчанию, используемых CLI для генерации проектов и частей проектов, собраны в пакете @schematics/angular. Схема описывает опции, доступные CLI для каждой из подкоманд ng generate, как показано в выводе --help.

Разработка схем для библиотек¶

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

• Схема add позволяет разработчикам установить вашу библиотеку в рабочее пространство Angular с помощью ng add.

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

• Схема update может указать команде ng update, как обновить зависимости вашей библиотеки и скорректировать изменения при выпуске новой версии.

Подробнее о том, как они выглядят и как их создавать, см:

• Authoring Schematics

• Schematics for Libraries

Добавление схем¶

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

Например, схема @angular/material указывает команде add установить и настроить Angular Material и тематизацию, а также зарегистрировать новые стартовые компоненты, которые могут быть созданы с помощью ng generate. Посмотрите на эту схему как на пример и образец для вашей собственной схемы add.

Партнерские и сторонние библиотеки также поддерживают Angular CLI со схемами добавления. Например, @ng-bootstrap/schematics добавляет ng-bootstrap в приложение, а @clr/angular устанавливает и настраивает Clarity from VMWare.

Схема add может также обновлять проект с изменениями конфигурации, добавлять дополнительные зависимости (например, полифиллы), или размещать код инициализации, специфичный для пакета. Например, схема @angular/pwa превращает ваше приложение в PWA, добавляя манифест приложения и рабочий сервис.

Схемы генерации¶

Схемы генерации — это инструкции для команды ng generate. Документированные подкоманды используют схемы генерации Angular по умолчанию, но вы можете указать другую схему (вместо подкоманды) для генерации артефакта, определенного в вашей библиотеке.

Angular Material, например, предоставляет схемы генерации для компонентов пользовательского интерфейса, которые он определяет. Следующая команда использует одну из этих схем для создания таблицы Angular Material <mat-table>, которая предварительно настроена с источником данных для сортировки и пагинации.

1

ng generate @angular/material:table <component-name>

Обновление схем¶

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

ng update
We analyzed your package.json, there are some packages to update:

    Name                                      Version                     Command to update
    ‐-------------------------------------------------------------------------------
    @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
    @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
    @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
    @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
    rxjs                                      6.3.3 -> 6.4.0           ng update rxjs

    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Если вы передадите команде набор библиотек для обновления (или флаг --all), она обновит эти библиотеки, их одноранговые зависимости и одноранговые зависимости, которые зависят от них.

Если вы создаете новую версию вашей библиотеки, которая вносит потенциально разрушающие изменения, вы можете предоставить update schematic, чтобы команда ng update автоматически устранила все такие изменения в обновляемом проекте.

Например, предположим, вы хотите обновить библиотеку Angular Material.

1

ng update @angular/material

Эта команда обновляет как @angular/material, так и его зависимость @angular/cdk в файле package.json вашего рабочего пространства. Если оба пакета содержат схему обновления, которая охватывает миграцию с существующей версии на новую, команда запускает эту схему на вашем рабочем пространстве.

Ссылки¶

• Generating code using schematics

Комментарии