Добавление пользовательского кода

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

Данная функциональность доступна только пользователям проекта с ролью Разработчик.

Для добавления пользовательского кода необходимо открыть редактор страницы и перейти на вкладку Панель разработчика.

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

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

Добавление пользователького кода в код проекта

Работа с пользовательским кодом на уровне кода проекта выполняется в директории src/app/app-user-code.

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

Добавление папок и файлов в структуру проекта

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

Обратите внимание: данные действия доступны только для директории src/app/app-user-code

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

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

Добавление пользовательского кода на страницу интерфейса

Доступные для редактирования файлы отмечены иконкой карандаш, например, app.component.ts, app.component.html, *.component.scss, package.json. Остальные файлы доступны только на чтение.

Редактор изменений HTML

Файл с .html описанием страницы содержит Редактор изменений с визуальным отображением различий между сгенерированным кодом страницы и кодом, добавленным пользователем. Позволяет видеть, что именно будет изменено (добавлено/удалено), перед применением правок, минимизируя риск ошибок.

Переключение между режимами просмотра html-кода выполняется с помощью кнопки в правом нижнем углу редактора

Проверка работы кода

Проверка работы кода выполняется в режиме предпросмотра страницы. При генерации кода проекта приоритет отдается коду, добавленному пользователем.