ng-include v AngularJS: Jak zahrnout soubor HTML [Příklad]

Od: James Hartman James Hartman
Hours aktualizováno

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 dostupné v programovacích jazycích jako .Net a Java.

Tento tutoriál se zabývá dalšími způsoby, jak lze soubory (soubory obsahující externí kód HTML) zahrnout do hlavního souboru HTML.

Klientská strana zahrnuje

Jedním z nejběžnějších způsobů je vložení kódu HTML prostřednictvím Javascript. JavaScénář je programovací jazyk, který lze použít k manipulaci s obsahem stránky HTML za běhu. Proto, Javascript 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,

  1. 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'.
  2. Je tam odkaz na skript jquery. JQuery je skriptovací jazyk postavený na jeho vrcholu Javascript což ještě více usnadňuje manipulaci s DOM.
  3. v Javascript funkce, existuje příkaz '$(“#Content”).load(“Sub.html”);' což způsobí, že kód v souboru Sub.html bude vložen do tagu div, který má id obsahu. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

SOUVISEJÍCÍ ČLÁNKY

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.

  1. Záhlaví stránky
  2. Zápatí stránky
  3. Navigační nabídka.

Aby webový server rozpoznal začlenění na straně serveru, mají názvy souborů speciální přípony. Webový server je obvykle přijímá, například .shtml, .stm, .shtm, .cgi.

Direktiva používaná pro zahrnutí obsahu je „zahrnout direktiva“. 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

Angular poskytuje funkci pro zahrnutí funkcí z jiných souborů AngularJS pomocí direktivy ng-include.

Primární účel „směrnice ng-include“ se používá k načtení, kompilaci a zahrnutí externího fragmentu HTML do hlavní aplikace AngularJS.

Podívejme se na níže uvedenou kódovou základnu a vysvětlíme, jak toho lze dosáhnout pomocí Angular.

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íže uvedený fragment kódu předpokládá, že existuje proměnná rozsahu s názvem „výukový program“. Poté použije direktivu ng-repeat, která projde každé téma v proměnné „Tutorial“ a zobrazí hodnoty pro pár klíč–hodnota „name“ a „description“.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Krok 2) zapišme níže uvedený kód do souboru s názvem Main.html. Toto je jednoduchá aplikace angular.JS, která má následující aspekty

  1. 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'.
  2. V ovladači je vytvořena proměnná „tutorial“ jako součást objektu $scope. Tato proměnná obsahuje seznam párů klíč–hodnota.

V našem příkladu jsou to páry klíč-hodnota

  1. Název – Označuje název tématu, jako jsou ovladače, modely a směrnice.
  2. 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:

Zahrnout soubor HTML do AngularJS

Shrnutí

  • Ve výchozím nastavení víme, že HTML neposkytuje přímý způsob, jak zahrnout obsah HTML z jiných souborů, jako jsou jiné programovací jazyky.
  • Javascript spolu s JQuery je nejvýhodnější možností pro vkládání obsahu HTML z jiných souborů.
  • Další způsob zařazení HTML obsah z jiných souborů je použít direktiva a klíčové slovo virtuální parametr. Klíčové slovo virtuální parametr se používá k označení souboru, který je třeba vložit. Toto je známé jako server-side include.
  • Angular také poskytuje možnost zahrnout soubory pomocí direktivy ng-include. Tuto direktivu lze použít k vložení kódu z externích souborů přímo do hlavního souboru HTML.