Schematics в Angular – это мощный инструмент, который позволяет разработчикам автоматизировать создание и конфигурирование различных компонентов и модулей в приложениях Angular. Он предназначен для работы с Angular CLI и предоставляет механизмы для генерации, модификации и управления проектами.

Зачем нужен Schematics?

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

Стандартизация: Используя Schematics, команды могут придерживаться единого стиля кода и структуры проекта, что упрощает поддержание проекта.

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

Как работает Schematics?

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

Пример создания нового компонента с использованием Schematics

Для начала работы с Schematics вы можете выполнить следующие шаги:

Установка Angular CLI (если он ещё не установлен):

npm install -g @angular/cli

Создание нового проекта Angular:

ng new my-angular-app
cd my-angular-app

Создание нового компонента с помощью Schematics:

ng generate component my-new-component

Это команда сгенерирует новый компонент с именем my-new-component и создает несколько файлов:

my-new-component.component.ts
my-new-component.component.html
my-new-component.component.css
my-new-component.component.spec.ts

Также Angular CLI автоматически зарегистрирует новый компонент в соответствующем модуле.

Создание пользовательских схем

Вы также можете создавать свои собственные схемы с помощью Schematics. Для этого вы можете использовать следующие шаги:

Создание нового пакета с Schematics:

ng new my-schematic --collection

Перейдите в созданный каталог и откройте файл collection.json. Здесь вы можете настроить свой файл Schematics.

Создайте новую схему в подкаталоге, например src/my-schematic/, где создайте файл schema.json для описания вашей схемы.
Пример schema.json:

{
  "$schema": "http://json.schemastore.org/schemastore",
  "id": "MySchematic",
  "title": "My Schematic",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Имя вашего нового компонента."
    }
  },
  "required": ["name"]
}

Создание файла выполнения index.ts, где описывается, что должно происходить при запуске вашей схемы.
Пример index.ts:

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { Schema } from './schema';

export function mySchematic(options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const content = `export class ${options.name} {}`;
    tree.create(`${options.name}.ts`, content);
    return tree;
  };
}

Заключение

Schematics CLI — это мощный инструмент для автоматизации разработки Angular-приложений. Используя его, вы можете значительно упростить процесс разработки, сделать его более эффективным и минимизировать количество ошибок. Понимание принципов работы Schematics поможет вам быстрее ориентироваться в Angular и создавать более качественные приложения.

Предыдущий вопрос

Что такое Санитизация? Поддерживает ли Angular это?

Следующий вопрос

Что произойдет, если вы используете тег script внутри шаблона?

Содержание:

Зачем нужен Schematics?

Как работает Schematics?

Создание пользовательских схем

Заключение

Редактировать