В этом уроке мы перейдем от модели данных Stackjoy к таблице материалов Angular за пару шагов. Для этого примера мы будем использовать модель данных, которая поставляется с генераторами, но вы всегда можете создать свою собственную модель данных и, в свою очередь, быстро создать свои собственные таблицы.
Мы пойдем от модели данных:
в таблицу материалов Angular за несколько шагов:
Весь процесс описан в этой гифке
Давай начнем…
Если вы не установили stackjoy, вы можете сделать это с помощью следующей команды в своем терминале:
npm install stackjoy -g
Мы хотим развернуть сгенерированный код нашей таблицы в кодовую базу нашего проекта. Во-первых, убедитесь, что вы находитесь в корневой папке кодовой базы вашего проекта в терминале. Затем введите следующую команду, чтобы установить генераторы Angular Material. (Полное объяснение того, почему необходимо запускать stackjoy из корневой папки, читайте здесь)
sj install ng-material-generators
Это запустит приложение Stackjoy, и мы увидим присутствующие генераторы Angular Material.
«table-with-data-model» — это генератор, который мы ищем, но прежде чем мы что-либо сгенерируем, мы сначала перейдем к разделу Модели данных, где « Модель данных customer-example» уже присутствует и готова к использованию.
В нашем примере модели данных мы щелкнем раскрывающееся меню генераторов и выберем генератор «таблица с моделью данных».
Выбор генератора «table-with-data-model» приводит нас к разделу генератора. Здесь мы можем увидеть и отредактировать все файлы шаблонов, которые этот генератор будет использовать для создания нашей таблицы. На данный момент ничего не меняется, и мы просто хотим перейти к разделу «Входные данные», чтобы продолжить.
В разделе «Входные данные» мы видим, что входные данные нашей модели данных уже присутствуют, но нам нужно дать нашей таблице имя. Давайте назовем ее «customer-table» и перейдем к вкладке «Destination».
В разделе «Destination» мы выберем папку, в которую мы хотим поместить нашу новую таблицу. Далее мы перейдем на вкладку «Создать», чтобы завершить создание нашей таблицы.
В разделе «Создать» мы нажмем кнопку «Выполнить», чтобы создать нашу таблицу, а в разделе «Дальнейшие инструкции» скопируем небольшой фрагмент кода. это позволяет нам добавить нашу новую таблицу в наш существующий проект Angular. Ваша среда IDE должна автоматически импортировать новую таблицу при вставке фрагмента. Если это не так, таблица сама по себе является компонентом, который поставляется с модулем, и все, что вам нужно сделать, это импортировать модуль таблицы в компонент, в который он входит.
Мы можем видеть сгенерированные файлы таблицы в нашей кодовой базе.
И, наконец, мы можем увидеть нашу таблицу в нашем проекте.
Мы использовали предопределенную модель данных для этого руководства, но вы можете создать свои собственные модели данных и создать свои собственные пользовательские таблицы, повторив описанные выше шаги.
Поскольку все генераторы доступны для редактирования, вы можете изменить файлы шаблонов, которые создают код для таблицы, и действительно настроить таблицу в соответствии с потребностями вашего проекта.
Точно так же вы можете быстро создавать собственные формы Angular Material, которые соответствуют требованиям вашего проекта.
