Kami menyajikan kepada Anda terjemahan artikel Aditya Modi yang diterbitkan di blog.bitsrc.io. Artikel ini adalah tentang menggunakan jQuery di aplikasi Angular.
Jarang, saya mengambil sesuatu dengan hati-hati. Namun, kehati-hatian saat ini tidak akan sakit, karena mengintegrasikan jQuery ke Angular tidak begitu sederhana.
Sebenarnya, mengapa saya menulis artikel ini? Terkadang jQuery benar-benar diperlukan untuk pengembangan di Angular, namun, kerangka kerja JavaScript seperti itu sangat jarang dikaitkan dengan pustaka ini. Angular bertanggung jawab untuk merender dan mengelola DOM, dan jika Anda mengubahnya dengan jQuery, Anda berisiko mendapat hasil yang sangat tidak terduga.
Tip : Menggunakan
Bit , Anda dapat dengan cepat berbagi komponen Angular dan menggunakannya kembali di aplikasi Anda. Ini akan memungkinkan Anda dan tim Anda menghabiskan lebih sedikit waktu untuk membuat aplikasi baru. Cobalah.
Meskipun demikian, dalam beberapa situasi, gangguan terhadap kerangka kerja perlu, dibenarkan, itu bisa menjadi jalan keluar yang nyata. Kasus-kasus ini tidak tercakup di blog saya, namun, mungkin saya akan membicarakannya di artikel saya berikutnya. Sekarang izinkan saya menunjukkan kepada Anda cara menambahkan perpustakaan jQuery ke Angular. Dalam tutorial ini, saya akan menggunakan Kode VS. Anda dapat memilih beberapa editor kode lain atau mengunduh
Visual Studio Code untuk Windows, Linux dan macOS .
Integrasi JQuery dalam Angular
Pertama-tama, kita perlu membuat aplikasi Angular menggunakan perintah
ng new . Selanjutnya, dengan bantuan
cd pergi ke folder tempat perpustakaan jQuery akan diinstal melalui npm. Mari kita sebut aplikasi yang dihasilkan
angularmeetsjquery .
ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save
Kedengarannya bagus, tetapi purist jQuery lebih memilih untuk mengunduh melalui jQuery CDN daripada melalui npm. CDN adalah cara alternatif untuk menambahkan perpustakaan jQuery ke aplikasi Angular, tapi saya lebih suka menggunakan metode npm. Jika Anda melihat
https://jquery.com/download/ , Anda akan menemukan perpustakaan jQuery CDN dan jaringan CDN lainnya dari Google, Microsoft, CDNJS, dan jsDelivr. Saya akan merekomendasikan CDN versi resmi terbaru, karena mendukung mekanisme SRI (Subresource Integrity).
Untuk menggunakan CDN jQuery, cukup buat tautan ke file dalam tag
script langsung dari domain CDN jQuery. Kode dengan fungsi Subresource Integrity akan terlihat seperti ini. (Seperti yang Anda lihat, saya menggunakan pustaka jQuery versi 3.3.1.)
<script src=”https:
Script dapat disalin dari sumber code.jquery.com. Selanjutnya, Anda perlu memasukkannya ke file
index.html di akhir tag <
body >.
Membuat perpustakaan jQuery global
File
jquery.min.js , yang terletak di folder dis dari modul jQuery, bukan untuk umum (nama folder yang benar adalah dist. -
Approx. Ed. ). Untuk membuat perpustakaan jQuery mendunia, buka
.angular-cli.json dan tulis tautan ke jalur file jQuery di dalamnya.
Saat mentransfer tautan ke jalur file di dalam aplikasi Angular, folder root adalah src. Namun, perpustakaan jQuery ada di dalam direktori
node_modules . Oleh karena itu, Anda perlu menentukan jalur yang benar ke file
.angular-cli.json .
../node_modules/jquery/dist/jquery.min.js
Untuk memastikan jalurnya benar, buka
node_modules→jquery→dist→jquery.min.js . Di sini Anda dapat melihat jalur yang ditentukan, yang berarti bahwa perpustakaan jQuery telah ditambahkan secara global untuk aplikasi ini. Jangan berharap localhost: halaman 4200 di browser Anda untuk memuat ulang sendiri, karena file tersebut berada di luar folder src. Agar perubahan muncul di aplikasi, Anda harus memulai ulang.
ng serve –open
Menggunakan jQuery dalam Aplikasi Sudut
Untuk mulai menggunakan pustaka jQuery dengan kerangka Angular, Anda harus pergi ke komponen aplikasi. Saya akan menunjukkan kepada Anda bagaimana kedua teknologi ini dapat bekerja bersama dengan elemen HTML
button sederhana. Tapi pertama-tama, hapus semua baris kode di file
app.component.html dan tambahkan elemen HTML
button .
<button> Click me </button>
Halaman akan dimuat ulang secara otomatis, maka sebuah tombol akan muncul.
Kita perlu mengatur karakter untuk jQuery di file
app.component.ts .
declare var $: any;
Kemudian masukkan kait siklus hidup
ngOnInit . Untuk melakukan ini, Anda dapat mengimpor OnInit dari Angular Core.
import { Component, OnInit} from '@angular/core';
Tambahkan
ngOnInit .
export class AppComponent implements OnInit {
Terlepas dari kesiapan DOM, Anda dapat menulis kode jQuery di dalam metode
ngOnInit , seperti yang dilakukan dengan pengembangan aplikasi web standar. Untuk menguji tombol yang dibuat di
app.component.html , tambahkan event
button.click ke metode
button.click .
export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } }
Jika Anda mengklik tombol, "Wass Up" akan muncul.
Kesimpulan
Menambahkan jQuery ke Angular serta menggunakan bundel ini adalah ide yang meragukan.
Ya, sekilas metode ini tampak sederhana. Namun, seperti yang saya katakan di awal artikel, tidak peduli seberapa menggoda penggunaan bersama kedua teknologi ini, ide yang paling sering ternyata buruk. Dalam aplikasi Angular dunia nyata, Anda harus berurusan dengan hal-hal yang jauh lebih kompleks daripada elemen
button HTML yang terkait dengan acara. Saran saya untuk semua orang
yang bekerja dengan Angular dan sedang mencari peluang untuk menanamkan jQuery dalam kode TypeScript mereka: jika tidak perlu, jangan. Semoga Anda berhasil dalam bidang jQuery dan Angular!