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

Автор оригинала: Aditya Modi
  • Перевод
Представляем вам перевод статьи 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!
  • –2
  • 2,5k
  • 9
Plarium
144,71
Разработчик мобильных и браузерных игр
Поделиться публикацией

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

    +1
    И все? Как добавить линк на скрипт в документ?
    А как же синхронизация изменений в документе при работе фреймворка?
      0
      Был у меня грех совместного использования ReactJS и jQuery.
        0
        шо то печальный мануал
        с таким же успехом можно его НЕ использовать

        и те кто пытается все такие это делать — скорее всего не в курсе зачем ангуляр и что он может
          0
          За несколько лет работы с фреймворком у меня не было ни одного кейса, где бы можно было использовать jQuery.
          Кто-нибудь может привести пример, «когда это действительно необходимо»? Открыв статью, думал здесь именно это описывается.
            0
            В моем случае это была банальная лень) Нужно было сделать слайдер. И я просто использовал слайдер для jQuery в реакт приложении. Больше так не делал. Честно.
            0
            Как прикрутить к стулу со спинкой колёсики и делать вид что купил кресло. Мне очень понравилась статья. Теперь я знаю кто это делает.
              0
              Ребят, вот вам еще статей на год веперед:
              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 это уже за гранью добра и зла.
                0
                declare var $: any;

                Можно было хотя бы использовать @types/jQuery. А вообще смысла в jQuery нет, спасибо ES5+.

                  –1

                  О чем статья? Зачем статья? Почему это пропускает модерация?

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое