AngularJS ng-include: Vložení HTML souborů s příkladem
James Hartman
⚡ Chytré shrnutí
ng-include v AngularJS načítá, kompiluje a vkládá externí HTML fragment do hlavní stránky, takže sdílené kódy, jako je tabulka, záhlaví nebo zápatí, se nacházejí v jednom opakovaně použitelném částečném souboru.
Ve výchozím nastavení HTML neposkytuje možnost zahrnout kód na straně klienta z jiných souborů. Obvykle je dobrým zvykem v jakémkoli programovacím jazyce distribuovat funkce mezi různé soubory pro jakoukoli aplikaci.
Pokud byste například měli logiku pro numerické operace, normálně byste chtěli mít tuto funkci definovanou v jednom samostatném souboru. Tento samostatný soubor by pak mohl být znovu použit ve více aplikacích pouhým zahrnutím tohoto souboru.
Toto je obvykle koncept Zahrnout prohlášení které jsou k dispozici v programovací jazyky jako například .Net a Java.
Tento tutoriál se zabývá dalšími způsoby práce se soubory (soubory, které obsahují externí HTML kód) lze zahrnout do hlavního HTML souboru.
Zahrnuje stranu klienta
Jedním z nejběžnějších způsobů vkládání HTML kódu je prostřednictvím JavaSkript. JavaScénář je programovací jazyk, který lze použít k manipulaci s obsahem stránky HTML za běhu. Proto, JavaSkript lze také použít k vložení kódu z jiných souborů.
Níže uvedené kroky ukazují, jak toho lze dosáhnout.
Krok 1) Definujte soubor s názvem Sub.html a přidejte do něj následující kód.
<div> This is an included file </div>
Krok 2) Vytvořte soubor s názvem Sample.html, což je hlavní soubor vaší aplikace, a přidejte níže uvedený fragment kódu.
Níže jsou uvedeny hlavní aspekty, které je třeba poznamenat o níže uvedeném kódu,
- V tagu body je tag div, který má id Content. Toto je místo, kam bude vložen kód z externího souboru 'Sub.html'.
- Je zde odkaz na skript jQuery. jQuery je skriptovací jazyk postavený na JavaSkript, který ještě více usnadňuje manipulaci s DOMem.
- v JavaFunkce skriptu obsahuje příkaz '$(“#Content”).load(“Sub.html”);', který způsobí, že se kód ze souboru Sub.html vloží do tagu div s ID Content.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
Serverová strana zahrnuje
Zahrnutí na straně serveru jsou také k dispozici pro vložení společného kódu na celý web. To se obvykle provádí pro zahrnutí obsahu do níže uvedených částí dokumentu HTML.
- Záhlaví stránky
- Zápatí stránky
- Navigační nabídka.
Aby webový server rozpoznal zahrnutí na straně serveru (Server Side Include), názvy souborů mají speciální přípony. Webový server je obvykle akceptuje, například .shtml, .stm, .shtm, .cgi.
Direktiva používaná pro zahrnutí obsahu je „direktiva include“. Příklad direktivy include je uveden níže:
<!--#include virtual="navigation.cgi" -->
- Výše uvedená směrnice umožňuje zahrnout obsah jednoho dokumentu do jiného.
- Příkaz „virtuální“ výše uvedený kód se používá k určení cíle vzhledem ke kořenovému adresáři domény aplikace.
- K parametru virtual existuje také parametr souboru, který lze použít. Parametry „soubor“ se používají, když je potřeba zadat cestu vzhledem k adresáři aktuálního souboru.
Poznámka:
Parametr virtual se používá k určení souboru (stránka HTML, textový soubor, skript atd.), který je třeba zahrnout. Pokud proces webového serveru nemá přístup ke čtení souboru nebo ke spuštění skriptu, příkaz include selže. 'virtuální' slovo je klíčové slovo, které musí být umístěno v direktivě include.
Jak zahrnout soubor HTML do AngularJS
AngularJS poskytuje funkci pro zahrnutí funkcí z jiných souborů AngularJS pomocí ng-include Směrnice.
Primárním účelem direktivy „ng-include“ je načíst, zkompilovat a vložit externí HTML fragment do hlavní aplikace AngularJS.
Poznámka k verzi: AngularJS 1.x ukončil dlouhodobou podporu k 31. prosinci 2021 a tým frameworku uvádí, že Podpora AngularJS oficiálně ukončena v lednu 2022, takže nebudou následovat žádné verze ani bezpečnostní záplaty. Každý krok a blok kódu níže zůstává přesně tak, jak je publikován, jako historický odkaz. Modern Angular nedodává žádnou přímou náhradu: kódování se skládá z komponent a fragment vybraný za běhu je vykreslen pomocí ng-container a ngComponentOutlet.
Podívejme se na níže uvedený kód a vysvětlíme, jak toho lze dosáhnout pomocí AngularJS.
Krok 1) zapišme níže uvedený kód do souboru s názvem Table.html. Toto je soubor, který bude vložen do našeho hlavního aplikačního souboru pomocí direktivy ng-include.
Následující úryvek kódu předpokládá, že existuje proměnná rozsahu s názvem „tutorial“. Poté použije ng-opakovat direktiva, která prochází jednotlivými tématy v proměnné „tutorial“ a zobrazuje hodnoty pro „Name“ a „Descriptpár klíč-hodnota ion.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Krok 2) Napišme níže uvedený kód do souboru s názvem Main.html. Jedná se o jednoduchou aplikaci AngularJS, která má následující aspekty
- Pomocí direktivy „ng-include“ vložte kód do externího souboru „Tabulka.html“. Prohlášení bylo v níže uvedeném kódu zvýrazněno tučně. Takže značka div ' ' bude nahrazen celým kódem v souboru 'Table.html'.
- v kontrolor, jako součást objektu $scope se vytvoří „tutoriální“ proměnná. Tato proměnná obsahuje seznam párů klíč-hodnota.
V našem příkladu jsou to páry klíč-hodnota
- Název – Označuje název tématu, jako jsou ovladače, modely a směrnice.
- Description – Zde je uveden popis každého tématu
Proměnná výukového programu je také přístupná v souboru 'Table.html'.
<!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>
Když spustíte výše uvedený kód, získáte následující výstup.
Výstup:
Níže uvedený snímek obrazovky ukazuje vykreslený výsledek: karta prohlížeče nese název Registrace události, nadpis se nachází nad vloženou tabulkou a tři řádky jsou převzaty z pole tutoriálu v souboru Main.html prostřednictvím partial. Anotovaný snímek obrazovky zobrazuje nadpis Gur99, zatímco kód píše. Guru99.
Atributy ng-include: src, onload a autoscroll
Kromě názvu souboru direktiva přijímá dva volitelné atributy a lze ji zapsat třemi způsoby: jako atribut libovolného prvku, jako <ng-include> element nebo jako CSS třída. Níže uvedený odkaz se řídí oficiálním Dokumentace k ngInclude.
| Atribut | Požadovaný | Co to dělá |
|---|---|---|
| src nebo ng-include | Ano | Výraz, který se vyhodnotí jako šablona URL |
| načíst | Ne | Výraz se vyhodnocuje pokaždé, když se dokončí načítání nového partial |
| automatické posouvání | Ne | Po načtení obsahu se volá atribut $anchorScroll; vynechání atributu zakáže rolování. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Nejčastější chyba vyplývá z prvního řádku: src bere an výraz, nikoli prostý řetězec. Literálová cesta proto potřebuje uvnitř atributu vlastní uvozovky, a proto výše uvedený příklad zní ng-include="'Table.html'". Psaní ng-include="Table.html" umožňuje AngularJS vyhodnotit Table jako vlastnost rozsahu, nic nenajít a element ponechat prázdný.
Proč ng-include vytváří nový podřízený obor
Direktiva nevkládá značky do okolního rozsahu. Každé zahrnutí vytváří nový potomek. rozsah který prototypicky dědí z oboru platnosti, ve kterém byl deklarován, a tento jeden fakt vysvětluje většinu překvapení při vazbě.
Čtení funguje podle očekávání. Částečný výše uvedený kód zní tutorial přímo od rodiče, a proto ng-repeat najde pole. Zápis je bod, kde se věci zastaví: když částečný objekt přiřadí primitivu, jako u ng-model="topic", AngularJS vytváří topic v podřízeném oboru a nadřazená kopie se nikdy nemění.
Dva návyky se vyhýbají pasti:
- Vazba přes objekt, jako v
ng-model="data.topic", takže rodič a dítě dosáhnou stejné reference. - Uchovávejte stav v kontroleru nebo službě a zpřístupňujte funkce místo holých primitiv.
Include také vydává $includeContentRequested, $includeContentLoaded a $includeContentError, aby rodič mohl reagovat prostřednictvím $scope.$on aniž by se vůbec dostal do podřízeného rozsahu.
Jak opravit prázdný nebo neúspěšný ng-include
Zahrnutí, které nic nevykreslí, obvykle selže z jednoho z několika důvodů. Projděte si je v tomto pořadí.
- Zkontrolujte citace. Doslovný název souboru potřebuje uvnitř hodnoty atributu jednoduché uvozovky. Bez nich se výraz rozloží na nedefinovaný a žádný požadavek se nikdy neodešle.
- Zobrazovat stránku přes HTTP. Direktiva vydá pro partial XHR, takže otevření souboru Main.html přímo z disku pomocí adresy souboru selže ve většině prohlížečů. Jakýkoli lokální webový server toto vymaže.
- Potvrďte, že se cesta vyřeší. Sledujte panel sítě, kde se zobrazí požadavek. Kód 404 znamená, že cesta je relativní vzhledem ke stránce, která hostuje include, nikoli vzhledem k partial, který na něj odkazuje.
- Respektujte pravidlo stejného původu. Ve výchozím nastavení šablona URL musí odpovídat doméně a protokolu dokumentu aplikace, protože AngularJS jej propouští $sce.getTrustedResourceUrlŠablona z jiného zdroje potřebuje záznam v důvěryhodném zdroji. URL seznam nebo explicitní obal trustAsResourceUrl a vzdálený server musí stále odesílat hlavičky CORS.
- Poslouchejte selhání. Funkce $includeContentError se spustí vždy, když stav odpovědi klesne mimo rozsah od 200 do 299, čímž se tiše prázdná oblast promění ve zprávu, kterou stojí za to zaznamenat.
Další příčina se snadno přehlédne. AngularJS uchovává každou načtenou část v $templateCache, takže upravený soubor může nadále zobrazovat zastaralé značky, dokud není položka mezipaměti odstraněna nebo stránka znovu načtena ze zdrojového kódu. Pokud fragment potřebuje vlastní chování, spíše než pouze značky, vlastní směrnice s vlastní šablonou a izolovaným rozsahem je lepším nástrojem.
