Ng-include AngularJS: kā iekļaut HTML failu (piemērs)

Satura rādītājs:

Anonim

Pēc noklusējuma HTML nenodrošina iespēju iekļaut klienta puses kodu no citiem failiem. Parasti jebkura programmēšanas valodas laba prakse ir izplatīt funkcionalitāti dažādos failos jebkurai lietojumprogrammai.

Piemēram, ja jums ir loģika skaitliskām darbībām, jūs parasti vēlaties, lai šī funkcionalitāte tiktu definēta vienā atsevišķā failā. Tad šo atsevišķo failu varētu atkārtoti izmantot vairākās lietojumprogrammās, vienkārši iekļaujot šo failu.

Parasti tas ir jēdziens Iekļaut paziņojumus, kas ir pieejami programmēšanas valodās, piemēram, .Net un Java.

Šajā apmācībā aplūkoti citi veidi, kā failus (failus, kas satur ārēju HTML kodu) var iekļaut galvenajā HTML failā.

Šajā apmācībā jūs uzzināsiet

  • Klienta pusē ietilpst
  • Servera pusē ietilpst
  • Kā HTML failu iekļaut AngularJS

Klienta pusē ietilpst

Viens no visizplatītākajiem veidiem ir HTML koda iekļaušana, izmantojot Javascript. JavaScript ir programmēšanas valoda, kuru var izmantot HTML lapas satura manipulēšanai. Tādējādi Javascript var izmantot arī, lai iekļautu kodu no citiem failiem.

Tālāk norādītās darbības parāda, kā to var panākt.

1. solis. Definējiet failu ar nosaukumu Sub.html un pievienojiet failam šādu kodu.

Šis ir iekļauts fails

2. solis) Izveidojiet failu ar nosaukumu Sample.html, kas ir jūsu galvenais lietojumprogrammas fails, un pievienojiet zemāk esošo koda fragmentu.

Tālāk ir norādīti galvenie aspekti, kas jāņem vērā par zemāk esošo kodu

  1. Pamattekstā ir div tags, kura ID ir Saturs. Šī ir vieta, kur tiks ievietots kods no ārējā faila “Sub.html”.
  2. Ir atsauce uz jquery skriptu. JQuery ir skriptu valoda, kas izveidota virs Javascript, kas vēl vairāk atvieglo DOM manipulācijas.
  3. Javascript funkcijā ir priekšraksts '$ ("# Content"). Load ("Sub.html");' kas izraisa faila Sub.html koda ievadīšanu div tagā, kura ID ir Saturs. 
    <ķermenis>

Servera pusē ietilpst

Servera puses iekļaušana ir pieejama arī kopēja koda iekļaušanai visā vietnē. Parasti tas tiek darīts, lai saturu iekļautu HTML dokumenta tālāk esošajās daļās.

  1. Lapas galvene
  2. Lapas kājene
  3. Navigācijas izvēlne.

Lai tīmekļa serveris atpazītu servera puses iekļaušanu, failu nosaukumiem ir īpaši paplašinājumi. Tos parasti pieņem tīmekļa serveris, piemēram, .shtml, .stm, .shtm, .cgi.

Satura iekļaušanai izmantotā direktīva ir "iekļaut direktīvu". Iekļautās direktīvas piemērs ir parādīts zemāk;

  • Iepriekš minētā direktīva ļauj viena dokumenta saturu iekļaut citā.
  • "Virtuālā" komanda virs koda tiek izmantota, lai norādītu mērķi attiecībā pret lietojumprogrammas domēna sakni.
  • Virtuālajam parametram ir arī faila parametrs, ko var izmantot. Parametri "fails" tiek izmantoti, ja jānorāda ceļš pret pašreizējā faila direktoriju.

Piezīme:

Virtuālo parametru izmanto, lai norādītu failu (HTML lapu, teksta failu, skriptu utt.), Kas jāiekļauj. Ja tīmekļa servera procesam nav piekļuves faila lasīšanai vai skripta izpildei, komanda include neizdosies. Virtuālais vārds ir atslēgvārds, kas jāievieto iekļaušanas direktīvā.

Kā HTML failu iekļaut AngularJS

Angular nodrošina funkciju iekļaut funkcionalitāti no citiem AngularJS failiem, izmantojot direktīvu ng-include.

"Ng-include direktīva" galvenais mērķis tiek izmantots, lai ielādētu, apkopotu un iekļautu ārējo HTML fragmentu galvenajā AngularJS lietojumprogrammā.

Apskatīsim zemāk esošo kodu bāzi un paskaidrosim, kā to var panākt, izmantojot Angular.

1. solis) ierakstīsim zemāk esošo kodu failā ar nosaukumu Table.html. Šis ir fails, kas tiks ievadīts mūsu galvenajā lietojumprogrammas failā, izmantojot direktīvu ng-include.

Tālāk redzamajā koda fragmentā tiek pieņemts, ka pastāv darbības jomas mainīgais, ko sauc par “apmācību”. Pēc tam tā izmanto direktīvu ng-repeat, kas iet cauri katrai mainīgā mainīgās tēmas tēmai un parāda atslēgas un vērtības pāra “nosaukums” un “apraksts” vērtības.


 {{Topic.Name}}  {{Topic.Country}}

2. solis) ierakstīsim zemāk redzamo kodu failā ar nosaukumu Main.html. Šī ir vienkārša angular.JS lietojumprogramma, kurai ir šādi aspekti

  1. Izmantojiet "ng-include direktīva", lai ievadītu kodu ārējā failā "Table.html". Paziņojums zemāk esošajā kodā ir izcelts treknrakstā. Tātad div tag '
    '     tiks aizstāts ar visu failu failā 'Table.html'.
  2. Kontrolierī mainās "apmācība" kā daļa no objekta $ sfēra. Šis mainīgais satur atslēgu un vērtību pāru sarakstu.

Mūsu piemērā galveno vērtību pāri ir

  1. Nosaukums - tas apzīmē tādas tēmas nosaukumu kā kontrolieri, modeļi un direktīvas.
  2. Apraksts - tas sniedz katras tēmas aprakstu

Pamācības mainīgais ir pieejams arī failā “Table.html”.

 Pasākuma reģistrācija 


Guru99 globālais notikums

Izpildot iepriekš minēto kodu, jūs iegūsiet šādu izvadi.

Izeja :

Kopsavilkums:

  • Pēc noklusējuma mēs zinām, ka HTML nenodrošina tiešu veidu, kā iekļaut HTML saturu no citiem failiem, piemēram, citām programmēšanas valodām.
  • Javascript kopā ar JQuery ir vislabāk ieteicamā iespēja HTML satura iegulšanai no citiem failiem.
  • Vēl viens veids, kā iekļaut HTML saturu no citiem failiem, ir izmantot direktīvu un virtuālā parametra atslēgvārdu. Virtuālā parametra atslēgvārds tiek izmantots, lai apzīmētu failu, kuru nepieciešams iegult. Tas ir pazīstams kā servera puses iekļaušana.
  • Angular nodrošina arī iespēju iekļaut failus, izmantojot direktīvu ng-include. Šo direktīvu var izmantot, lai ievadītu kodu no ārējiem failiem tieši galvenajā HTML failā.