Ng-include i AngularJS: Hur man inkluderar HTML-fil (exempel)

Innehållsförteckning:

Anonim

Som standard tillhandahåller HTML inte möjligheten att inkludera klientsidakod från andra filer. Det är normalt en bra praxis i alla programmeringsspråk att distribuera funktionalitet över olika filer för alla applikationer.

Till exempel, om du hade logik för numeriska operationer, skulle du normalt vilja ha den funktionen definierad i en separat fil. Den separata filen kan sedan återanvändas i flera applikationer genom att bara inkludera den filen.

Detta är normalt begreppet Inkludera uttalanden som finns på programmeringsspråk som .Net och Java.

Denna handledning tittar på andra sätt som filer (filer som innehåller extern HTML-kod) kan inkluderas i huvud-HTML-filen.

I den här handledningen lär du dig-

  • Kundsidan inkluderar
  • Serversidan inkluderar
  • Hur man inkluderar HTML-fil i AngularJS

Kundsidan inkluderar

Ett av de vanligaste sätten är att inkludera HTML-kod är via Javascript. JavaScript är ett programmeringsspråk som kan användas för att manipulera innehållet i en HTML-sida i farten. Därför kan Javascript också användas för att inkludera kod från andra filer.

Nedanstående steg visar hur detta kan åstadkommas.

Steg 1) Definiera en fil som heter Sub.html och lägg till följande kod i filen.

Detta är en inkluderad fil

Steg 2) Skapa en fil som heter Sample.html, som är din huvudsakliga applikationsfil och lägg till kodavsnittet nedan.

Nedan är de viktigaste aspekterna att notera om nedanstående kod,

  1. I body-taggen finns en div-tagg som har ett ID-innehåll. Här kommer koden från den externa filen 'Sub.html' att införas.
  2. Det finns en hänvisning till ett jquery-skript. JQuery är ett skriptspråk byggt ovanpå Javascript vilket gör DOM-manipulation ännu enklare.
  3. I Javascript-funktionen finns det ett uttalande '$ ("# Content"). Load ("Sub.html");' vilket gör att koden i filen Sub.html injiceras i div-taggen som har ID för innehåll. 
    $ (funktion () {$ ("# Content"). Load ("Sub.html");});

Serversidan inkluderar

Serversidan inkluderar också för att inkludera en gemensam kod på hela en webbplats. Detta görs normalt för att inkludera innehåll i nedanstående delar av ett HTML-dokument.

  1. Sidhuvud
  2. Sidfot
  3. Navigeringsmeny.

För att en webbserver ska kunna känna igen en Server Side Includes har filnamnen speciella tillägg. De accepteras vanligtvis av webbservern som .shtml, .stm, .shtm, .cgi.

Direktivet som används för att inkludera innehåll är "inkludera direktivet". Ett exempel på inkluderingsdirektivet visas nedan;

  • Ovanstående direktiv gör det möjligt att inkludera innehållet i ett dokument i ett annat.
  • Kommandot "virtuellt" ovanför koden används för att ange målet i förhållande till applikationsdomänroten.
  • Till den virtuella parametern finns också filparametern som kan användas. Parametrarna "fil" används när man behöver ange sökvägen i förhållande till katalogen för den aktuella filen.

Notera:

Den virtuella parametern används för att specificera filen (HTML-sida, textfil, skript etc.) som måste inkluderas. Om webbserverprocessen inte har tillgång till att läsa filen eller utföra skriptet, kommer kommandot inkludera att misslyckas. Det "virtuella" ordet är ett nyckelord som måste placeras i inkluderingsdirektivet.

Hur man inkluderar HTML-fil i AngularJS

Angular tillhandahåller funktionen för att inkludera funktionaliteten från andra AngularJS-filer genom att använda ng-include-direktivet.

Det primära syftet med "ng-include-direktivet" används för att hämta, kompilera och inkludera ett externt HTML-fragment i huvud AngularJS-applikationen.

Låt oss titta på nedanstående kodbas och förklara hur detta kan uppnås med Angular.

Steg 1) låt oss skriva nedanstående kod i en fil som heter Table.html. Det här är filen som kommer att injiceras i vår huvudsakliga applikationsfil med ng-include-direktivet.

Kodavsnittet nedan förutsätter att det finns en omfattningsvariabel som kallas "tutorial". Den använder sedan ng-repeat-direktivet, som går igenom varje ämne i variabeln "Tutorial" och visar värdena för "namn" och "beskrivning" nyckel-värde-paret.


 {{Ämne.namn}}  {{Topic.Country}}

Steg 2) låt oss skriva nedanstående kod i en fil som heter Main.html. Detta är en enkel vinkel.JS-applikation som har följande aspekter

  1. Använd "ng-include-direktivet" för att injicera koden i den externa filen 'Table.html'. Uttalandet har markerats med fet stil i koden nedan. Så div-taggen '
    '     kommer att ersättas av hela koden i "Table.html" -filen.
  2. I styrenheten skapas en "tutorial" -variabel som en del av $ scope-objektet. Denna variabel innehåller en lista med nyckel-värdepar.

I vårt exempel är nyckelvärdeparen

  1. Namn - Detta anger namnet på ett ämne som styrenheter, modeller och direktiv.
  2. Beskrivning - Detta ger en beskrivning av varje ämne

Självstudievariabeln finns också i filen 'Table.html'.

 Händelseregistrering 


Guru99 globalt evenemang


 
var sampleApp = angular.module ('sampleApp', []);sampleApp.controller ('AngularController', funktion ($ scope) {$ scope.tutorial = [{Name: "Controllers", Description: "Controllers in action"},{Namn: "Modeller", Beskrivning: "Modeller och bindande data"},{Namn: "Direktiv", Beskrivning: "Direktivers flexibilitet"}];});

När du kör koden ovan får du följande utdata.

Utgång :

Sammanfattning:

  • Som standard vet vi att HTML inte ger ett direkt sätt att inkludera HTML-innehåll från andra filer som andra programmeringsspråk.
  • Javascript tillsammans med JQuery är det bästa alternativet för att bädda in HTML-innehåll från andra filer.
  • Ett annat sätt att inkludera HTML-innehåll från andra filer är att använda direktivet och nyckelordet virtuell parameter. Nyckelordet för den virtuella parametern används för att beteckna filen som måste inbäddas. Detta är känt som server-sida inkluderar.
  • Angular erbjuder också möjligheten att inkludera filer genom att använda ng-include-direktivet. Detta direktiv kan användas för att injicera kod från externa filer direkt i HTML-huvudfilen.