AngularJS ng-include: Menyertakan File HTML dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

ng-include di AngularJS mengambil, mengkompilasi, dan menyuntikkan fragmen HTML eksternal ke halaman utama, sehingga markup bersama seperti tabel, header, atau footer berada dalam satu file parsial yang dapat digunakan kembali.

  • 🔘 Peran pengarah: ng-include mengambil fragmen eksternal dan memasukkannya sebagai node anak dari elemen induknya.
  • ☑️ Jalur yang dikutip: Nilai src adalah sebuah ekspresi, jadi nama file literal memerlukan tanda kutip tunggal di dalam atribut.
  • ✅ Contoh yang dikerjakan: Table.html dirender melalui ng-repeat setelah Main.html menyuntikkannya ke dalam div controller.
  • 🧪 Cakupan anak baru: Setiap penyertaan membangun cakupan anak, jadi pengikatan primitif memerlukan notasi titik.
  • ️ Bagian kosong meliputi: Aturan same-origin, $sce, dan akses file menjelaskan sebagian besar hasil kosong.
  • 📊 Catatan versi: Dukungan untuk AngularJS berakhir pada Januari 2022; Angular modern menggunakan komponen sebagai gantinya.
Baca Selengkapnya

Direktif ng-include di AngularJS menyisipkan file HTML eksternal ke dalam template utama.

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 di bahasa pemrograman seperti .Net dan Java.

Tutorial ini membahas cara lain untuk menangani file (file yang berisi data eksternal). HTML kode) dapat disertakan dalam file HTML utama.

Sisi Klien Meliputi

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

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

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. Terdapat referensi ke skrip jQuery. jQuery adalah bahasa skrip yang dibangun di atas JavaSkrip yang membuat manipulasi DOM menjadi lebih mudah.
  3. Dalam majalah JavaFungsi skrip, terdapat pernyataan '$(“#Content”).load(“Sub.html”);' yang menyebabkan kode dalam file Sub.html disuntikkan ke dalam tag div yang memiliki id Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

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 Server Side Include (SIDE), nama file harus memiliki ekstensi khusus. Ekstensi tersebut biasanya diterima oleh server web, seperti .shtml, .stm, .shtm, .cgi.

Perintah yang digunakan untuk menyertakan konten adalah "perintah include". Contoh perintah 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

AngularJS menyediakan fungsi untuk menyertakan fungsionalitas dari file AngularJS lain dengan menggunakan ng-include. Direktif.

Tujuan utama dari "directive ng-include" adalah untuk mengambil, mengkompilasi, dan menyertakan fragmen HTML eksternal ke dalam aplikasi AngularJS utama.

Catatan versi: AngularJS 1.x keluar dari Dukungan Jangka Panjang pada 31 Desember 2021, dan tim pengembang framework tersebut menyatakan bahwa Dukungan untuk AngularJS resmi berakhir. pada Januari 2022, jadi tidak ada rilis atau patch keamanan yang menyusul. Setiap langkah dan blok kode di bawah ini tetap persis seperti yang diterbitkan, sebagai referensi historis. Angular modern tidak menyediakan pengganti langsung: markup disusun dari komponen, dan fragmen yang dipilih saat runtime dirender dengan ng-container dan ngComponentOutlet.

Mari kita lihat kode di bawah ini dan jelaskan bagaimana hal ini dapat dicapai menggunakan AngularJS.

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 kode tersebut menggunakan ng-ulangi arahan, yang menelusuri setiap topik dalam variabel "tutorial" dan menampilkan nilai untuk 'Nama' dan 'Descriptpasangan kunci-nilai ion.

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

ARTIKEL TERKAIT

Langkah 2) Mari kita tulis kode di bawah ini dalam sebuah file bernama Main.html. Ini adalah aplikasi AngularJS 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. Dalam majalah pengawasSebuah variabel “tutorial” dibuat sebagai bagian dari objek $scope. Variabel ini berisi daftar pasangan kunci-nilai.

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:

Cuplikan di bawah ini menunjukkan hasil yang dirender: tab browser memuat judul Pendaftaran Acara, judul berada di atas tabel yang disisipkan, dan tiga baris diambil dari array tutorial di Main.html melalui partial. Tangkapan layar yang diberi anotasi mengeja judul Gur99 sementara kode menuliskan Guru99.

Tampilan output browser dari contoh AngularJS ng-include yang menunjukkan tabel topik yang disisipkan dari Table.html

Atribut ng-include: src, onload, dan autoscroll

Selain nama file, arahan ini menerima dua atribut opsional, dan dapat ditulis dalam tiga cara: sebagai atribut pada elemen apa pun, sebagai <ng-include> elemen, atau sebagai kelas CSS. Referensi di bawah ini mengikuti yang resmi. Dokumentasi ngInclude.

Atribut Wajib Apa yang dilakukannya
src, atau ng-include Ya Ekspresi yang menghasilkan templat URL
memuat Tidak Ekspresi dievaluasi setiap kali bagian baru selesai dimuat.
gulir otomatis Tidak Memanggil $anchorScroll setelah konten dimuat; menghilangkan atribut ini akan menonaktifkan pengguliran. 
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div>
<ng-include src="templateUrl"></ng-include>

Kesalahan yang paling umum terjadi adalah sebagai berikut dari baris pertama: src membutuhkan ekspresi, bukan string biasa. Oleh karena itu, jalur literal memerlukan tanda kutip tersendiri di dalam atribut, itulah sebabnya contoh di atas berbunyi ng-include="'Table.html'". Menulis ng-include="Table.html" membuat AngularJS mengevaluasi Table Sebagai properti cakupan, jangan temukan apa pun, dan biarkan elemen tersebut kosong.

Mengapa ng-include Membuat Lingkup Anak Baru?

Direktif tersebut tidak menempelkan markup ke dalam cakupan sekitarnya. Setiap penyertaan menciptakan anak baru. cakupan yang mewarisi secara prototipe dari cakupan tempat ia dideklarasikan, dan fakta tersebut menjelaskan sebagian besar kejutan yang mengikat.

Pembacaan berfungsi seperti yang diharapkan. Bagian di atas berbunyi: tutorial langsung dari orang tua, itulah sebabnya ng-repeat menemukan array. Kesalahan terjadi saat menulis: ketika sebuah partial memberikan nilai ke tipe data primitif, seperti pada ng-model="topic"AngularJS menciptakan topic pada lingkup anak dan salinan induk tidak pernah berubah.

Dua kebiasaan untuk menghindari jebakan ini:

  • Mengikat melalui suatu objek, seperti pada ng-model="data.topic", sehingga orang tua dan anak mencapai referensi yang sama.
  • Simpan status dalam sebuah controller atau service dan ekspos fungsi-fungsi alih-alih tipe data primitif biasa.

Include tersebut juga memancarkan $includeContentRequested, $includeContentLoaded ke $includeContentError, sehingga orang tua dapat bereaksi melalui $scope.$on tanpa mencampuri urusan anak sama sekali.

Cara Memperbaiki ng-include yang Kosong atau Gagal

Sebuah include yang tidak menghasilkan apa pun biasanya gagal karena beberapa alasan. Kerjakan alasan-alasan tersebut secara berurutan.

  1. Periksa kutipan-kutipannya. Nama file literal memerlukan tanda kutip tunggal di dalam nilai atribut. Tanpa tanda kutip tersebut, ekspresi akan menghasilkan nilai undefined dan tidak ada permintaan yang dikirim.
  2. Sajikan halaman tersebut melalui HTTP. Perintah tersebut mengeluarkan permintaan XHR untuk file parsial, sehingga membuka Main.html langsung dari disk melalui alamat file akan gagal di sebagian besar browser. Namun, server web lokal mana pun dapat mengatasi hal ini.
  3. Konfirmasikan apakah jalur tersebut berhasil diakses. Perhatikan panel jaringan untuk permintaan tersebut. Kode 404 berarti jalur tersebut relatif terhadap halaman yang memuat include, bukan terhadap partial yang merujuknya.
  4. Hormati aturan asal usul yang sama. Secara default, templat tersebut URL harus sesuai dengan domain dan protokol dokumen aplikasi, karena AngularJS meneruskannya. $sce.getTrustedResourceUrlTemplat dari tempat lain memerlukan entri di sumber tepercaya. URL daftar, atau pembungkus trustAsResourceUrl eksplisit, dan server jarak jauh tetap harus mengirimkan header CORS.
  5. Dengarkan tanda-tanda kegagalan. $includeContentError akan muncul setiap kali status respons berada di luar rentang 200 hingga 299, mengubah area kosong yang tidak menampilkan pesan menjadi pesan yang perlu dicatat.

Satu penyebab lagi yang mudah terlewatkan. AngularJS menyimpan setiap partial yang diambil di `$templateCache`, sehingga file yang diedit dapat terus menyajikan markup yang usang sampai entri cache dihapus atau halaman dimuat ulang dari sumber. Ketika sebuah fragment membutuhkan perilaku tersendiri dan bukan hanya markup saja, arahan khusus Dengan templatnya sendiri dan cakupan yang terisolasi, ini adalah alat yang lebih baik.

Pertanyaan Umum Demo Slot

ng-include menyisipkan fragmen yang Anda beri nama sendiri, di mana saja di halaman. ng-view merender template mana pun yang digunakan. router peta ke saat ini URL, dan hanya satu ng-view yang termasuk dalam sebuah layout.

Tidak. Sebuah partial hanya memuat sebuah fragmen. Wrapping Dalam tag HTML, head atau body meninggalkan elemen-elemen yang tidak diinginkan, karena markup dimasukkan sebagai node anak dari elemen induk, bukan diuraikan sebagai sebuah dokumen.

Tidak. Fragmen tersebut dikompilasi dan disisipkan sebagai node DOM, sehingga elemen skrip sebaris tidak pernah dieksekusi. Muat skrip bersama dari halaman host, atau pindahkan perilaku tersebut ke dalam controller atau directive.

Ya. Dengan ngAnimate yang dimuat, direktif tersebut memicu animasi masuk pada fragmen yang masuk dan animasi keluar pada fragmen yang keluar, dan keduanya berjalan secara bersamaan setiap kali ekspresi sumber berubah.

Ya. Karena nilainya berupa ekspresi, mengarahkannya ke properti scope akan menukar fragment setiap kali properti tersebut berubah. Lindungi elemen dengan ng-if agar tidak ada yang dimuat sampai properti tersebut berisi path yang sebenarnya.

Tidak ada padanan yang setara. Markup yang dapat digunakan kembali menjadi sebuah komponen, dan fragmen yang dipilih saat runtime akan dirender melalui ngComponentOutlet atau ngTemplateOutlet di dalam ng-container.

Model bahasa membaca kumpulan templat lama dan mengelompokkan bagian-bagian, pengontrol, dan pengikatan ke dalam komponen kandidat, kemudian mengusulkan urutan migrasi. Perlakukan output sebagai draf pertama, karena pewarisan cakupan jarang dipetakan dengan rapi ke input komponen.

Kopilot GitHub Mode agen mengubah bagian parsial menjadi komponen mandiri dengan input bertipe dan menulis ulang templat host, namun binding dan pengujian yang dihasilkan masih memerlukan tinjauan manusia.

Ringkaslah postingan ini dengan: