Ng-include di AngularJS: Cara memasukkan Fail HTML (Contoh)

Isi kandungan:

Anonim

Secara lalai, HTML tidak menyediakan kemudahan untuk memasukkan kod sisi pelanggan dari fail lain. Ini adalah amalan yang baik dalam bahasa pengaturcaraan mana pun untuk menyebarkan fungsi di pelbagai fail untuk aplikasi apa pun.

Sebagai contoh, jika anda mempunyai logik untuk operasi angka, anda biasanya ingin fungsi tersebut ditentukan dalam satu fail yang berasingan. Fail berasingan itu kemudian dapat digunakan kembali di beberapa aplikasi dengan memasukkan fail tersebut.

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

Tutorial ini melihat cara lain fail (fail yang mengandungi kod HTML luaran) dapat dimasukkan ke dalam file HTML utama.

Dalam tutorial ini, anda akan belajar-

  • Bahagian Pelanggan merangkumi
  • Bahagian Pelayan Termasuk
  • Cara memasukkan fail HTML di AngularJS

Bahagian Pelanggan merangkumi

Salah satu cara yang paling biasa adalah memasukkan kod HTML adalah melalui Javascript. JavaScript adalah bahasa pengaturcaraan yang dapat digunakan untuk memanipulasi konten dalam halaman HTML dengan cepat. Oleh itu, Javascript juga boleh digunakan untuk memasukkan kod dari fail lain.

Langkah-langkah di bawah menunjukkan bagaimana ini dapat dicapai.

Langkah 1) Tentukan fail yang disebut Sub.html dan tambahkan kod berikut ke fail.

Ini adalah fail yang disertakan

Langkah 2) Buat fail bernama Sample.html, yang merupakan fail aplikasi utama anda dan tambahkan coretan kod di bawah.

Berikut adalah aspek utama yang perlu diperhatikan mengenai kod di bawah ini,

  1. Di tag badan, terdapat tag div yang mempunyai id Kandungan. Ini adalah tempat di mana kod dari fail luaran 'Sub.html' akan dimasukkan.
  2. Terdapat rujukan untuk skrip jquery. JQuery adalah bahasa skrip yang dibina di atas Javascript yang menjadikan manipulasi DOM menjadi lebih mudah.
  3. Dalam fungsi Javascript, terdapat pernyataan '$ ("# Content"). Load ("Sub.html");' yang menyebabkan kod dalam file Sub.html disuntikkan dalam tag div yang mempunyai id Kandungan. 
    $ (fungsi () {$ ("# Kandungan"). Muat ("Sub.html");});

Bahagian Pelayan Termasuk

Pelayan Bahagian Termasuk juga tersedia untuk memasukkan sekeping kod biasa di seluruh laman web. Ini biasanya dilakukan untuk memasukkan kandungan di bahagian bawah dokumen HTML.

  1. Pengepala halaman
  2. Pengaki halaman
  3. Menu navigasi.

Agar pelayan web mengenali Sisi Pelayan, nama fail mempunyai peluasan khas. Mereka biasanya diterima oleh pelayan web seperti .shtml, .stm, .shtm, .cgi.

Arahan yang digunakan untuk memasukkan kandungan adalah "perintah arahan". Contoh arahan termasuk ditunjukkan di bawah;

  • Arahan di atas membenarkan kandungan satu dokumen dimasukkan ke dalam dokumen yang lain.
  • Perintah "maya" di atas digunakan untuk menentukan sasaran relatif dengan akar domain aplikasi.
  • Juga, untuk parameter maya, ada juga parameter file yang dapat digunakan. Parameter "file" digunakan ketika seseorang perlu menentukan jalan yang relatif dengan direktori file saat ini.

Catatan:

Parameter maya digunakan untuk menentukan fail (halaman HTML, file teks, skrip, dll.) Yang perlu disertakan. Sekiranya proses pelayan web tidak mempunyai akses untuk membaca fail atau menjalankan skrip, perintah include akan gagal. Kata 'maya' adalah kata kunci yang mesti diletakkan dalam arahan termasuk.

Cara memasukkan fail HTML di AngularJS

Angular menyediakan fungsi untuk memasukkan fungsi dari fail AngularJS lain dengan menggunakan arahan ng-include.

Tujuan utama "ng-include direction" digunakan untuk mengambil, menyusun dan memasukkan fragmen HTML luaran dalam aplikasi AngularJS utama.

Mari lihat asas kod di bawah dan terangkan bagaimana ini dapat dicapai menggunakan Angular.

Langkah 1) mari tulis kod di bawah ini dalam fail bernama Table.html. Ini adalah fail yang akan disuntikkan ke dalam file aplikasi utama kami menggunakan arahan ng-include.

Coretan kod di bawah menganggap bahawa terdapat pemboleh ubah skop yang disebut "tutorial." Ia kemudian menggunakan arahan ng-berulang, yang membahas setiap topik dalam pemboleh ubah "Tutorial" dan memaparkan nilai untuk pasangan nilai-kunci 'name' dan 'description'.


 {{Topik.Nama}}  {{Topic.Country}}

Langkah 2) mari tulis kod di bawah dalam fail yang dipanggil Main.html. Ini adalah aplikasi sudut sederhana.JS yang mempunyai aspek berikut

  1. Gunakan "arahan ng-include" untuk memasukkan kod dalam fail luaran 'Table.html'. Pernyataan tersebut telah disorot dengan tebal dalam kod di bawah. Oleh itu, tag div '
    '     akan digantikan oleh keseluruhan kod dalam fail 'Table.html'.
  2. Di pengawal, pemboleh ubah "tutorial" dibuat sebagai sebahagian dari objek $ lingkup. Pemboleh ubah ini mengandungi senarai pasangan nilai-kunci.

Dalam contoh kami, pasangan nilai utama adalah

  1. Nama - Ini menunjukkan nama topik seperti Pengawal, Model, dan Arahan.
  2. Huraian - Ini memberi penerangan mengenai setiap topik

Pemboleh ubah tutorial juga diakses dalam fail 'Table.html'.

 Pendaftaran Acara 


Acara Global Guru99


 
var sampleApp = angular.module ('sampleApp', []);sampleApp.controller ('AngularController', fungsi ($ skop) {$ lingkup.tutorial = [{Nama: "Pengawal", Keterangan: "Pengawal dalam tindakan"},{Nama: "Model", Keterangan: "Model dan data yang mengikat"},{Nama: "Arahan", Huraian: "Kelenturan Arahan"}];});

Apabila anda melaksanakan kod di atas, anda akan mendapat output berikut.

Keluaran :

Ringkasan:

  • Secara lalai, kami tahu bahawa HTML tidak menyediakan cara langsung untuk memasukkan kandungan HTML dari fail lain seperti bahasa pengaturcaraan lain.
  • Javascript bersama dengan JQuery adalah pilihan terbaik untuk menyisipkan kandungan HTML dari fail lain.
  • Cara lain untuk memasukkan kandungan HTML dari fail lain adalah dengan menggunakan arahan dan kata kunci parameter maya. Kata kunci parameter maya digunakan untuk menunjukkan fail yang perlu disematkan. Ini dikenali sebagai bahagian pelayan.
  • Angular juga menyediakan kemudahan untuk memasukkan fail dengan menggunakan arahan ng-include. Arahan ini dapat digunakan untuk memasukkan kod dari fail luaran secara langsung ke dalam fail HTML utama.