ng-include di AngularJS: Cara memasukkan File HTML [Contoh]

Oleh: James Hartman James Hartman
Hours Updated

Secara default, HTML tidak menyediakan fasilitas untuk memasukkan kode sisi klien dari file lain. Biasanya merupakan 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 agar fungsionalitas tersebut didefinisikan dalam satu berkas terpisah. Berkas terpisah tersebut kemudian dapat digunakan kembali di beberapa aplikasi hanya dengan menyertakan berkas tersebut.

Ini biasanya merupakan konsep Sertakan pernyataan yang tersedia dalam bahasa pemrograman seperti .Net dan Java.

Tutorial ini membahas cara lain untuk memasukkan file (file yang berisi kode HTML eksternal) ke dalam file HTML utama.

Sisi Klien termasuk

Salah satu cara paling umum untuk memasukkan kode HTML adalah melalui Javascript. JavaNaskah adalah bahasa pemrograman yang dapat digunakan untuk memanipulasi konten dalam halaman HTML dengan cepat. Karena itu, Javascript juga dapat digunakan untuk memasukkan kode dari file lain.

Langkah-langkah di bawah ini menunjukkan bagaimana hal ini dapat dicapai.

Langkah 1) Tentukan sebuah berkas bernama Sub.html dan tambahkan kode berikut ke dalam berkas tersebut.

<div>
	This is an included file
</div>

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,

  1. Pada tag body terdapat tag div yang memiliki id Content. Ini adalah tempat di mana kode dari file eksternal 'Sub.html' akan disisipkan.
  2. Ada referensi ke skrip jquery. JQuery adalah bahasa skrip yang dibangun di atas Javascript yang membuat manipulasi DOM menjadi lebih mudah.
  3. Dalam majalah Javascript fungsi, ada pernyataan '$(“#Content”).load(“Sub.html”);' yang menyebabkan kode pada file Sub.html dimasukkan ke dalam tag div yang memiliki id Konten. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

ARTIKEL TERKAIT

Sisi Server Termasuk

Penyertaan Sisi Server juga tersedia untuk menyertakan potongan kode umum di seluruh situs. Hal ini biasanya dilakukan untuk memasukkan konten di bagian bawah dokumen HTML.

  1. Kepala halaman
  2. Catatan kaki halaman
  3. Menu navigasi.

Agar server web dapat mengenali Termasuk Sisi Server, nama file memiliki ekstensi khusus. Biasanya diterima oleh server web seperti .shtml, .stm, .shtm, .cgi.

Perintah yang digunakan untuk memasukkan konten adalah “perintah sertakan”. Contoh direktif include ditunjukkan di bawah ini;

<!--#include virtual="navigation.cgi" -->
  • Arahan di atas mengizinkan konten satu dokumen untuk dimasukkan ke dalam dokumen lain.
  • Perintah “virtual” di atas kode digunakan untuk menentukan target relatif terhadap root domain aplikasi.
  • Selain parameter virtual, ada juga parameter file yang dapat digunakan. Parameter "file" digunakan ketika seseorang perlu menentukan jalur relatif terhadap 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 wajib ditempatkan di direktif include.

Cara memasukkan file HTML di AngularJS

Angular menyediakan fungsi untuk menyertakan fungsionalitas dari file AngularJS lainnya dengan menggunakan direktif ng-include.

Tujuan utama dari “ng-include directive” digunakan untuk mengambil, mengkompilasi dan menyertakan fragmen HTML eksternal dalam aplikasi utama AngularJS.

Mari kita lihat basis kode di bawah ini dan jelaskan bagaimana hal ini dapat dicapai dengan menggunakan Angular.

Langkah 1) mari kita tulis kode di bawah ini dalam file bernama Table.html. Ini adalah file yang akan dimasukkan ke dalam file aplikasi utama kita menggunakan direktif ng-include.

Cuplikan kode di bawah ini mengasumsikan bahwa ada variabel cakupan yang disebut “tutorial.” Kemudian menggunakan direktif ng-repeat, yang menelusuri setiap topik dalam variabel “Tutorial” dan menampilkan nilai untuk pasangan nilai kunci 'nama' dan 'deskripsi'.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Langkah 2) mari kita tulis kode di bawah ini dalam sebuah file bernama Main.html. Ini adalah aplikasi angular.JS sederhana yang memiliki aspek-aspek berikut

  1. Gunakan “direktif ng-include” untuk memasukkan kode ke file eksternal 'Table.html'. Pernyataan tersebut telah disorot dalam huruf tebal pada kode di bawah ini. Jadi tag div ' ' akan digantikan oleh seluruh kode di file 'Table.html'.
  2. Di pengontrol, variabel “tutorial” dibuat sebagai bagian dari objek $scope. Variabel ini berisi daftar pasangan nilai kunci.

Dalam contoh kita, pasangan nilai kuncinya adalah

  1. Nama – Ini menunjukkan nama topik seperti Pengontrol, Model, dan Petunjuk.
  2. Description – Ini memberikan deskripsi setiap topik

Variabel tutorial juga diakses di file 'Table.html'.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

Ketika Anda mengeksekusi kode di atas, Anda akan mendapatkan keluaran berikut.

Keluaran:

Sertakan file HTML di AngularJS

Ringkasan

  • Secara default, kita tahu bahwa HTML tidak menyediakan cara langsung untuk memasukkan konten HTML dari file lain seperti lainnya bahasa pemrograman.
  • Javascript bersama dengan JQuery adalah opsi pilihan terbaik untuk menyematkan konten HTML dari file lain.
  • Cara lain untuk memasukkan HTML konten 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.