HTML predvolene neposkytuje možnosť zahrnúť kód na strane klienta z iných súborov. Obvykle je dobrým zvykom v ktoromkoľvek programovacom jazyku distribuovať funkčnosť medzi rôzne súbory pre ľubovoľnú aplikáciu.
Napríklad, ak ste mali logiku pre numerické operácie, zvyčajne by ste chceli mať túto funkcionalitu definovanú v jednom samostatnom súbore. Samostatný súbor by sa potom dal znova použiť vo viacerých aplikáciách jednoduchým zahrnutím tohto súboru.
Toto je zvyčajne koncept príkazov Include, ktoré sú dostupné v programovacích jazykoch, ako sú .Net a Java.
Tento výukový program sa zameriava na ďalšie spôsoby, ako možno súbory (súbory, ktoré obsahujú externý kód HTML) zahrnúť do hlavného súboru HTML.
V tomto návode sa naučíte
- Na strane klienta je zahrnuté
- Zahŕňa stranu servera
- Ako zahrnúť súbor HTML do AngularJS
Na strane klienta je zahrnuté
Jedným z najbežnejších spôsobov je zahrnutie kódu HTML pomocou jazyka Javascript. JavaScript je programovací jazyk, ktorý sa dá použiť na okamžitú manipuláciu s obsahom na stránke HTML. Javascript preto možno použiť aj na zahrnutie kódu z iných súborov.
Nasledujúce kroky ukazujú, ako je to možné dosiahnuť.
Krok 1) Definujte súbor s názvom Sub.html a do súboru pridajte nasledujúci kód.
Toto je zahrnutý súbor
Krok 2) Vytvorte súbor s názvom Sample.html, ktorý je vaším hlavným súborom aplikácie, a pridajte nasledujúci útržok kódu.
Nižšie uvádzame hlavné aspekty, ktoré je potrebné vziať do úvahy o nižšie uvedenom kóde,
- V značke body je značka div, ktorá má ID obsahu. Na toto miesto sa bude vkladať kód z externého súboru „Sub.html“.
- Existuje odkaz na skript jquery. JQuery je skriptovací jazyk založený na Javascripti, ktorý ešte viac uľahčuje manipuláciu s DOM.
- Vo funkcii Javascript je vyhlásenie '$ ("# Content"). Load ("Sub.html");' čo spôsobí, že sa kód v súbore Sub.html vloží do značky div, ktorá má ID obsahu.
Zahŕňa stranu servera
K dispozícii sú aj príkazy na strane servera na zahrnutie spoločného kódu do celého webu. Spravidla sa to robí tak, že sa obsah vloží do nasledujúcich častí dokumentu HTML.
- Hlavička stránky
- Päta stránky
- Navigačné menu.
Aby webový server rozpoznal Zahrnuté na strane servera, majú názvy súborov špeciálne prípony. Zvyčajne sú akceptované webovým serverom, ako sú .shtml, .stm, .shtm, .cgi.
Smernica použitá na zahrnutie obsahu je „smernica zahrnutia“. Nižšie je uvedený príklad smernice na zahrnutie.
- Vyššie uvedená smernica umožňuje zahrnúť obsah jedného dokumentu do iného.
- Príkaz „virtuálny“ uvedený vyššie sa používa na zadanie cieľa vo vzťahu ku koreňu domény aplikácie.
- K virtuálnemu parametru existuje aj parameter súboru, ktorý je možné použiť. Parametre „file“ sa používajú, keď je potrebné zadať cestu k adresáru aktuálneho súboru.
Poznámka:
Virtuálny parameter sa používa na zadanie súboru (stránka HTML, textový súbor, skript atď.), Ktorý je potrebné zahrnúť. Ak proces webového servera nemá prístup na čítanie súboru alebo vykonávanie skriptu, príkaz zahrnutia zlyhá. „Virtuálne“ slovo je kľúčové slovo, ktoré sa vyžaduje do smernice o zahrnutí.
Ako zahrnúť súbor HTML do AngularJS
Angular poskytuje funkciu na zahrnutie funkčnosti z iných súborov AngularJS pomocou smernice ng-include.
Primárny účel smernice „ng-include“ sa používa na načítanie, kompiláciu a zahrnutie externého fragmentu HTML do hlavnej aplikácie AngularJS.
Pozrime sa na nasledujúcu kódovú základňu a vysvetlíme, ako je to možné dosiahnuť pomocou Angular.
Krok 1) napíšeme nasledujúci kód do súboru s názvom Table.html. Toto je súbor, ktorý bude vložený do nášho hlavného súboru aplikácie pomocou smernice ng-include.
Fragment kódu nižšie predpokladá, že existuje premenná rozsahu s názvom „tutorial“. Potom použije direktívu ng-repeat, ktorá prechádza každou témou v premennej „Tutorial“ a zobrazuje hodnoty pre pár kľúč - hodnota „názov“ a „popis“.
{{Téma.Name}} {{Topic.Country}}
Krok 2) napíšeme nasledujúci kód do súboru s názvom Main.html. Toto je jednoduchá aplikácia angular.JS, ktorá má nasledujúce aspekty
- Pomocou smernice „ng-include“ vložte kód do externého súboru „Table.html“. Výrok bol v nasledujúcom kóde zvýraznený tučným písmom. Takže značka div ' ' bude nahradená celým kódom v súbore 'Table.html'.
- V radiči sa ako súčasť objektu $ scope vytvorí premenná „tutorial“. Táto premenná obsahuje zoznam párov kľúč - hodnota.
V našom príklade sú to páry kľúč - hodnota
- Názov - označuje názov témy, napríklad Ovládače, modely a smernice.
- Popis - poskytuje popis každej témy
Premenná tutoriálu je prístupná aj v súbore „Table.html“.
Registrácia udalosti Globálna udalosť Guru99
Po vykonaní vyššie uvedeného kódu získate nasledujúci výstup.
Výstup :
Zhrnutie:
- V predvolenom nastavení vieme, že HTML neposkytuje priamy spôsob zahrnutia obsahu HTML z iných súborov, ako sú napríklad iné programovacie jazyky.
- Javascript je spolu s JQuery najvýhodnejšou možnosťou na vkladanie obsahu HTML z iných súborov.
- Ďalším spôsobom, ako zahrnúť obsah HTML z iných súborov, je použitie smernice
a kľúčového slova virtuálnych parametrov. Kľúčové slovo virtuálneho parametra sa používa na označenie súboru, ktorý je potrebné vložiť. Toto sa označuje ako server-side includes. - Angular tiež poskytuje možnosť zahrnúť súbory pomocou smernice ng-include. Túto smernicu je možné použiť na vloženie kódu z externých súborov priamo do hlavného súboru HTML.