Wir präsentieren Ihnen eine Übersetzung eines Aditya Modi-Artikels, der auf blog.bitsrc.io veröffentlicht wurde. In diesem Artikel wird die Verwendung von jQuery in Angular-Anwendungen beschrieben.
Selten nehme ich etwas vorsichtig auf. Diesmal schadet jedoch Vorsicht nicht, da die Integration von jQuery in Angular nicht so einfach ist.
Warum habe ich diesen Artikel geschrieben? Manchmal ist jQuery für die Entwicklung auf Angular wirklich notwendig, jedoch werden solche JavaScript-Frameworks dieser Bibliothek äußerst selten zugeordnet. Angular ist für das Rendern und Verwalten des DOM verantwortlich. Wenn Sie mit jQuery Änderungen daran vornehmen, besteht die Gefahr, dass Sie ein äußerst unerwartetes Ergebnis erhalten.
Tipp : Mit
Bit können Sie Angular-Komponenten schnell freigeben und in Ihren Anwendungen wiederverwenden. Auf diese Weise können Sie und Ihr Team weniger Zeit für die Erstellung neuer Anwendungen aufwenden. Probieren Sie es aus.
Wie auch immer, in einigen Situationen ist eine Störung des Frameworks notwendig, gerechtfertigt, es kann ein echter Ausweg sein. Diese Fälle werden in meinem Blog nicht behandelt, aber vielleicht werde ich in meinen nächsten Artikeln darüber sprechen. Lassen Sie mich Ihnen nun zeigen, wie Sie die jQuery-Bibliothek zu Angular hinzufügen. In diesem Tutorial werde ich VS-Code verwenden. Sie können einen anderen Code-Editor auswählen oder
Visual Studio Code für Windows, Linux und macOS herunterladen.
JQuery-Integration in Angular
Zunächst müssen wir eine Angular-Anwendung mit dem Befehl
ng new erstellen. Als nächstes gehen
cd mit Hilfe des
cd zu dem Ordner, in dem die jQuery-Bibliothek über npm installiert wird. Nennen wir die resultierende Anwendung
angularmeetsjquery .
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
Klingt gut, aber jQuery Purist würde lieber über jQuery CDN als über npm herunterladen. CDN ist eine alternative Möglichkeit, einer Angular-Anwendung eine jQuery-Bibliothek hinzuzufügen, ich bevorzuge jedoch die Verwendung der npm-Methode. Wenn Sie sich
https://jquery.com/download/ ansehen, finden Sie jQuery CDN-Bibliotheken und andere CDN-Netzwerke von Google, Microsoft, CDNJS und jsDelivr. Ich würde die neueste offizielle Version von CDN empfehlen, da sie den SRI-Mechanismus (Subresource Integrity) unterstützt.
Um das jQuery-CDN zu verwenden, erstellen Sie einfach einen Link zu der Datei im
script Tag direkt aus der jQuery-CDN-Domäne. Code mit der Funktion Subresource Integrity sieht folgendermaßen aus. (Wie Sie sehen können, verwende ich die jQuery-Bibliothek Version 3.3.1.)
<script src=”https:
Das Skript kann aus der Ressource code.jquery.com kopiert werden. Als Nächstes müssen Sie es in die Datei
index.html am Ende des <
body > -Tags einfügen.
Die jQuery-Bibliothek global machen
Die Datei
jquery.min.js im Ordner dis des jQuery-Moduls ist nicht öffentlich (der korrekte Name des Ordners lautet dist. -
Ca. Ed. ). Um die jQuery-Bibliothek global zu gestalten,
.angular-cli.json die Datei
.angular-cli.json und schreiben Sie einen Link zum Pfad zur jQuery-Datei hinein.
Wenn Sie einen Link zu einem Dateipfad in einer Angular-Anwendung übertragen, lautet der Stammordner src. Die jQuery-Bibliothek befindet sich jedoch im Verzeichnis
node_modules . Daher müssen Sie den richtigen Pfad zur
.angular-cli.json .
../node_modules/jquery/dist/jquery.min.js
Um sicherzustellen, dass der Pfad korrekt ist,
node_modules→jquery→dist→jquery.min.js Sie in das
node_modules→jquery→dist→jquery.min.js . Hier sehen Sie den angegebenen Pfad. Dies bedeutet, dass die jQuery-Bibliothek für diese Anwendung global hinzugefügt wurde. Erwarten Sie nicht, dass sich die localhost: 4200-Seite in Ihrem Browser neu lädt, da sich die Datei außerhalb des src-Ordners befindet. Damit Änderungen in der Anwendung angezeigt werden, müssen Sie sie neu starten.
ng serve –open
Verwenden von jQuery in einer Angular-Anwendung
Um die jQuery-Bibliothek mit dem Angular-Framework zu verwenden, müssen Sie zu den Anwendungskomponenten wechseln. Ich werde Ihnen zeigen, wie diese beiden Technologien mit einem einfachen
button HTML-Element zusammenarbeiten können. Löschen Sie jedoch zuerst alle Codezeilen in der Datei
app.component.html und fügen Sie das HTML-Element der
button .
<button> Click me </button>
Die Seite wird automatisch neu geladen und eine Schaltfläche wird angezeigt.
Wir müssen das Zeichen für jQuery in der Datei
app.component.ts .
declare var $: any;
ngOnInit dann den
ngOnInit Lebenszyklus-Hook ein. Dazu können Sie OnInit aus Angular Core importieren.
import { Component, OnInit} from '@angular/core';
Fügen Sie
ngOnInit .
export class AppComponent implements OnInit {
Unabhängig von der Bereitschaft des DOM können Sie jQuery-Code in die
ngOnInit Methode schreiben, wie dies bei der Standardentwicklung von Webanwendungen der
ngOnInit ist.
button.click der
button.click Methode das Ereignis
app.component.html , um die in
app.component.html erstellte
button.click zu
button.click .
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
Wenn Sie auf die Schaltfläche klicken, wird "Wass Up" angezeigt.
Fazit
Das Hinzufügen von jQuery zu Angular sowie die Verwendung dieses Bundles ist eine zweifelhafte Idee.
Ja, auf den ersten Blick scheint die Methode einfach zu sein. Wie ich am Anfang des Artikels sagte, stellt sich die Idee jedoch am häufigsten als schlecht heraus, egal wie verlockend die gemeinsame Nutzung dieser beiden Technologien aussehen mag. In realen Angular-Anwendungen müssen Sie sich mit viel komplexeren Dingen als dem ereignisbezogenen HTML-
button befassen. Mein Rat an alle,
die mit Angular arbeiten und nach einer Möglichkeit suchen, jQuery in ihren TypeScript-Code einzubetten: Wenn nicht, nicht. Ich wünsche Ihnen erfolgreiche Experimente im Bereich jQuery und Angular!