Secara default, HTML tidak menyediakan fasilitas untuk memasukkan kode sisi klien dari file lain. Biasanya praktik yang baik dalam bahasa pemrograman apa pun untuk mendistribusikan fungsionalitas ke berbagai file untuk aplikasi apa pun.
Misalnya, jika Anda memiliki logika untuk operasi numerik, Anda biasanya ingin fungsionalitas itu ditentukan dalam satu file terpisah. File terpisah itu kemudian dapat digunakan kembali di beberapa aplikasi hanya dengan menyertakan file itu.
Ini biasanya merupakan konsep pernyataan Sertakan yang tersedia dalam bahasa pemrograman seperti .Net dan Java.
Tutorial ini membahas cara lain agar file (file yang berisi kode HTML eksternal) dapat dimasukkan ke dalam file HTML utama.
Dalam tutorial ini, Anda akan belajar-
- Sisi Klien termasuk
- Server Side Termasuk
- Bagaimana cara memasukkan file HTML di AngularJS
Sisi Klien termasuk
Salah satu cara yang paling umum adalah memasukkan kode HTML adalah melalui Javascript. JavaScript adalah bahasa pemrograman yang dapat digunakan untuk memanipulasi konten di halaman HTML dengan cepat. Karenanya, Javascript juga dapat digunakan untuk memasukkan kode dari file lain.
Langkah-langkah di bawah ini menunjukkan bagaimana hal ini dapat dicapai.
Step1) Tentukan file bernama Sub.html dan tambahkan kode berikut ke file.
Ini adalah file yang disertakan
Langkah 2) Buat file bernama Sample.html, yang merupakan file aplikasi utama Anda dan tambahkan cuplikan kode di bawah ini.
Di bawah ini adalah aspek utama yang perlu diperhatikan tentang kode di bawah ini,
- Di tag body, ada tag div yang memiliki id Konten. Ini adalah tempat di mana kode dari file eksternal 'Sub.html' akan dimasukkan.
- Ada referensi ke skrip jquery. JQuery adalah bahasa skrip yang dibangun di atas Javascript yang membuat manipulasi DOM menjadi lebih mudah.
- Dalam fungsi Javascript, ada pernyataan '$ ("# Content"). Load ("Sub.html");' yang menyebabkan kode di file Sub.html dimasukkan ke dalam tag div yang memiliki id Konten.
Server Side Termasuk
Server Side Includes juga tersedia untuk menyertakan potongan kode umum di seluruh situs. Ini biasanya dilakukan untuk memasukkan konten di bagian bawah dokumen HTML.
- Kepala halaman
- Footer halaman
- Menu navigasi.
Agar server web mengenali Server Side Includes, nama file memiliki ekstensi khusus. Mereka biasanya diterima oleh server web seperti .shtml, .stm, .shtm, .cgi.
Perintah yang digunakan untuk memasukkan konten adalah "perintah termasuk". Contoh dari direktif include ditunjukkan di bawah ini;
- Arahan di atas memungkinkan isi dari satu dokumen untuk dimasukkan ke dalam dokumen lain.
- Perintah "virtual" di atas kode digunakan untuk menentukan target relatif terhadap root domain aplikasi.
- Selain itu, untuk parameter virtual juga terdapat parameter file yang dapat digunakan. Parameter "file" digunakan ketika seseorang perlu menentukan jalur relatif ke direktori file saat ini.
catatan:
Parameter virtual digunakan untuk menentukan file (halaman HTML, file teks, skrip, dll.) Yang perlu disertakan. Jika proses server web tidak memiliki akses untuk membaca file atau menjalankan skrip, perintah include akan gagal. Kata 'virtual' adalah kata kunci yang harus ditempatkan di direktif include.
Bagaimana cara memasukkan file HTML di AngularJS
Angular menyediakan fungsi untuk menyertakan fungsionalitas dari file AngularJS lainnya dengan menggunakan direktif ng-include.
Tujuan utama dari "perintah ng-include" digunakan untuk mengambil, mengompilasi, dan menyertakan fragmen HTML eksternal dalam aplikasi AngularJS utama.
Mari kita lihat basis kode di bawah ini dan jelaskan bagaimana ini dapat dicapai dengan menggunakan Angular.
Langkah 1) mari tulis kode di bawah ini dalam sebuah file bernama Table.html. Ini adalah file yang akan dimasukkan ke dalam file aplikasi utama kita menggunakan direktif ng-include.
Potongan kode di bawah ini mengasumsikan bahwa ada variabel lingkup yang disebut "tutorial." Ini kemudian menggunakan direktif ng-repeat, yang melewati setiap topik dalam variabel "Tutorial" dan menampilkan nilai untuk key-value pair 'name' dan 'description'.
{{Topic.Name}} {{Topic.Country}}
Langkah 2) mari tulis kode di bawah ini dalam sebuah file bernama Main.html. Ini adalah aplikasi angular.JS sederhana yang memiliki aspek-aspek berikut
- Gunakan "perintah ng-include" untuk memasukkan kode ke file eksternal 'Table.html'. Pernyataan tersebut telah ditebalkan dalam kode di bawah ini. Jadi tag div ' ' akan diganti dengan seluruh kode dalam file 'Table.html'.
- Di controller, variabel "tutorial" dibuat sebagai bagian dari objek $ scope. Variabel ini berisi daftar pasangan nilai kunci.
Dalam contoh kami, pasangan nilai kuncinya adalah
- Nama - Ini menunjukkan nama topik seperti Pengontrol, Model, dan Direktif.
- Deskripsi - Ini memberikan deskripsi untuk setiap topik
Variabel tutorial juga diakses di file 'Table.html'.
Pendaftaran Acara Acara Global Guru99
Saat Anda menjalankan kode di atas, Anda akan mendapatkan output berikut.
Keluaran :
Ringkasan:
- Secara default, kita tahu bahwa HTML tidak menyediakan cara langsung untuk memasukkan konten HTML dari file lain seperti bahasa pemrograman lain.
- Javascript bersama dengan JQuery adalah opsi yang paling disukai untuk menyematkan konten HTML dari file lain.
- Cara lain untuk menyertakan konten HTML dari file lain adalah dengan menggunakan direktif
dan kata kunci parameter virtual. Kata kunci parameter virtual digunakan untuk menunjukkan file yang perlu disematkan. Ini dikenal sebagai penyertaan sisi server. - Angular juga menyediakan fasilitas untuk memasukkan file dengan menggunakan direktif ng-include. Arahan ini dapat digunakan untuk memasukkan kode dari file eksternal langsung ke file HTML utama.