Plarium 31 мая 2019 в 15:46

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

4 мин

9.5K

Блог компании PlariumAngular*JavaScript*jQuery*Программирование*

Перевод

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

Теги:

Хабы:

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

Интеграция jQuery в Angular

Делаем библиотеку jQuery глобальной

Используем jQuery в приложении на Angular

Заключение

Публикации

Информация

Истории