ng-include az AngularJS-ben: HTML-fájl hozzáadása [Példa]

By: James Hartman James Hartman
Hours korszerűsített

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 olyan programozási nyelveken érhetők el, mint a .Net és Java.

Ez az oktatóanyag megvizsgálja a fájlok (külső HTML-kódot tartalmazó fájlok) egyéb módjait is, amelyekkel a fő HTML-fájlba kerülhetnek.

Az ügyféloldal tartalmazza

Az egyik leggyakoribb módja a HTML kód beillesztése a via Javascript. JavaForgatókönyv egy programozási nyelv, amellyel menet közben lehet manipulálni egy HTML-oldal tartalmát. Ezért, Javascript más fájlokból származó kód beillesztésére is használható.

Az alábbi lépések bemutatják, hogyan lehet ezt megvalósítani.

1. lépés) 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,

  1. 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.
  2. Van egy hivatkozás egy jquery szkriptre. A JQuery egy szkriptnyelv, amely a tetejére épült Javascript ami még könnyebbé teszi a DOM-manipulációt.
  3. A Javascript függvény, van egy utasítás: '$(“#Content”).load(“Sub.html”);' ami azt eredményezi, hogy a Sub.html fájlban található kód a tartalom azonosítójával rendelkező div címkébe kerül. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

KAPCSOLÓDÓ CIKKEK

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.

  1. Oldalfejléc
  2. Oldal lábléce
  3. Navigációs menü.

Ahhoz, hogy a webszerver felismerje a kiszolgálóoldali elemeket, a fájlnevek speciális kiterjesztéssel rendelkeznek. Általában elfogadja ezeket a webszerver, például .shtml, .stm, .shtm , .cgi.

A tartalom felvételére használt direktíva az „include irányelv”. Az alábbiakban egy példa látható az include direktívára;

<!--#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

Az Angular biztosítja a funkciót más AngularJS-fájlok funkcionalitásának felvételére az ng-include direktíva használatával.

Az „ng-include direktíva” elsődleges célja egy külső HTML-részlet lekérésére, fordítására és beillesztésére szolgál a fő AngularJS alkalmazásban.

Nézzük meg az alábbi kódbázist, és magyarázzuk el, hogyan érhető el ez az Angular 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 „oktatóanyag” nevű hatókörváltozó. Ezután az ng-repeat direktívát használja, amely végigmegy a „Tutorial” változó minden egyes témakörén, és megjeleníti a „name” és a „description” kulcs-érték pár értékeit.

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

Step 2) írjuk be az alábbi kódot egy Main.html nevű fájlba. Ez egy egyszerű angular.JS alkalmazás, amely a következő szempontokkal rendelkezik

  1. 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.
  2. A vezérlőben egy „oktató” 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

  1. Név – Ez egy témakör nevét jelöli, például Vezérlők, Modellek és Irányelvek.
  2. 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:

Szereljen be HTML-fájlt az AngularJS-be

Összegzésként

  • Alapértelmezés szerint tudjuk, hogy a HTML nem biztosít közvetlen módot a HTML-tartalom felvételére más, például más fájlokból programozási nyelvek.
  • Javascript a JQuery mellett a legjobban preferált lehetőség HTML-tartalom beágyazására más fájlokból.
  • Egy másik módja a beilleszkedésnek HTML más fájlokból származó tartalmat a direktíva és a virtuális paraméter kulcsszó. A virtuális paraméter kulcsszó a beágyazandó fájl jelölésére szolgál. Ezt szerveroldali magában foglalja.
  • Az Angular lehetőséget biztosít a fájlok felvételére is az ng-include direktíva használatával. Ez a direktíva arra használható, hogy a külső fájlokból származó kódot közvetlenül a fő HTML-fájlba illessze be.