Ng-include i AngularJS: Sådan inkluderes HTML-fil (eksempel)

Indholdsfortegnelse:

Anonim

Som standard giver HTML ikke mulighed for at inkludere klientsides kode fra andre filer. Det er normalt en god praksis på ethvert programmeringssprog at distribuere funktionalitet på tværs af forskellige filer til enhver applikation.

For eksempel, hvis du havde logik til numeriske operationer, ville du normalt have denne funktion defineret i en separat fil. Den separate fil kan derefter genbruges på tværs af flere applikationer ved blot at inkludere den fil.

Dette er normalt begrebet Inkluder udsagn, der er tilgængelige på programmeringssprog som .Net og Java.

Denne vejledning ser på andre måder, filer (filer, der indeholder ekstern HTML-kode) kan inkluderes i den vigtigste HTML-fil.

I denne vejledning lærer du-

  • Kundesiden inkluderer
  • Serversiden inkluderer
  • Sådan inkluderes HTML-fil i AngularJS

Kundesiden inkluderer

En af de mest almindelige måder er at inkludere HTML-kode er via Javascript. JavaScript er et programmeringssprog, der kan bruges til at manipulere indholdet i en HTML-side på farten. Derfor kan Javascript også bruges til at inkludere kode fra andre filer.

Nedenstående trin viser, hvordan dette kan opnås.

Trin 1) Definer en fil, der hedder Sub.html, og tilføj følgende kode til filen.

Dette er en inkluderet fil

Trin 2) Opret en fil ved navn Sample.html, som er din vigtigste applikationsfil, og tilføj nedenstående kodestykke.

Nedenfor er de vigtigste aspekter at bemærke om nedenstående kode,

  1. I body-taggen er der et div-tag, der har et id for indhold. Dette er stedet, hvor koden fra den eksterne fil 'Sub.html' indsættes.
  2. Der er en henvisning til et jquery-script. JQuery er et script-sprog bygget oven på Javascript, hvilket gør DOM-manipulation endnu lettere.
  3. I Javascript-funktionen er der et udsagn '$ ("# Content"). Load ("Sub.html");' hvilket får koden i filen Sub.html til at blive injiceret i div-tagget, der har id'et til Content.

Serversiden inkluderer

Server Side Includes er også tilgængelige til at inkludere et almindeligt stykke kode på et websted. Dette gøres normalt for at inkludere indhold i nedenstående dele af et HTML-dokument.

  1. Sidehoved
  2. Sidefod
  3. Navigationsmenu.

For at en webserver kan genkende en serverside inkluderer, har filnavne særlige udvidelser. De accepteres normalt af webserveren såsom .shtml, .stm, .shtm, .cgi.

Direktivet, der bruges til at inkludere indhold, er "inkluder direktivet". Et eksempel på inkluderingsdirektivet er vist nedenfor;

  • Ovenstående direktiv gør det muligt at medtage indholdet af et dokument i et andet.
  • Den "virtuelle" kommando over koden bruges til at specificere målet i forhold til domæneroden til applikationen.
  • Også til den virtuelle parameter er der også filparameteren, der kan bruges. "Fil" -parametrene bruges, når man skal angive stien i forhold til kataloget for den aktuelle fil.

Bemærk:

Den virtuelle parameter bruges til at specificere den fil (HTML-side, tekstfil, script osv.), Der skal inkluderes. Hvis webserverprocessen ikke har adgang til at læse filen eller udføre scriptet, mislykkes kommandoen inkludere. Det 'virtuelle' ord er et nøgleord, der skal placeres i inkluderingsdirektivet.

Sådan inkluderes HTML-fil i AngularJS

Angular giver funktionen til at inkludere funktionaliteten fra andre AngularJS-filer ved hjælp af ng-include-direktivet.

Det primære formål med "ng-include-direktivet" bruges til at hente, kompilere og inkludere et eksternt HTML-fragment i den primære AngularJS-applikation.

Lad os se på nedenstående kodebase og forklare, hvordan dette kan opnås ved hjælp af Angular.

Trin 1) lad os skrive nedenstående kode i en fil kaldet Table.html. Dette er den fil, der indsprøjtes i vores hovedapplikationsfil ved hjælp af ng-include-direktivet.

Nedenstående kodestykke antager, at der er en omfangsvariabel kaldet "tutorial". Det bruger derefter ng-repeat-direktivet, som gennemgår hvert emne i variablen "Tutorial" og viser værdierne for "navn" og "beskrivelse" nøgleværdipar.


 {{Emne.navn}}  {{Topic.Country}}

Trin 2) lad os skrive nedenstående kode i en fil kaldet Main.html. Dette er en simpel kantet.JS-applikation, der har følgende aspekter

  1. Brug "ng-include-direktivet" til at indsprøjte koden i den eksterne fil 'Table.html'. Erklæringen er fremhævet med fed skrift i nedenstående kode. Så div-koden '
    '     erstattes af hele koden i 'Table.html' -filen.
  2. I controlleren oprettes en "tutorial" -variabel som en del af $ scope-objektet. Denne variabel indeholder en liste over nøgleværdipar.

I vores eksempel er nøgleværdiparene

  1. Navn - Dette angiver navnet på et emne som controllere, modeller og direktiver.
  2. Beskrivelse - Dette giver en beskrivelse af hvert emne

Vejledningsvariablen er også tilgængelig i filen 'Table.html'.

 Begivenhedsregistrering 


Guru99 global begivenhed

Når du udfører ovenstående kode, får du følgende output.

Output :

Resumé:

  • Som standard ved vi, at HTML ikke giver en direkte måde at inkludere HTML-indhold fra andre filer som andre programmeringssprog.
  • Javascript sammen med JQuery er den bedst foretrukne mulighed for at integrere HTML-indhold fra andre filer.
  • En anden måde at inkludere HTML-indhold fra andre filer er at bruge -direktivet og det virtuelle parameter nøgleord. Det virtuelle parameter nøgleord bruges til at betegne den fil, der skal integreres. Dette er kendt som server-side inkluderer.
  • Angular giver også mulighed for at inkludere filer ved hjælp af ng-include-direktivet. Dette direktiv kan bruges til at indsprøjte kode fra eksterne filer direkte i den vigtigste HTML-fil.