От автора: очень часто вы, как разработчик, можете столкнуться с проектами, построенными на старых технологиях. Вы начинаете задумываться, как убедить руководство, менеджеров и даже коллег переключиться на что-то новое — многие используют Angular 6, ReactJS или VueJS, почему мы не можем?
В своем посте я попытаюсь показать вам, как Angular компоненты веб помогают сочетать старые (AngularJS) и новые (Angular 6) технологии, одновременно делая счастливыми руководство / менеджеров / команду и удовлетворяя собственные амбиции использования новейших технологий.
Стандартные причины отказа:
Мы — специалисты по старой технологии
Переписывание всей базы кода является экономически неэффективным
Процесс разработки установлен
Людям не нравятся изменения
Я не буду оспаривать эти аргументы (пока), поэтому пристегнитесь и давайте совершим путешествие в будущее!
Web Components как новые строительные блоки
Web Components — это новое слово во front-end разработке, хотя это не новая технология. Она набрала силу, когда команда Angular (Google 
) решила создать Angular Elements.
Я не буду вдаваться в детали, потому что эта тема отлично освещена в официальной документации. Важно то, что веб-компоненты на самом деле представляют собой набор из четырех функций:
Shadow DOM
Шаблоны HTML
Импорты HTML
Custom Elements
В этой статье я рассмотрю только Custom Elements, потому что это суть Angular Elements (теперь заголовок статьи имеет смысл — не так ли? ).
Custom Elements являются ключевой функцией стандарта Web Components, которая позволяет создать пользовательский элемент HTML, который можно повторно использовать в любом месте страницы. Существует два типа пользовательских элементов:
Автономные пользовательские элементы — это может быть что угодно: от простого HTML до компонентов Angular.
Пользовательские встроенные элементы — в них вы можете наследовать основные элементы HTML, такие как input или ul, и расширить их функционал.
Чтобы использовать пользовательский элемент, вам необходимо зарегистрировать его в CustomElementRegistry, но, благодаря инженерам Google, он уже привязан в Angular!
Еще одна вещь, прежде чем мы перейдем к коду — учитывая выше сказанное, можно подумать, что я должен изменить заголовок этой статьи на «Пользовательские элементы в Angular и AngularJS», но большинство авторов считает говорят, что Web Components на самом деле не являются пользовательскими элементами … поэтому давайте придерживаться этой точки зрения.
Angular Elements, также известные как Custom Elements на стероидах
Angular Components склеенные с Custom Elements*.
* что-то типа Custom Elements на стероидах; предназначенных для работы вне приложений Angular
Мне очень нравится эта цитата Паскаля Пречта — это просто сама суть Angular Elements. Представьте себе, что вы пишете компоненты Angular, как обычно, а затем, используя магию, вы делаете их повторно используемыми в не-Angular приложениях!
Custom Element «Hello-World» в Angular Elements
Вы можете посмотреть код на GitHub или поэкспериментировать с ним на Stackblitz. Несколько важных вещей:
HelloComponent — это стандартный компонент Angular. Вам не нужно менять существующий код!
Вы можете использовать службы, введение зависимостей и другие интересные функции Angular.
Вся магия Elements скрыта в ngDoBootstrap() — Вам не нужно регистрировать элемент самостоятельно.
Вы можете использовать новый пользовательский элемент в любом месте!
Вы можете проверить, что этот пример не является, по сути, приложением Angular — мы просто используем пользовательский элемент на нашей HTML-странице
Angular Elements в приложении AngularJS
В этом примере используется предыдущий HelloComponent внутри приложения AngularJS. Таким образом, вы можете объединить несколько интерфейсных технологий на одной странице — насколько это круто?
Важные вещи относительно Angular Elements:
вы можете использовать их в любом месте — в шаблоне контроллера, в шаблоне Component и т. д.
input отображается как атрибут элемента HTML (имя input указывается в нижнем регистре через тире).
output отправляется как Custom Event (имя события соответствует имени output ).
Вы также должны помнить, что каждый экземпляр Angular Element является само-содержащим, т. е. они не могут делиться состоянием или службой. Несмотря на то, что компоненты могут совместно использовать одну службу Angular, после преобразования в Angular Element это будут два отдельных экземпляра службы.
Заключение
Надеюсь, вы найдете этот пример полезным для своих будущих проектов. Просмотрите раздел ссылок, с помощью которых вы можете глубже изучить данную тему. И посмотри презентацию Паскаля Пречта — она хороша!
Вы даже можете использовать этот пост (или его часть), чтобы убедить своих боссов / менеджеров / коллег, что настало время использовать в вашем проекте новейшие и лучшие технологии!
Если у вас есть какие-либо вопросы или вы хотите добавить что-то по теме, не стесняйтесь оставлять комментарии. И, конечно же, не забудьте ознакомиться с другими замечательными постами в нашем блоге! Всего!
Автор: Jakub Fedoruk
Источник: https://blog.pragmatists.com/
Редакция: Команда webformyself.