Ng-include i AngularJS: Hvordan inkludere HTML-fil (eksempel)

Innholdsfortegnelse:

Anonim

Som standard gir HTML ikke muligheten til å inkludere klientside-kode fra andre filer. Det er normalt en god praksis i ethvert programmeringsspråk å distribuere funksjonalitet på tvers av forskjellige filer for alle applikasjoner.

For eksempel, hvis du hadde logikk for numeriske operasjoner, vil du normalt ha den funksjonaliteten definert i en separat fil. Den separate filen kan deretter brukes på nytt i flere applikasjoner ved å bare inkludere den filen.

Dette er normalt begrepet Inkluder uttalelser som er tilgjengelige på programmeringsspråk som .Net og Java.

Denne opplæringen ser på andre måter filer (filer som inneholder ekstern HTML-kode) kan inkluderes i hoved-HTML-filen.

I denne veiledningen vil du lære-

  • Kundesiden inkluderer
  • Serversiden inkluderer
  • Hvordan inkludere HTML-fil i AngularJS

Kundesiden inkluderer

En av de vanligste måtene er å inkludere HTML-kode er via Javascript. JavaScript er et programmeringsspråk som kan brukes til å manipulere innholdet i en HTML-side på farten. Derfor kan Javascript også brukes til å inkludere kode fra andre filer.

Trinnene nedenfor viser hvordan dette kan oppnås.

Trinn 1) Definer en fil som heter Sub.html og legg til følgende kode i filen.

Dette er en inkludert fil

Trinn 2) Opprett en fil som heter Sample.html, som er din viktigste applikasjonsfil, og legg til kodebiten nedenfor.

Nedenfor er de viktigste aspektene å merke seg om koden nedenfor,

  1. I body-taggen er det en div-tag som har en ID for Content. Dette er stedet der koden fra den eksterne filen 'Sub.html' skal settes inn.
  2. Det er en referanse til et jquery-skript. JQuery er et skriptspråk bygget på toppen av Javascript som gjør DOM-manipulering enda enklere.
  3. I Javascript-funksjonen er det et utsagn '$ ("# Content"). Load ("Sub.html");' som får koden i filen Sub.html til å bli injisert i div-koden som har ID-innholdet. 
    $ (funksjon () {$ ("# Content"). Last ("Sub.html");});

Serversiden inkluderer

Serversiden inkluderer er også tilgjengelig for å inkludere en vanlig kode på et nettsted. Dette gjøres vanligvis for å inkludere innhold i delene nedenfor i et HTML-dokument.

  1. Sidehode
  2. Sidefot
  3. Navigasjonsmeny.

For at en webserver skal kunne gjenkjenne en serverside inkluderer, har filnavnene spesielle utvidelser. De godtas vanligvis av webserveren som .shtml, .stm, .shtm, .cgi.

Direktivet som brukes for å inkludere innhold er "inkluderer direktivet". Et eksempel på inkluderingsdirektivet er vist nedenfor;

  • Direktivet ovenfor gjør at innholdet i ett dokument kan inkluderes i et annet.
  • Den "virtuelle" kommandoen ovenfor koden brukes til å spesifisere målet i forhold til domeneroten til applikasjonen.
  • Til den virtuelle parameteren er det også filparameteren som kan brukes. "Fil" -parametrene brukes når man trenger å spesifisere banen i forhold til katalogen til den nåværende filen.

Merk:

Den virtuelle parameteren brukes til å spesifisere filen (HTML-side, tekstfil, skript osv.) Som må inkluderes. Hvis webserverprosessen ikke har tilgang til å lese filen eller utføre skriptet, mislykkes kommandoen inkludere. Det 'virtuelle' ordet er et nøkkelord som kreves plassert i inkluderingsdirektivet.

Hvordan inkludere HTML-fil i AngularJS

Angular gir funksjonen til å inkludere funksjonaliteten fra andre AngularJS-filer ved å bruke ng-include-direktivet.

Hovedformålet med "ng-include-direktivet" brukes til å hente, kompilere og inkludere et eksternt HTML-fragment i hoved AngularJS-applikasjonen.

La oss se på kodebasen nedenfor og forklare hvordan dette kan oppnås ved hjelp av Angular.

Trinn 1) la oss skrive koden nedenfor i en fil som heter Table.html. Dette er filen som blir injisert i vår viktigste applikasjonsfil ved hjelp av ng-include-direktivet.

Kodebiten nedenfor antar at det finnes en omfangsvariabel kalt "tutorial". Deretter bruker ng-repeat-direktivet, som går gjennom hvert emne i "Tutorial" -variabelen og viser verdiene for nøkkelverdiparet "navn" og "beskrivelse".


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

Trinn 2) la oss skrive koden nedenfor i en fil som heter Main.html. Dette er en enkel kantet.JS applikasjon som har følgende aspekter

  1. Bruk "ng-include-direktivet" for å injisere koden i den eksterne filen 'Table.html'. Uttalelsen er markert med fet skrift i koden nedenfor. Så div-taggen '
    '     vil bli erstattet av hele koden i 'Table.html' -filen.
  2. I kontrolleren opprettes en "tutorial" -variabel som en del av $ scope-objektet. Denne variabelen inneholder en liste over nøkkelverdipar.

I vårt eksempel er nøkkelverdiparene

  1. Navn - Dette betegner navnet på et emne som kontrollere, modeller og direktiver.
  2. Beskrivelse - Dette gir en beskrivelse av hvert emne

Opplæringsvariabelen er også tilgjengelig i 'Table.html'-filen.

 Hendelsesregistrering 


Guru99 Global Event


 
var sampleApp = angular.module ('sampleApp', []);sampleApp.controller ('AngularController', funksjon ($ scope) {$ scope.tutorial = [{Name: "Controllers", Description: "Controllers in action"},{Navn: "Modeller", Beskrivelse: "Modeller og bindingsdata"},{Navn: "Direktiver", Beskrivelse: "Direktivers fleksibilitet"}];});

Når du utfører koden ovenfor, får du følgende utdata.

Utgang :

Sammendrag:

  • Som standard vet vi at HTML ikke gir en direkte måte å inkludere HTML-innhold fra andre filer som andre programmeringsspråk.
  • Javascript sammen med JQuery er det beste alternativet for å legge inn HTML-innhold fra andre filer.
  • En annen måte å inkludere HTML-innhold fra andre filer er å bruke -direktivet og det virtuelle parameternøkkelordet. Nøkkelordet for den virtuelle parameteren brukes til å betegne filen som må integreres. Dette er kjent som server-side inkluderer.
  • Angular gir også muligheten til å inkludere filer ved å bruke ng-include-direktivet. Dette direktivet kan brukes til å injisere kode fra eksterne filer direkte i hoved HTML-filen.