Как использовать библиотеку jQuery с фреймворком Angular (когда это действительно необходимо) / forpes.ru

Главная
Как использовать библиотеку jQuery с фреймворком Angular (когда это действительно необходимо)

Как использовать библиотеку jQuery с фреймворком Angular (когда это действительно необходимо) -2

31.05.2019 12:46

Plarium 9 2100 Источник

Представляем вам перевод статьи 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.

Интеграция 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!

Комментарии (9)

Focushift
31.05.2019 16:39
#20228072
И все? Как добавить линк на скрипт в документ?
А как же синхронизация изменений в документе при работе фреймворка?

zompin
31.05.2019 16:54
#20228166
Был у меня грех совместного использования ReactJS и jQuery.

ruSl0n
01.06.2019 11:13
#20230656
шо то печальный мануал
с таким же успехом можно его НЕ использовать

и те кто пытается все такие это делать — скорее всего не в курсе зачем ангуляр и что он может

lrsvolk
01.06.2019 11:13
#20230658
За несколько лет работы с фреймворком у меня не было ни одного кейса, где бы можно было использовать jQuery.
Кто-нибудь может привести пример, «когда это действительно необходимо»? Открыв статью, думал здесь именно это описывается.
1. zompin
  01.06.2019 13:34
  #20231002
  В моем случае это была банальная лень) Нужно было сделать слайдер. И я просто использовал слайдер для jQuery в реакт приложении. Больше так не делал. Честно.

usesa
01.06.2019 11:13
#20230660
Как прикрутить к стулу со спинкой колёсики и делать вид что купил кресло. Мне очень понравилась статья. Теперь я знаю кто это делает.

elepner

01.06.2019 17:36

#20231524

Ребят, вот вам еще статей на год веперед:

const vanillaJsLibs = ['jQuery', 'openlayers', 'leaflet', 'quilljs', 'codemirror']
const frameworks = ['Angular', 'AngularJS', 'React', 'Vue', 'Ember', 'Knockout']
frameworks.forEach(framework => {
  vanillaJsLibs.forEach(jsLib => {
    console.log(`
    Как использовать библиотеку ${jsLib} с фреймворком ${framework} (когда это действительно необходимо)`)
  })
})

А если серьезно, хоть это и перевод, но подключать либы в Ангулярное приложение через тэг script это уже за гранью добра и зла.

L2jLiga
02.06.2019 08:52
#20232868
declare var $: any;
Можно было хотя бы использовать @types/jQuery. А вообще смысла в jQuery нет, спасибо ES5+.

psFitz
02.06.2019 11:35
#20233242
О чем статья? Зачем статья? Почему это пропускает модерация?