Ссылка на Code Lab: https://ng-codelab-webcomponents.netlify.com
В этом небольшом сообщении в блоге я рассмотрю лабораторию кода, которую я создал для объяснения того, как создавать веб-компоненты с использованием элементов Angular, понимания различных спецификаций веб-компонентов, а затем возможности их использования в некоторых другие фреймворки.
В феврале я буду говорить на двух конференциях на тему «Фреймворк-независимые веб-компоненты в Angular» примерно по 25–30 минут каждая. Однако для реального понимания темы и возможности реализовать то, о чем идет речь, аудитории нужно больше.
Подписавшись на это, я решил создать небольшую лабораторию кода. В этой лаборатории кода будет обсуждаться то, что важно знать, чтобы иметь возможность создавать собственные элементы с помощью Angular Elements и иметь возможность использовать их в других проектах фреймворка или ванильных JS-проектах.
Эта лаборатория кода содержит следующее:
- обзор того, что мы будем реализовывать в будущем.
- предварительные условия для создания нестандартных элементов
- настройка среды разработки
- понимание спецификаций веб-компонентов
- обзор того, что такое элементы Angular
- создание пользовательских элементов с использованием элементов Angular
- создание веб-компонента, чтобы иметь возможность использовать его извне
- публикация пакета в реестр npm
- использование веб-компонента в проекте React
Лаборатория кода уже связана с двумя репозиториями, содержащими исходный код для проекта Angular, в котором элемент Angular создан и объединен, и проект React с кодом для использования этого веб-компонента после установки из npm.
Создан веб-компонент
Использование веб-компонента в React
Использование веб-компонента в проекте JavaScript
Хранилища
- Веб-компонент, использующий элемент Angular
- Использование настраиваемого элемента в React
- Использование настраиваемого элемента в обычном проекте JavaScript
