AngularJS ng-include: HTML fájlok beillesztése példával
James Hartman
⚡ Okos összefoglaló
Az AngularJS ng-include metódusa lekéri, lefordítja és beilleszti a főoldalra a külső HTML-részletet, így a megosztott jelölők, például egy táblázat, egy fejléc vagy egy lábléc egyetlen újrafelhasználható részleges fájlban találhatók.
A HTML alapértelmezés szerint nem teszi lehetővé más fájlokból származó kliensoldali kód felvételét. Általában minden programozási nyelvben bevált gyakorlat, hogy a funkcionalitást bármely alkalmazás különböző fájljai között osztják el.
Például, ha rendelkezik logikával a numerikus műveletekhez, akkor ezt a funkciót általában egy külön fájlban szeretné meghatározni. Ezt a külön fájlt ezután több alkalmazásban is újra fel lehet használni, ha csak azt a fájlt tartalmazza.
Általában ez a fogalma Tartalmazzon nyilatkozatokat amelyek elérhetők programozási nyelvek például a .Net és Java.
Ez az oktatóanyag a fájlok (külső tartalmat tartalmazó fájlok) más módjait vizsgálja. HTML kód) belefoglalható a fő HTML fájlba.
Kliensoldali tartalmak
A HTML kód beillesztésének egyik leggyakoribb módja a következő: JavaForgatókönyv. JavaForgatókönyv egy programozási nyelv, amellyel menet közben lehet manipulálni egy HTML-oldal tartalmát. Ezért, JavaA szkriptek más fájlokból származó kódok beillesztésére is használhatók.
Az alábbi lépések bemutatják, hogyan lehet ezt elérni.
Step 1) Határozzon meg egy Sub.html nevű fájlt, és adja hozzá a következő kódot a fájlhoz.
<div> This is an included file </div>
Step 2) Hozzon létre egy Sample.html nevű fájlt, amely a fő alkalmazásfájlja, és adja hozzá az alábbi kódrészletet.
Az alábbiakban felsoroljuk az alábbi kóddal kapcsolatos főbb szempontokat,
- A body címkében van egy div címke, amelynek a Content azonosítója van. Ez az a hely, ahová a „Sub.html” külső fájl kódja kerül beillesztésre.
- Van egy jQuery szkriptre való hivatkozás. A jQuery egy szkriptnyelv, amely a következőre épül: JavaSzkript, ami még könnyebbé teszi a DOM manipulációját.
- A JavaEgy szkriptfüggvényben van egy '$(“#Content”).load(“Sub.html”);' utasítás, amely a Sub.html fájlban található kódot a Content azonosítójú div tagbeillesztését eredményezi.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Szerver oldalt tartalmaz
A Server Side Includes egy közös kódrészletet is tartalmazhat a webhelyen. Ez általában akkor történik, ha egy HTML-dokumentum alábbi részeibe tartalom kerül bele.
- Oldalfejléc
- Oldal lábléce
- Navigációs menü.
Ahhoz, hogy egy webszerver felismerje a Server Side Include-ot, a fájlneveknek speciális kiterjesztéseik vannak. Ezeket általában a webszerver elfogadja, például .shtml, .stm, .shtm, .cgi.
A tartalom beillesztésére használt direktíva az „include direktíva”. Az include direktíva egy példája alább látható:
<!--#include virtual="navigation.cgi" -->
- A fenti direktíva lehetővé teszi, hogy egy dokumentum tartalma egy másik dokumentumba kerüljön.
- A fenti kód „virtuális” parancsa az alkalmazás tartománygyökéréhez viszonyított cél megadására szolgál.
- Ezenkívül a virtuális paraméterhez tartozik a fájl paraméter is, amely használható. A „file” paraméterek akkor használatosak, ha meg kell adni az elérési utat az aktuális fájl könyvtárához képest.
Jegyzet:
A virtuális paraméterrel megadható, hogy milyen fájlt (HTML oldal, szövegfájl, szkript stb.) kell tartalmazni. Ha a webszerver folyamatának nincs hozzáférése a fájl olvasásához vagy a szkript végrehajtásához, az include parancs meghiúsul. A „virtuális” szó egy kulcsszó, amelyet az include direktívában kell elhelyezni.
HTML-fájl beillesztése az AngularJS-be
AngularJS biztosítja a funkciót, amely más AngularJS fájlokból származó funkciókat foglal magában az ng-include használatával. Irányelv.
Az „ng-include direktive” elsődleges célja egy külső HTML-fragmentum lekérése, lefordítása és beillesztése a fő AngularJS alkalmazásba.
Verzió megjegyzés: Az AngularJS 1.x 2021. december 31-én kilépett a hosszú távú támogatásból, és a keretrendszer csapata kijelentette, hogy Az AngularJS támogatása hivatalosan megszűnt 2022 januárjában, így nem követnek kiadások vagy biztonsági javítások. Minden alábbi lépés és kódblokk pontosan úgy marad, ahogyan közzétették, a történelmi hivatkozásként. A Modern Angular nem tartalmaz közvetlen helyettesítést: a jelölőnyelv komponensekből áll, és egy futásidejű kiválasztott töredéket renderelnek a következővel: ng-container és ngComponentOutlet.
Nézzük meg az alábbi kódbázist, és magyarázzuk el, hogyan érhető el ez AngularJS használatával.
Step 1) írjuk be az alábbi kódot egy Table.html nevű fájlba. Ez az a fájl, amely az ng-include direktíva segítségével bekerül a fő alkalmazásfájlunkba.
Az alábbi kódrészlet feltételezi, hogy létezik egy „tutorial” nevű hatókörű változó. Ezután a következőt használja: ng-ismétlés direktíva, amely végigmegy a „tutorial” változó minden egyes témáján, és megjeleníti a „Name” és a „Description kulcs-érték pár.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Step 2) Írjuk meg az alábbi kódot egy Main.html nevű fájlba. Ez egy egyszerű AngularJS alkalmazás, amely a következő aspektusokkal rendelkezik:
- Használja az „ng-include direktívát” a kód beszúrásához a „Table.html” külső fájlba. Az alábbi kódban az állítás félkövérrel kiemelve. Tehát a div címke ' ' helyébe a „Table.html” fájl teljes kódja lép.
- A ellenőr, egy „tutorial” változó jön létre a $scope objektum részeként. Ez a változó kulcs-érték párok listáját tartalmazza.
Példánkban a kulcsértékpárok a következők
- Név – Ez egy témakör nevét jelöli, például Vezérlők, Modellek és Irányelvek.
- Description – Ez ad leírást az egyes témákról
Az oktatóanyag változó a „Table.html” fájlban is elérhető.
<!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>
Amikor végrehajtja a fenti kódot, a következő kimenetet kapja.
teljesítmény:
Az alábbi kép a renderelt eredményt mutatja: a böngészőfül címe Eseményregisztráció, a fejléc a befecskendezett tábla felett található, a három sor pedig a Main.html fájlban található oktatóanyag tömbjéből származik a részlegesen. A jegyzetekkel ellátott képernyőképen a Gur99 fejléc látható, miközben a kód a következőt írja: Guru99.
ng-include attribútumok: src, onload és autoscroll
A fájlnéven túl az utasítás két opcionális attribútumot fogad el, és háromféleképpen írható meg: bármely elem attribútumaként, <ng-include> elemként, vagy CSS osztályként. Az alábbi hivatkozás a hivatalos hivatkozást követi. ngInclude dokumentáció.
| Attribútum | Kötelező | Mit csinál |
|---|---|---|
| src vagy ng-include | Igen | Sablonként kiértékelt kifejezés URL |
| Feltöltés alatt | Nem | A kifejezés minden alkalommal kiértékelődik, amikor egy új részleges betöltés befejeződik. |
| automatikus görgetés | Nem | A tartalom betöltése után meghívja az $anchorScroll függvényt; az attribútum elhagyása letiltja a görgetést. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
A leggyakoribb hiba az első sorból következik: src vesz egy kifejezés, nem egy sima karakterlánc. Egy literális elérési útnak ezért saját idézőjeleket kell tennie az attribútumon belül, ezért a fenti példa így néz ki: ng-include="'Table.html'"Írás ng-include="Table.html" Az AngularJS kiértékelését teszi lehetővé Table hatókör tulajdonságként ne találjon semmit, és hagyja üresen az elemet.
Miért hoz létre az ng-include új gyermekhatókört?
Az utasítás nem illeszti be a jelöléseket a környező hatókörbe. Minden include létrehoz egy új gyermeket. hatálya amely prototípusosan örököl attól a hatókörtől, amelyben deklarálták, és ez az egyetlen tény magyarázza a legtöbb kötelező érvényű meglepetést.
Az olvasás a várt módon működik. A fenti részleges szöveg olvasható. tutorial egyenesen a szülőtől, ezért ng-repeat megkeresi a tömböt. Az írásban van a hiba: amikor egy részleges érték egy primitívhez rendelődik hozzá, mint például a ng-model="topic", az AngularJS létrehozza topic a gyermek hatókörén, a szülő példány pedig soha nem változik.
Két szokás kerüli el a csapdát:
- Kötés egy objektumon keresztül, mint például
ng-model="data.topic", így a szülő és a gyermek ugyanarra a referenciára jut. - Tartsd meg az állapotot egy vezérlőben vagy szolgáltatásban, és csupasz primitívek helyett függvényeket jeleníts meg.
Az include (beleértve) szintén kibocsát $includeContentRequested, $includeContentLoaded és a $includeContentErrorígy a szülő reagálhat $scope.$on anélkül, hogy egyáltalán belenyúlnánk a gyermek hatókörébe.
Üres vagy hibás ng-include javítása
Egy semmit sem renderelő include általában több okból is meghiúsulhat. Ezeket ebben a sorrendben kell végigvinni.
- Ellenőrizd az idézeteket. Egy literális fájlnévben aposztrófoknak kell lenniük az attribútum értékén belül. Ezek nélkül a kifejezés „undefined”-re oszlik, és soha nem kerül sor kérés küldésére.
- HTTP-n keresztül szolgáltasd ki az oldalt. Az utasítás egy XHR-t ad ki a részleges fájlhoz, így a Main.html fájl közvetlenül a lemezről történő megnyitása egy fájlcímen keresztül a legtöbb böngészőben sikertelen. Bármely helyi webszerver törli ezt.
- Erősítse meg, hogy az elérési út feloldódott. Figyeld a hálózati panelt a kérés miatt. A 404-es hiba azt jelenti, hogy az elérési út a benne foglalt részt tartalmazó oldalhoz képest relatív, nem pedig a rá hivatkozó részlegeshez.
- Tartsd tiszteletben az azonos származásúak elvét. Alapértelmezés szerint a sablon URL meg kell egyeznie az alkalmazásdokumentum domainjével és protokolljával, mivel az AngularJS áthalad rajta $sce.getTrustedResourceUrlEgy máshonnan származó sablonnak bejegyzésre van szüksége a megbízható erőforrásban. URL lista, vagy egy explicit trustAsResourceUrl burkoló, és a távoli kiszolgálónak továbbra is CORS fejléceket kell küldenie.
- Figyelj a kudarcra. Az $includeContentError hibakód akkor aktiválódik, amikor a válasz állapota 200 és 299 közötti tartományon kívülre esik, így egy csendes üres terület naplózásra érdemes üzenetté alakul.
Egy másik ok könnyen figyelmen kívül hagyható. Az AngularJS minden lekért részleges értéket a $templateCache-ben tárol, így egy szerkesztett fájl továbbra is elavult jelölést jeleníthet meg, amíg a gyorsítótár-bejegyzést el nem távolítják, vagy az oldalt újra be nem töltik a forrásból. Amikor egy töredéknek saját viselkedésre van szüksége a jelölés önmagában helyett, egy egyéni utasítás a saját sablonjával és izolált hatókörével a jobb eszköz.
