HTML prema zadanim postavkama ne nudi mogućnost uključivanja koda na strani klijenta iz drugih datoteka. Obično je dobra praksa u bilo kojem programskom jeziku distribucija funkcionalnosti kroz razne datoteke za bilo koju aplikaciju.
Na primjer, ako imate logiku za numeričke operacije, obično biste željeli imati tu funkcionalnost definiranu u jednoj zasebnoj datoteci. Tada bi se ta zasebna datoteka mogla ponovno koristiti u više aplikacija dodavanjem te datoteke.
To je obično koncept naredbi Include koji su dostupni u programskim jezicima kao što su .Net i Java.
Ovaj vodič proučava druge načine na koje se datoteke (datoteke koje sadrže vanjski HTML kôd) mogu uključiti u glavnu HTML datoteku.
U ovom vodiču naučit ćete-
- Klijentska strana uključuje
- Na strani poslužitelja je uključeno
- Kako uključiti HTML datoteku u AngularJS
Klijentska strana uključuje
Jedan od najčešćih načina je uključivanje HTML koda putem Javascripta. JavaScript je programski jezik koji se u hodu može koristiti za manipulaciju sadržajem na HTML stranici. Stoga se Javascript također može koristiti za uključivanje koda iz drugih datoteka.
Sljedeći koraci pokazuju kako se to može postići.
Korak1) Definirajte datoteku pod nazivom Sub.html i dodajte joj sljedeći kod.
Ovo je uključena datoteka
Korak 2) Stvorite datoteku pod nazivom Sample.html, koja je vaša glavna aplikacijska datoteka, i dodajte donji isječak koda.
Ispod su glavni aspekti koje treba napomenuti o donjem kodu,
- U oznaci tijela nalazi se oznaka div koja ima id Sadržaja. Ovo je mjesto na koje će se umetnuti kôd iz vanjske datoteke "Sub.html".
- Postoji referenca na jquery skriptu. JQuery je skriptni jezik izgrađen na vrhu Javascripta koji DOM-ovu manipulaciju čini još lakšom.
- U Javascript funkciji nalazi se izjava '$ ("# Content"). Load ("Sub.html");' zbog čega se kôd u datoteci Sub.html ubrizgava u div oznaku koja ima id Sadržaja.
Na strani poslužitelja je uključeno
Server Includes također su dostupni za uključivanje uobičajenog dijela koda na cijeloj web lokaciji. To se obično radi za uključivanje sadržaja u dolje navedene dijelove HTML dokumenta.
- Zaglavlje stranice
- Podnožje stranice
- Navigacijski izbornik.
Da bi web poslužitelj prepoznao Server Server Includes, nazivi datoteka imaju posebna nastavka. Obično ih prihvaća web poslužitelj poput .shtml, .stm, .shtm, .cgi.
Direktiva koja se koristi za uključivanje sadržaja je "uključivati direktivu". Primjer naredbe include prikazan je u nastavku;
- Gornja direktiva omogućuje uključivanje sadržaja jednog dokumenta u drugi.
- Naredba "virtualna" iznad koristi se za određivanje cilja u odnosu na korijen domene aplikacije.
- Također, virtualnom parametru pripada i parametar datoteke koji se može koristiti. Parametri "datoteke" koriste se kada treba odrediti put u odnosu na direktorij trenutne datoteke.
Bilješka:
Virtualni parametar koristi se za određivanje datoteke (HTML stranica, tekstualna datoteka, skripta itd.) Koju treba uključiti. Ako postupak web poslužitelja nema pristup za čitanje datoteke ili izvršavanje skripte, naredba uključi neće uspjeti. "Virtualna" riječ je ključna riječ koja se mora staviti u direktivu uključivanja.
Kako uključiti HTML datoteku u AngularJS
Angular pruža funkciju za uključivanje funkcionalnosti iz drugih datoteka AngularJS pomoću direktive ng-include.
Primarna svrha "ng-include direktive" koristi se za dohvaćanje, kompajliranje i uključivanje vanjskog HTML fragmenta u glavnu aplikaciju AngularJS.
Pogledajmo donju osnovu koda i objasnimo kako se to može postići pomoću Angular-a.
Korak 1) napišimo donji kod u datoteku koja se naziva Table.html. Ovo je datoteka koja će se ubrizgati u našu glavnu datoteku aplikacije pomoću direktive ng-include.
Isječak koda u nastavku pretpostavlja da postoji varijabla opsega koja se naziva "tutorial". Zatim koristi direktivu ng-repeat koja prolazi kroz svaku temu u varijabli "Vodič" i prikazuje vrijednosti za par ključ-vrijednost "ime" i "opis".
{{Topic.Name}} {{Topic.Country}}
Korak 2) napišimo donji kod u datoteku pod nazivom Main.html. Ovo je jednostavna aplikacija angular.JS koja ima sljedeće aspekte
- Upotrijebite "ng-include direktivu" za ubrizgavanje koda u vanjsku datoteku 'Table.html'. Izjava je u donjem kodu podebljano istaknuta. Dakle, oznaka div ' ' bit će zamijenjena cijelim kodom u datoteci 'Table.html'.
- U kontroleru se stvara "tutorial" varijabla kao dio $ scope objekta. Ova varijabla sadrži popis parova ključ / vrijednost.
U našem primjeru, parovi ključnih vrijednosti su
- Naziv - Ovo označava naziv teme kao što su kontroleri, modeli i smjernice.
- Opis - daje opis svake teme
Vodiču varijabli se također pristupa u datoteci 'Table.html'.
Registracija događaja Globalni događaj Guru99
Kada izvršite gornji kod, dobit ćete sljedeći izlaz.
Izlaz :
Sažetak:
- Prema zadanim postavkama znamo da HTML ne pruža izravan način za uključivanje HTML sadržaja iz drugih datoteka poput drugih programskih jezika.
- Javascript je zajedno s JQueryjem najpoželjnija opcija za ugrađivanje HTML sadržaja iz drugih datoteka.
- Drugi način uključivanja HTML sadržaja iz drugih datoteka je upotreba direktive
i ključne riječi virtualni parametar. Ključna riječ virtualni parametar koristi se za označavanje datoteke koju treba ugraditi. To je poznato pod nazivom "na strani poslužitelja". - Angular također nudi mogućnost uključivanja datoteka pomoću ng-include direktive. Ova se direktiva može koristiti za ubrizgavanje koda iz vanjskih datoteka izravno u glavnu HTML datoteku.