Nous vous présentons une traduction d'un article d'Aditya Modi publié sur blog.bitsrc.io. Cet article concerne l'utilisation de jQuery dans des applications angulaires.
Rarement, je prends quelque chose avec prudence. Cependant, cette fois, la prudence ne fera pas de mal, car l'intégration de jQuery dans Angular n'est pas si simple.
Pourquoi, en fait, ai-je écrit cet article? Parfois, jQuery est vraiment nécessaire pour le développement sur Angular, cependant, de tels cadres JavaScript sont extrêmement rarement associés à cette bibliothèque. Angular est responsable du rendu et de la gestion du DOM, et si vous y apportez des modifications avec jQuery, vous courez le risque d'obtenir un résultat extrêmement inattendu.
Astuce : à l'aide de
Bit , vous pouvez rapidement partager des composants Angular et les réutiliser dans vos applications. Cela vous permettra, à vous et à votre équipe, de passer moins de temps à créer de nouvelles applications. Essayez-le.
Quoi qu'il en soit, dans certaines situations, une ingérence dans le cadre est nécessaire, justifiée, elle peut être une véritable issue. Ces cas ne sont pas couverts dans mon blog, cependant, je vais peut-être en parler dans mes prochains articles. Maintenant, laissez-moi vous montrer comment ajouter la bibliothèque jQuery à Angular. Dans ce tutoriel, j'utiliserai VS Code. Vous pouvez choisir un autre éditeur de code ou télécharger
Visual Studio Code pour Windows, Linux et macOS .
Intégration JQuery dans Angular
Tout d'abord, nous devons créer une application angulaire à l'aide de la
ng new commande
ng new . Ensuite, à l'aide de la
cd allons dans le dossier où la bibliothèque jQuery sera installée via npm. Appelons l'application résultante
angularmeetsjquery .
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
Cela semble génial, mais jQuery purist préfère choisir de télécharger via jQuery CDN plutôt que via npm. CDN est un autre moyen d'ajouter une bibliothèque jQuery à une application Angular, mais je préfère utiliser la méthode npm. Si vous regardez
https://jquery.com/download/ , vous trouverez des bibliothèques jQuery CDN et d'autres réseaux CDN de Google, Microsoft, CDNJS et jsDelivr. Je recommanderais la dernière version officielle de CDN, car elle prend en charge le mécanisme SRI (Subresource Integrity).
Pour utiliser le jQuery CDN, créez simplement un lien vers le fichier dans la balise de
script directement à partir du domaine jQuery CDN. Le code avec la fonction d'intégrité des sous-ressources ressemblera à ceci. (Comme vous pouvez le voir, j'utilise la version 3.3.1 de la bibliothèque jQuery.)
<script src=”https:
Le script peut être copié à partir de la ressource code.jquery.com. Ensuite, vous devez l'insérer dans le fichier
index.html à la fin de la balise <
body >.
Rendre la bibliothèque jQuery globale
Le fichier
jquery.min.js , situé dans le dossier dis du module jQuery, n'est pas public (le nom correct du dossier est dist. -
Approx. Ed. ). Pour rendre la bibliothèque jQuery globale, accédez au
.angular-cli.json et écrivez-y un lien vers le chemin du fichier jQuery.
Lors du transfert d'un lien vers un chemin de fichier dans une application angulaire, le dossier racine est src. Cependant, la bibliothèque jQuery se trouve dans le répertoire
node_modules . Par conséquent, vous devez déterminer le chemin d'accès correct au
.angular-cli.json .
../node_modules/jquery/dist/jquery.min.js
Pour vous assurer que le chemin est correct, accédez au
node_modules→jquery→dist→jquery.min.js . Ici, vous pouvez voir le chemin spécifié, ce qui signifie que la bibliothèque jQuery a été ajoutée globalement pour cette application. Ne vous attendez pas à ce que la page localhost: 4200 de votre navigateur se recharge, car le fichier se trouve en dehors du dossier src. Pour que les modifications apparaissent dans l'application, vous devrez la redémarrer.
ng serve –open
Utilisation de jQuery dans une application angulaire
Pour commencer à utiliser la bibliothèque jQuery avec le framework Angular, vous devez aller dans les composants de l'application. Je vais vous montrer comment ces deux technologies peuvent fonctionner ensemble avec un simple élément HTML de
button . Mais d'abord, supprimez toutes les lignes de code dans le fichier
app.component.html et ajoutez l'élément HTML du
button .
<button> Click me </button>
La page se rechargera automatiquement, puis un bouton apparaîtra.
Nous devons définir le caractère pour jQuery dans le fichier
app.component.ts .
declare var $: any;
Insérez ensuite le crochet de cycle de vie
ngOnInit . Pour ce faire, vous pouvez importer OnInit depuis Angular Core.
import { Component, OnInit} from '@angular/core';
Ajoutez
ngOnInit .
export class AppComponent implements OnInit {
Quelle que soit la disponibilité du DOM, vous pouvez écrire du code jQuery à l'intérieur de la méthode
ngOnInit , comme c'est le cas avec le développement d'applications Web standard. Pour tester le bouton créé dans
app.component.html , ajoutez l'événement
button.click à la méthode
button.click .
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
Si vous cliquez sur le bouton, «Wass Up» apparaîtra.
Conclusion
Ajouter jQuery à Angular et utiliser ce bundle est une idée douteuse.
Oui, à première vue, la méthode semble simple. Cependant, comme je l'ai dit au début de l'article, quelle que soit la tentation de l'utilisation conjointe de ces deux technologies, l'idée s'avère le plus souvent mauvaise. Dans les applications Angular du monde réel, vous devez gérer des choses beaucoup plus complexes que l'élément de
button HTML lié à l'événement. Mon conseil à tous ceux
qui travaillent avec Angular et recherchent une opportunité d'intégrer jQuery dans leur code TypeScript: si ce n'est pas nécessaire, ne le faites pas. Je vous souhaite des expériences réussies dans le domaine de jQuery et Angular!