Ng-include in AngularJS: HTML-faili kaasamine (näide)

Lang L: none (table-of-contents):

Anonim

Vaikimisi ei paku HTML võimalust kaasata teiste failide kliendipoolset koodi. Tavaliselt on igas programmeerimiskeeles hea tava funktsionaalsuse levitamine erinevate failide vahel mis tahes rakenduse jaoks.

Näiteks kui teil oli arvuliste toimingute loogika, soovite tavaliselt, et see funktsionaalsus oleks määratletud ühes eraldi failis. Seejärel saab seda eraldi faili mitmes rakenduses uuesti kasutada, lisades selle faili.

Tavaliselt on see kaasamise lausete mõiste, mis on saadaval programmeerimiskeeltes nagu .Net ja Java.

Selles õpetuses vaadeldakse teisi võimalusi, kuidas faile (faile, mis sisaldavad välist HTML-koodi) lisada HTML-i põhifaili.

Selles õpetuses saate teada

  • Kliendipool sisaldab
  • Serveri pool sisaldab
  • Kuidas lisada HTML-fail AngularJS-i

Kliendipool sisaldab

Üks levinumaid viise on HTML-koodi kaasamine Javascripti kaudu. JavaScript on programmeerimiskeel, mida saab kasutada HTML-lehe sisu lennult manipuleerimiseks. Seega saab Javascripti kasutada ka teiste failide koodi lisamiseks.

Allpool toodud sammud näitavad, kuidas seda saab saavutada.

1. samm. Määratlege fail nimega Sub.html ja lisage failile järgmine kood.

See on kaasatud fail

2. samm. Looge fail nimega Sample.html, mis on teie peamine rakendusfail, ja lisage allpool olev koodilõik.

Allpool on toodud allpool toodud koodi peamised aspektid,

  1. Kehamärgendis on div silt, mille ID on sisu. See on koht, kuhu sisestatakse välise faili „Sub.html” kood.
  2. On viidatud jquery skriptile. JQuery on Javascripti peale ehitatud skriptikeel, mis muudab DOM-i manipuleerimise veelgi lihtsamaks.
  3. Javascripti funktsioonis on lause '$ ("# Content"). Load ("Sub.html");' mis põhjustab failis Sub.html oleva koodi sisestamise div-märgendisse, mille ID on Content.

Serveri pool sisaldab

Serveripoolsed kaaned on saadaval ka ühise kooditüki lisamiseks saidile. Tavaliselt tehakse seda sisu lisamiseks HTML-dokumendi allpool olevatesse osadesse.

  1. Lehe päis
  2. Lehe jalus
  3. Navigeerimismenüü.

Selleks, et veebiserver tuvastaks serveripoolse kaasatuse, on failinimedel spetsiaalsed laiendid. Veebiserver aktsepteerib neid tavaliselt, näiteks .shtml, .stm, .shtm, .cgi.

Sisu lisamiseks kasutatud direktiiv on "kaasata direktiiv". Allpool on toodud näide kaasamise direktiivist;

  • Eespool nimetatud direktiiv lubab ühe dokumendi sisu lisada teise.
  • Koodi kohal olevat "virtuaalset" käsku kasutatakse sihtmärgi määramiseks rakenduse domeenijuure suhtes.
  • Lisaks on virtuaalse parameetri juures ka faili parameeter, mida saab kasutada. Parameetreid "fail" kasutatakse siis, kui on vaja määrata tee praeguse faili kataloogi suhtes.

Märge:

Virtuaalset parameetrit kasutatakse faili (HTML-leht, tekstifail, skript jne) määramiseks, mis tuleb kaasata. Kui veebiserveri protsessil puudub juurdepääs faili lugemiseks või skripti käivitamiseks, nurjub käsk include. „Virtuaalne” sõna on märksõna, mis tuleb lisada kaasamisdirektiivi.

Kuidas lisada HTML-fail AngularJS-i

Nurgeline pakub funktsiooni, et kaasata teiste AngularJS-failide funktsionaalsus, kasutades direktiivi ng-include.

"Ng-include" direktiivi peamist eesmärki kasutatakse välise HTML-i fragmendi toomiseks, kompileerimiseks ja kaasamiseks põhirakendusse AngularJS.

Vaatame allpool olevat koodibaasi ja selgitame, kuidas seda nurkade abil saavutada saab.

Samm 1) kirjutame allpool oleva koodi faili nimega Table.html. See on fail, mis sisestatakse meie põhirakenduse faili ng-include direktiivi abil.

Allpool olev koodilõik eeldab, et on olemas muutuja nimega "õpetus". Seejärel kasutab see käsku ng-repeat, mis läbib muutuja "Tutorial" iga teema ja kuvab võtmeväärtuste paari "nimi" ja "kirjeldus" väärtused.


 {{Teema.Nimi}}  {{Topic.Country}}

Samm 2) kirjutame allpool oleva koodi faili Main.html. See on lihtne nurgeline.JS-i rakendus, millel on järgmised aspektid

  1. Välise faili 'Table.html' sisestamiseks sisestage kood "ng-include". Avaldus on allpool toodud koodis rasvases kirjas esile tõstetud. Seega asendatakse div-märgend '
    '     kogu koodiga failis 'Table.html'.
  2. Kontrolleris luuakse muutuja "juhendaja" osana $ scope objektist. See muutuja sisaldab võtmeväärtuste paaride loendit.

Meie näites on põhiväärtuste paarid

  1. Nimi - see tähistab sellise teema nime nagu kontrollerid, mudelid ja direktiivid.
  2. Kirjeldus - see annab iga teema kirjelduse

Õpetusmuutujale pääseb juurde ka failis 'Table.html'.

 Sündmuste registreerimine 


Guru99 ülemaailmne sündmus

Ülaltoodud koodi käivitamisel saate järgmise väljundi.

Väljund :

Kokkuvõte:

  • Vaikimisi teame, et HTML ei võimalda otsest viisi kaasata HTML-i sisu muudest failidest nagu muud programmeerimiskeeled.
  • Javascript koos JQueryga on kõige eelistatum variant HTML-sisu manustamiseks teistest failidest.
  • Teine viis HTML-sisu kaasamiseks teistest failidest on -direktiivi ja virtuaalse parameetri märksõna kasutamine. Virtuaalse parameetri märksõna kasutatakse manustatava faili tähistamiseks. Seda nimetatakse serveripoolseks kaasamiseks.
  • Nurk annab ka võimaluse faile lisada ng-include direktiivi abil. Seda käsku saab kasutada välistest failidest koodi sisestamiseks otse HTML-põhifaili.