Ng-include az AngularJS-ben: Hogyan lehet HTML fájlt felvenni (példa)

Tartalomjegyzék:

Anonim

Alapértelmezés szerint a HTML nem biztosítja azt a lehetőséget, hogy más fájlok kliensoldali kódját is belefoglalja. Általában bevett gyakorlat minden programozási nyelven, ha a funkciókat minden alkalmazáshoz különféle fájlok között osztják el.

Például, ha logikája van a numerikus műveletekhez, akkor azt szeretné, hogy ezt a funkciót egy külön fájlban definiálja. Ezt a különálló fájlt ezután több alkalmazásban is fel lehet használni, csak a fájlt hozzáadva.

Ez általában az Include utasítások fogalma, amelyek olyan programozási nyelveken érhetők el, mint a .Net és a Java.

Ez az oktatóanyag azt vizsgálja, hogy a fájlok (külső HTML-kódot tartalmazó fájlok) hogyan helyezhetők el a fő HTML-fájlban.

Ebben az oktatóanyagban megtanulja-

  • Az Ügyféloldal tartalmazza
  • A szerver oldalt tartalmazza
  • Hogyan lehet HTML fájlt beépíteni az AngularJS-be

Az Ügyféloldal tartalmazza

Az egyik leggyakoribb módszer a HTML kód beépítése a Javascript segítségével. A JavaScript egy olyan programozási nyelv, amellyel menet közben lehet manipulálni egy HTML-oldal tartalmát. Ezért a Javascript használható más fájlok kódjának beillesztésére is.

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

1. lépés : Adjon meg egy Sub.html nevű fájlt, és adja hozzá a következő kódot a fájlhoz.

Ez egy mellékelt fájl

2. lépés: Hozzon létre egy Sample.html nevű fájlt, amely a fő alkalmazásfájl, és adja hozzá az alábbi kódrészletet.

Az alábbiakban bemutatjuk az alábbi kóddal kapcsolatos főbb szempontokat,

  1. A törzscímkében található egy div tag, amelynek azonosítója Content. Ez az a hely, ahová a „Sub.html” külső fájl kódja kerül.
  2. Van utalás egy jquery szkriptre. A JQuery a Javascript tetejére épített szkriptnyelv, amely még könnyebbé teszi a DOM manipulálását.
  3. A Javascript függvényben van egy '$ ("# Content"). Load ("Sub.html");'; ami a Sub.html fájl kódját a div tagbe injektálja, amelynek azonosítója Content.

A szerver oldalt tartalmazza

Kiszolgálóoldali csomagok szintén elérhetők egy közös kódrészletnek az egész webhelyen történő elhelyezéséhez. Ez általában azért történik, hogy a HTML-dokumentum alábbi részeibe belefoglalja a tartalmat.

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

Ahhoz, hogy a webkiszolgáló felismerje a kiszolgálóoldali beletartozást, a fájlneveknek speciális kiterjesztések vannak. Ezeket általában a webszerver fogadja el, például .shtml, .stm, .shtm, .cgi.

A tartalom felvételére használt irányelv a "belefoglalási irányelv". Az alábbiakban egy példát mutatunk be az irányelvbe;

  • A fenti irányelv lehetővé teszi az egyik dokumentum tartalmának a másikba történő felvételét.
  • A fenti "virtuális" paranccsal a cél megadható az alkalmazás tartománygyökeréhez viszonyítva.
  • A virtuális paraméterhez tartozik még a használható fájlparaméter is. A "fájl" paramétereket akkor használjuk, amikor meg kell adni az útvonalat az aktuális fájl könyvtárához képest.

Jegyzet:

A virtuális paraméter a megadandó fájl (HTML oldal, szövegfájl, szkript stb.) Megadására szolgál. Ha a webkiszolgáló folyamatnak nincs hozzáférése a fájl elolvasásához vagy a parancsfájl végrehajtásához, az include parancs meghiúsul. A „virtuális” szó olyan kulcsszó, amelyet el kell helyezni az include irányelvben.

Hogyan lehet HTML fájlt beépíteni az AngularJS-be

Az Angular azt a funkciót biztosítja, hogy az ng-include direktíva használatával beépítse a többi AngularJS fájlból származó funkciókat.

Az "ng-include direktíva" elsődleges célja egy külső HTML-töredék beolvasása, lefordítása és beépítése a fő AngularJS alkalmazásba.

Nézzük meg az alábbi kódbázist és magyarázzuk el, hogyan érhető el ez az Angular használatával.

1. lépés : írjuk az alábbi kódot a Table.html nevű fájlba. Ez az a fájl, amelyet az ng-include direktívával beillesztünk a fő alkalmazásfájlunkba.

Az alábbi kódrészlet feltételezi, hogy létezik egy "tutorial" nevű hatókörváltozó. Ezután az ng-repeat direktívát használja, amely a "Tutorial" változó egyes témáit végigjárja, és megjeleníti a "name" és a "description" kulcs-érték pár értékeit.


 {{Téma.Név}}  {{Topic.Country}}

2. lépés) írjuk be az alábbi kódot a Main.html nevű fájlba. Ez egy egyszerű angular.JS alkalmazás, amelynek a következő szempontjai vannak

  1. Az "ng-include direktíva" segítségével írja be a kódot a 'Table.html' külső fájlba. Az állítást félkövérrel emelték ki az alábbi kódban. Tehát a '
    '     div címkét a 'Table.html' fájl teljes kódja helyettesíti.
  2. A vezérlőben egy "tutorial" változó jön létre a $ scope objektum részeként. Ez a változó tartalmazza a kulcs-érték párok listáját.

Példánkban a kulcsértékpárok a következők

  1. Név - Ez egy olyan téma nevét jelöli, mint a vezérlők, a modellek és az irányelvek.
  2. Leírás - Ez az egyes témák leírását tartalmazza

Az oktatói változó a 'Table.html' fájlban is elérhető.

 Esemény regisztráció 


Guru99 globális esemény

A fenti kód végrehajtásakor a következő kimenetet kapja.

Kimenet :

Összegzés:

  • Alapértelmezés szerint tudjuk, hogy a HTML nem nyújt közvetlen módszert más fájlokból származó HTML-tartalom felvételére, mint más programozási nyelvek.
  • A Javascript és a JQuery együttesen a legelőnyösebb lehetőség a HTML fájlok beágyazására más fájlokból.
  • A HTML fájlok más fájlokból történő felvételének másik módja az irányelv és a virtuális paraméter kulcsszó használata. A virtuális paraméter kulcsszó a beágyazandó fájl jelölésére szolgál. Ezt úgy hívják, hogy szerveroldali tartalmazza.
  • Az Angular lehetőséget nyújt fájlok beillesztésére az ng-include irányelv segítségével. Ezt az irányelvet használhatjuk arra, hogy külső fájlokból kódot juttassunk közvetlenül a fő HTML fájlba.