Ng-include v AngularJS: Jak zahrnout soubor HTML (příklad)

Obsah:

Anonim

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 každém programovacím jazyce distribuovat funkce napříč různými soubory pro libovolnou aplikaci.

Například pokud jste měli logiku pro číselné operace, měli byste normálně chtít 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 příkazů Include, které jsou k dispozici v programovacích jazycích, jako jsou .Net a Java.

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

V tomto výukovém programu se naučíte

  • Na straně klienta je zahrnuto
  • Zahrnuje stranu serveru
  • Jak zahrnout soubor HTML do AngularJS

Na straně klienta je zahrnuto

Jedním z nejběžnějších způsobů je zahrnout HTML kód pomocí Javascript. JavaScript je programovací jazyk, který lze použít k okamžité manipulaci s obsahem stránky HTML. Javascript lze tedy také použít k zahrnutí 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.

Toto je zahrnutý soubor

Krok 2) Vytvořte soubor s názvem Sample.html, který je vaším hlavním souborem aplikace, a přidejte níže uvedený fragment kódu.

Níže jsou uvedeny hlavní aspekty týkající se níže uvedeného kódu,

  1. Ve značce body je značka div, která má ID obsahu. Na toto místo bude vložen kód z externího souboru „Sub.html“.
  2. Existuje odkaz na skript jquery. JQuery je skriptovací jazyk postavený na Javascript, který ještě více usnadňuje manipulaci s DOM.
  3. Ve funkci Javascript je prohlášení '$ ("# Content"). Load ("Sub.html");' což způsobí, že kód v souboru Sub.html bude vložen do značky div, která má ID obsahu.

Zahrnuje stranu serveru

K dispozici jsou také zahrnutí na straně serveru pro zahrnutí běžné části kódu do celého webu. To se běžně 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 zahrnutí na straně serveru, mají názvy souborů speciální přípony. Obvykle jsou přijímány webovým serverem, například .shtml, .stm, .shtm, .cgi.

Směrnice používaná k zahrnutí obsahu je „směrnice o zahrnutí“. Níže je uveden příklad direktivy include;

  • Výše uvedená směrnice umožňuje zahrnout obsah jednoho dokumentu do jiného.
  • Příkaz „virtuální“ výše se používá k určení cíle vzhledem ke kořenovému adresáři domény aplikace.
  • K virtuálnímu parametru existuje také parametr souboru, který lze použít. Parametry "soubor" se používají, když je třeba určit cestu vzhledem k adresáři aktuálního souboru.

Poznámka:

Virtuální parametr 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 zahrnutí selže. „Virtuální“ slovo je klíčové slovo, které je třeba umístit do směrnice o zahrnutí.

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 základnu kódu a vysvětlíme, jak toho lze dosáhnout pomocí Angular.

Krok 1) Pojďme napsat níže uvedený kód do souboru s názvem Table.html. Toto je soubor, který bude vložen do našeho hlavního souboru aplikace pomocí směrnice ng-include.

Níže uvedený fragment kódu předpokládá, že existuje proměnná oboru s názvem „tutorial“. Poté použije direktivu ng-repeat, která prochází každým tématem v proměnné „Výukový program“ a zobrazí hodnoty pro pár klíč – hodnota „název“ a „popis“.


 {{Název tématu}}  {{Topic.Country}} 

Krok 2) Pojďme napsat 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í směrnice „ng-include“ vložte kód do externího souboru „Table.html“. Prohlášení bylo v níže uvedeném kódu zvýrazněno tučně. Značka div '
    '
    bude tedy nahrazena celým kódem v souboru 'Table.html'.
  2. V řadiči je jako součást objektu $ scope vytvořena proměnná „tutorial“. Tato proměnná obsahuje seznam párů klíč – hodnota.

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

  1. Název - Označuje název tématu, například Řadiče, Modely a Směrnice.
  2. Popis - Poskytuje popis každého tématu

Proměnná tutoriálu je také přístupná v souboru „Table.html“.

 Registrace události 

Globální událost Guru99

Po provedení výše uvedeného kódu získáte následující výstup.

Výstup :

Souhrn:

  • 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 nejlépe preferovanou možností pro vkládání obsahu HTML z jiných souborů.
  • Dalším způsobem, jak zahrnout obsah HTML z jiných souborů, je použít direktivu a klíčové slovo virtuálního parametru. Klíčové slovo virtuálního parametru se používá k označení souboru, který je třeba vložit. Toto se označuje jako server-side includes.
  • Angular také poskytuje možnost zahrnout soubory pomocí direktivy ng-include. Tuto směrnici lze použít k vložení kódu z externích souborů přímo do hlavního souboru HTML.