jQuery по-прежнему является важной частью веб-разработки, в настоящее время существует около 800 000 активных веб-сайтов, использующих его тем или иным образом (ссылка). Несмотря на то, что первые разработчики уклоняются от его изучения, во многих работах и проектах может потребоваться иметь какие-то знания о jQuery и о том, как его использовать.
В цветущую эпоху веб-разработки Angular представил нас к растущей тенденции, веб-компонентам, в которых будет легко и просто добавлять проекты Angular к существующему проекту, отличному от Angular, проекту jQuery или даже другим проектам клиентских фреймворков, что-то вроде функции plug and play, если вы будет. к сожалению, это верное утверждение, в основном при использовании его в качестве автономного веб-приложения с очень низкой интеграцией с существующими клиентскими функциями. В этой статье я попытаюсь показать, как я научился реализовывать и интегрировать элементы Angular более продвинутым способом. мы начнем с самого начала.
Создание Angular Html-элемента
Предполагая, что на вашем компьютере установлен Angular CLI, мы начнем с добавления нового проекта. (пожалуйста, убедитесь, что у вас установлена последняя версия)
ng new elements-injection cd elements-injection ng add @angular/elements --project=elements-injection
При открытии проекта в любой IDE вы увидите файл app.module.ts, который является основой приложения Angular. Чтобы реализовать Angular Elements, вам нужно немного его подправить, он должен выглядеть примерно так:
EntryComponent сообщает Angular, какой компонент пользовательский элемент будет загружаться в качестве основного компонента приложения (примечание: если вы собираетесь использовать библиотеку пользовательского интерфейса, такую как material-angular, в частности, диалоги, вам нужно будет добавить их в массив entryComponent).
Вторая часть — это класс AppModule, в котором мы настроили, чтобы определить элемент тега, который мы будем использовать, как показано выше.
В ваш package.json проекта я настоятельно рекомендую добавить команду, указанную ниже, для сборки проекта для производства (см. блок кода ниже).
При использовании проектов в Angular вы должны указать CLI, какой проект собирать ( также элементы-инъекция).
"build:prod": "ng build elements-injection --prod --aot --output-hashing none"
После запуска сборки мы найдем папку с именем «dist», а внутри нее папку с именем «elements-injection», откройте ее, внутри вы найдете файлы, скомпилированные Angular для производства. После компиляции создайте новый файл HTML и добавьте соответствующие скрипты и теги ссылок (посмотрите на изображение ниже). Во-первых, это тег сценария, связанный с Angular Elements, он устраняет проблему, о которой команда Angular была проинформирована и исправлена, но до сих пор не была объединена. Затем идут другие файлы скриптов Angular и, наконец, мы добавляем ссылку на таблицу стилей в теге head. (Некоторые другие руководства покажут вам, что файлы js, совместимые с Angular, могут объединяться в один, что верно и также рекомендуется.
Если мы запустим HTML-страницу, внутри будет базовая демонстрация «hello-world» Angular, и все благодаря магии элементов.
Вставка данных в элемент
На изображении выше мы добавили тег сценария, который захватывает пользовательский элемент и добавляет атрибут к элементу HTML (который является объектом…).
Angular перехватывает эту инъекцию как событие onChange, поэтому мы можем получить его и поиграть с ним. данные внутри файла component.ts, как показано на изображениях ниже. Перестройте приложение Angular и обновите страницу, и вы увидите «привет, король, автор, добро пожаловать во внедрение элементов», успех!
На втором изображении ниже мы видим, что можем передавать объекты очень просто и точно так же. это можно сделать практически с любым типом данных.
Внедрение из Angular в унаследованный код
На изображении выше мы видим, что создали элемент кнопки с классом «btnClicked», а также добавили атрибут данных. Использование «[attr.data-name]» указывает компилятору Angular сохранить атрибут data-name как есть, что очень важно.
Внутри нашей HTML-страницы. Мы добавили jQuery CDN (извините за лень) и добавили прослушиватель событий типа click для класса «btnClicked». Теперь мы ждем…
когда нажимается кнопка с классом btnClicked, даже если элемент находится в приложении Angular, он перехватывается прослушивателем jQuery внутри index.html, мы можем затем получить атрибут для него с помощью jQuery attr( ) функция. мы только что успешно ввели данные из Angular в jQuery. успех!
В этом вопросе есть один серьезный недостаток и проблема сложности: можно передавать только строковые элементы, хотя это можно сделать, но в некоторых случаях это может стать немного сложным, например, при работе с HTML-кодами (при использовании любого HTML-редактора WYSIWYG). Например).
Вывод: Грязно, но работает
Это грязное решение, но опять же, именно так создаются идеи и лучшие практики: использование передовых технологий с наследием старой школы имеет свои проблемы, но также имеет свои преимущества и дополнительную ценность.
I найти это простой способ попытаться шаг за шагом переделать любой устаревший код.
Почему веб-компоненты? — не часть статьи, но все равно приятно читать
У нас есть эта растущая концепция, микросервисы. Об этом кричали со всех крыш, и все же не многие компании были готовы или захотели изменить свою существующую монолитную архитектуру (да, да, Netflix сделал это, извините, не у всех есть свои деньги, чтобы потратить. С добавлением веб-компонентов (Angular элементы в этом примере) мы можем перестраивать архитектуру понемногу, часть за частью. Делая каждую часть приложения отдельной и при этом полностью связанной, сохраняя тот же API, сохраняя слушателей, сохраняя логику, просто изменяя формат сборки.< br /> Основным недостатком работы с этой идеей являются размеры пакетов, хотя мы познакомились с возможностями Angular встряхивания дерева и его новым механизмом сборки, размеры пакетов будут больше, чем вы привыкли, это падение должно быть исправлено. в следующем крупном релизе Angular, скрестив пальцы.
