Oletuksena HTML ei tarjoa mahdollisuutta sisällyttää asiakaspuolen koodia muista tiedostoista. Normaalisti on hyvä käytäntö kaikilla ohjelmointikielillä jakaa toimintoja eri tiedostoihin mihin tahansa sovellukseen.
Esimerkiksi, jos sinulla on logiikkaa numeerisille operaatioille, haluat yleensä, että tämä toiminto määritetään yhdessä erillisessä tiedostossa. Kyseistä erillistä tiedostoa voidaan sitten käyttää uudelleen useissa sovelluksissa sisällyttämällä vain kyseinen tiedosto.
Tämä on yleensä käsite Sisällytä-lauseet, jotka ovat käytettävissä ohjelmointikielillä, kuten .Net ja Java.
Tässä opetusohjelmassa tarkastellaan muita tapoja, joilla tiedostot (tiedostot, jotka sisältävät ulkoista HTML-koodia) voidaan sisällyttää pää HTML-tiedostoon.
Tässä opetusohjelmassa opit-
- Asiakaspuoli sisältää
- Palvelinpuoli sisältää
- HTML-tiedoston sisällyttäminen AngularJS: ään
Asiakaspuoli sisältää
Yksi yleisimmistä tavoista on sisällyttää HTML-koodi Javascriptin kautta. JavaScript on ohjelmointikieli, jota voidaan käyttää HTML-sivun sisällön käsittelyyn lennossa. Siksi Javascriptia voidaan käyttää myös koodin sisällyttämiseen muista tiedostoista.
Seuraavat vaiheet osoittavat, kuinka tämä voidaan saavuttaa.
Vaihe1 ) Määritä tiedosto nimeltä Sub.html ja lisää seuraava koodi tiedostoon.
Tämä on mukana oleva tiedosto
Vaihe 2) Luo tiedosto nimeltä Sample.html, joka on tärkein sovellustiedosto, ja lisää alla oleva koodinpätkä.
Alla on tärkeimmät huomion kohteet alla olevasta koodista,
- Runkotunnisteessa on div-tagi, jonka tunnus on Sisältö. Tämä on paikka, johon ulkoisen tiedoston Sub.html koodi lisätään.
- On viittaus jquery-komentosarjaan. JQuery on Javascriptin päälle rakennettu komentosarjakieli, joka tekee DOM-käsittelystä vieläkin helpompaa.
- Javascript-funktiossa on lause '$ ("# Content"). Load ("Sub.html");' mikä aiheuttaa tiedoston Sub.html koodin injektoinnin div-tagiin, jonka tunnus on Sisältö.
Palvelinpuoli sisältää
Palvelinpuolen sisällysluettelot ovat käytettävissä myös yleisen koodin sisällyttämiseksi kaikkialle sivustoon. Tämä tehdään yleensä sisällön sisällyttämiseksi HTML-asiakirjan alla oleviin osiin.
- Sivun otsikko
- Sivun alatunniste
- Navigointivalikko.
Jotta verkkopalvelin tunnistaa palvelinpuolen sisältävän, tiedostojen nimillä on erityiset laajennukset. Verkkopalvelin hyväksyy ne yleensä .shtml, .stm, .shtm, .cgi.
Sisällön sisällyttämiseen käytetty direktiivi on "sisällytä direktiivi". Alla on esimerkki sisällytysdirektiivistä;
- Edellä mainittu direktiivi sallii yhden asiakirjan sisällön sisällyttämisen toiseen.
- Koodin yläpuolella olevaa "virtuaalista" komentoa käytetään määrittämään kohde sovelluksen toimialueen juuriin nähden.
- Lisäksi virtuaaliseen parametriin on myös tiedosto-parametri, jota voidaan käyttää. "File" -parametreja käytetään, kun polku on määritettävä suhteessa nykyisen tiedoston hakemistoon.
Huomautus:
Virtuaalista parametria käytetään määrittämään tiedosto (HTML-sivu, tekstitiedosto, komentosarja jne.), Joka on sisällytettävä. Jos Web-palvelinprosessilla ei ole pääsyä tiedoston lukemiseen tai komentosarjan suorittamiseen, include-komento epäonnistuu. Virtuaalinen sana on avainsana, joka on lisättävä sisällytysdirektiiviin.
HTML-tiedoston sisällyttäminen AngularJS: ään
Angular tarjoaa toiminnon sisällyttää toiminnot muista AngularJS-tiedostoista käyttämällä ng-include-direktiiviä.
"Ng-include" -direktiivin ensisijaista tarkoitusta käytetään ulkoisen HTML-fragmentin hakemiseen, kääntämiseen ja sisällyttämiseen AngularJS-pääsovellukseen.
Katsotaan alla olevaa koodipohjaa ja selitetään, miten tämä voidaan saavuttaa kulmalla.
Vaihe 1) kirjoitetaan alla oleva koodi tiedostoon nimeltä Table.html. Tämä on tiedosto, joka ruiskutetaan pääsovellustiedostoon ng-include -direktiivin avulla.
Alla olevassa koodinpätkässä oletetaan, että on olemassa laajuusmuuttuja nimeltä "opetusohjelma". Sitten se käyttää ng-repeat-direktiiviä, joka käy läpi kaikki aiheet "Tutorial" -muuttujassa ja näyttää avain-arvo-parin 'nimi' ja 'kuvaus' arvot.
{{Aihe.Nimi}} {{Aihe.Maa}}
Vaihe 2) kirjoitetaan alla oleva koodi Main.html-nimiseen tiedostoon. Tämä on yksinkertainen angular.JS-sovellus, jolla on seuraavat näkökohdat
- Lisää "ng-include" -direktiivillä koodi ulkoiseen tiedostoon "Table.html". Lausunto on korostettu lihavoituna alla olevassa koodissa. Joten div-tunniste ' ' korvataan koko koodilla 'Table.html' -tiedostossa.
- Ohjaimessa "tutorial" -muuttuja luodaan osana $ scope -objektia. Tämä muuttuja sisältää luettelon avainarvopareista.
Esimerkissämme avainarvoparit ovat
- Nimi - Tämä tarkoittaa aiheen nimeä, kuten ohjaimet, mallit ja direktiivit.
- Kuvaus - Tämä antaa kuvauksen kustakin aiheesta
Opetusmuuttujaa käytetään myös 'Table.html' -tiedostossa.
Tapahtuman rekisteröinti Guru99: n maailmanlaajuinen tapahtuma
Kun suoritat yllä olevan koodin, saat seuraavan tuloksen.
Tuotos :
Yhteenveto:
- Oletuksena tiedämme, että HTML ei tarjoa suoraa tapaa sisällyttää HTML-sisältöä muista tiedostoista, kuten muista ohjelmointikielistä.
- Javascript yhdessä JQueryn kanssa on paras vaihtoehto upottaa HTML-sisältöä muista tiedostoista.
- Toinen tapa sisällyttää HTML-sisältöä muista tiedostoista on käyttää
-direktiiviä ja virtuaalisen parametrin avainsanaa. Virtuaalisen parametrin avainsanaa käytetään merkitsemään upotettava tiedosto. Tätä kutsutaan palvelinpuolen sisältämiksi. - Angular tarjoaa myös mahdollisuuden sisällyttää tiedostoja ng-include -direktiivin avulla. Tätä direktiiviä voidaan käyttää koodaamaan ulkoisista tiedostoista suoraan HTML-päätiedostoon.