Представляем вам перевод статьи Aditya Modi, опубликованной на blog.bitsrc.io. Статья посвящена использованию библиотеки jQuery в приложениях на Angular.
Нечасто я берусь за что-то с опаской. Однако в этот раз осторожность не помешает, ведь интегрировать jQuery в Angular не так-то просто.
Почему, собственно, я написал эту статью? Иногда jQuery действительно необходима для разработки на Angular, однако подобные JavaScript-фреймворки крайне редко связываются с этой библиотекой. Angular отвечает за рендеринг и управление DOM, и, внося в него изменения при помощи jQuery, вы рискуете получить крайне неожиданный результат.
Совет: используя Bit, вы сможете быстро делиться Angular-компонентами и повторно применять их в своих приложениях. Это позволит вам и вашей команде тратить меньше времени на создание новых приложений. Попробуйте.
Как бы там ни было, в некоторых ситуациях вмешательство в работу фреймворка необходимо, оправданно, оно может стать настоящим выходом из положения. Эти случаи не рассматриваются в моем блоге, однако, возможно, я расскажу о них в своих следующих статьях. А сейчас позвольте мне показать, как добавить библиотеку jQuery в Angular. В этом уроке я буду использовать VS Code. Вы можете выбрать какой-то другой редактор кода или загрузить Visual Studio Code для Windows, Linux и macOS.
Первым делом нам нужно создать приложение на Angular, используя команду
Звучит здорово, но пурист jQuery скорее выберет загрузку через jQuery CDN, а не через npm. CDN — это альтернативный способ добавления библиотеки jQuery в приложение на Angular, но я предпочитаю использовать метод npm. Если вы заглянете на https://jquery.com/download/, то найдете CDN-библиотеки jQuery и другие CDN-сети от Google, Microsoft, CDNJS и jsDelivr. Я бы порекомендовал последнюю официальную версию CDN, так как она поддерживает механизм SRI (Subresource Integrity).
Чтобы использовать jQuery CDN, достаточно просто создать ссылку на файл в теге
Скрипт можно скопировать с ресурса code.jquery.com. Далее его необходимо вставить в файл
Файл
При передаче ссылки на путь к файлу внутри Angular-приложения корневой папкой является src. Однако библиотека jQuery находится внутри каталога
Чтобы убедиться в правильности пути, необходимо перейти в каталог
Чтобы начать использование библиотеки jQuery с фреймворком Angular, необходимо перейти к компонентам приложения. Я продемонстрирую вам, как слаженно две эти технологии могут работать с простым HTML-элементом
Страница перезагрузится автоматически, далее появится кнопка.
Нам нужно задать символ для jQuery в файле
Затем вставляем хук жизненного цикла
Добавляем
Независимо от готовности DOM, вы можете писать код jQuery внутри метода
Если нажать на кнопку, появится надпись «Wass Up».
Добавление jQuery в Angular, а также использование этой связки — сомнительная идея.
Да, на первый взгляд метод кажется простым. Однако, как я уже говорил в начале статьи, сколь бы заманчиво ни выглядело совместное использование этих двух технологий, чаще всего затея оказывается плохой. В реальных Angular-приложениях приходится иметь дело с гораздо более сложными вещами, чем связанный с событием HTML-элемент
Нечасто я берусь за что-то с опаской. Однако в этот раз осторожность не помешает, ведь интегрировать jQuery в Angular не так-то просто.
Почему, собственно, я написал эту статью? Иногда jQuery действительно необходима для разработки на Angular, однако подобные JavaScript-фреймворки крайне редко связываются с этой библиотекой. Angular отвечает за рендеринг и управление DOM, и, внося в него изменения при помощи jQuery, вы рискуете получить крайне неожиданный результат.
Совет: используя Bit, вы сможете быстро делиться Angular-компонентами и повторно применять их в своих приложениях. Это позволит вам и вашей команде тратить меньше времени на создание новых приложений. Попробуйте.
Как бы там ни было, в некоторых ситуациях вмешательство в работу фреймворка необходимо, оправданно, оно может стать настоящим выходом из положения. Эти случаи не рассматриваются в моем блоге, однако, возможно, я расскажу о них в своих следующих статьях. А сейчас позвольте мне показать, как добавить библиотеку jQuery в Angular. В этом уроке я буду использовать VS Code. Вы можете выбрать какой-то другой редактор кода или загрузить Visual Studio Code для Windows, Linux и macOS.
Интеграция jQuery в Angular
Первым делом нам нужно создать приложение на Angular, используя команду
ng new. Далее с помощью команды cd переходим в папку, куда через npm будет установлена библиотека jQuery. Назовем получившееся приложение angularmeetsjquery.ng new angularmeetsjquery
cd angularmeetsjquery
npm install jquery — saveЗвучит здорово, но пурист jQuery скорее выберет загрузку через jQuery CDN, а не через npm. CDN — это альтернативный способ добавления библиотеки jQuery в приложение на Angular, но я предпочитаю использовать метод npm. Если вы заглянете на https://jquery.com/download/, то найдете CDN-библиотеки jQuery и другие CDN-сети от Google, Microsoft, CDNJS и jsDelivr. Я бы порекомендовал последнюю официальную версию CDN, так как она поддерживает механизм SRI (Subresource Integrity).
Чтобы использовать jQuery CDN, достаточно просто создать ссылку на файл в теге
script непосредственно из домена jQuery CDN. Код с функцией Subresource Integrity будет выглядеть следующим образом. (Как видите, я использую библиотеку jQuery версии 3.3.1.)<script
src=”https://code.jquery.com/jquery-3.3.1.js"
integrity=”sha256–2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=”
crossorigin=”anonymous”>
</script>Скрипт можно скопировать с ресурса code.jquery.com. Далее его необходимо вставить в файл
index.html в конце тега <body>.Делаем библиотеку jQuery глобальной
Файл
jquery.min.js, находящийся в папке dis модуля jQuery, не является публичным (корректное название папки: dist. — Прим. ред.). Чтобы сделать библиотеку jQuery глобальной, переходим к файлу .angular-cli.json и прописываем в нем ссылку на путь к файлу jQuery. При передаче ссылки на путь к файлу внутри Angular-приложения корневой папкой является src. Однако библиотека jQuery находится внутри каталога
node_modules. Следовательно, нужно определить верный путь к файлу .angular-cli.json.../node_modules/jquery/dist/jquery.min.jsЧтобы убедиться в правильности пути, необходимо перейти в каталог
node_modules→jquery→dist→jquery.min.js. Здесь можно увидеть указанный путь, а значит, для этого приложения библиотека jQuery была добавлена глобально. Не ждите, что страница localhost:4200 в вашем браузере перезагрузится самостоятельно, ведь файл находится вне папки src. Чтобы в приложении появились изменения, его придется перезапустить.ng serve –open
Используем jQuery в приложении на Angular
Чтобы начать использование библиотеки jQuery с фреймворком Angular, необходимо перейти к компонентам приложения. Я продемонстрирую вам, как слаженно две эти технологии могут работать с простым HTML-элементом
button. Но для начала удалим все строки кода в файле app.component.html и добавим HTML-элемент button.<button> Click me </button>Страница перезагрузится автоматически, далее появится кнопка.
Нам нужно задать символ для jQuery в файле
app.component.ts.declare var $: any;Затем вставляем хук жизненного цикла
ngOnInit. Для этого можно импортировать OnInit из Angular Core.import { Component, OnInit} from ‘@angular/core’;Добавляем
ngOnInit.export class AppComponent implements OnInit {Независимо от готовности DOM, вы можете писать код jQuery внутри метода
ngOnInit, как это делается при стандартной разработке веб-приложений. Чтобы проверить кнопку, созданную в app.component.html, добавляем событие button.click в метод ngOnInit.export class AppComponent implements OnInit {
ngOnInit(){
$(‘button’).click(function(){
alert(‘Wass up!’);
});
}
}Если нажать на кнопку, появится надпись «Wass Up».
Заключение
Добавление jQuery в Angular, а также использование этой связки — сомнительная идея.
Да, на первый взгляд метод кажется простым. Однако, как я уже говорил в начале статьи, сколь бы заманчиво ни выглядело совместное использование этих двух технологий, чаще всего затея оказывается плохой. В реальных Angular-приложениях приходится иметь дело с гораздо более сложными вещами, чем связанный с событием HTML-элемент
button. Мой совет всем, кто работает с Angular и ищет возможность внедрить jQuery в свой TypeScript-код: если нет необходимости, не делайте этого. Желаю удачных экспериментов в области jQuery и Angular!