Веб-компоненты в Angular и AngularJS

Веб-компоненты в Angular и AngularJS

От автора: очень часто вы, как разработчик, можете столкнуться с проектами, построенными на старых технологиях. Вы начинаете задумываться, как убедить руководство, менеджеров и даже коллег переключиться на что-то новое — многие используют 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

Источник: //blog.pragmatists.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: