ng-include i AngularJS: Hur man inkluderar HTML-fil [Exempel]

By: James Hartman James Hartman
Hours Uppdaterad

Som standard ger HTML inte möjligheten att inkludera kod på klientsidan från andra filer. Det är normalt en god praxis i alla programmeringsspråk att distribuera funktionalitet över olika filer för alla program.

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 påståenden som finns tillgängliga i programmeringsspråk som .Net och Java.

Den här handledningen tittar på andra sätt som filer (filer som innehåller extern HTML-kod) kan inkluderas i HTML-huvudfilen.

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 på en HTML-sida i farten. Därför, Javascript kan också användas för att inkludera kod från andra filer.

Stegen nedan visar hur detta kan åstadkommas.

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

<div>
	This is an included file
</div>

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

Nedan är de viktigaste aspekterna att notera om koden nedan,

  1. I body-taggen finns en div-tagg som har ett ID för Content. Det här är platsen där koden från den externa filen 'Sub.html' kommer att infogas.
  2. Det finns en referens till ett jquery-skript. JQuery är ett skriptspråk byggt ovanpå Javascript vilket gör DOM-manipulation ännu enklare.
  3. I Javascript funktion, det finns en sats '$(“#Content”).load(“Sub.html”);' vilket gör att koden i filen Sub.html injiceras i div-taggen som har ID för Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

RELATERADE ARTIKLAR

Server sida ingår

Server Side Includes är också tillgängliga för att inkludera en gemensam kodbit på 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 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;

<!--#include virtual="navigation.cgi" -->
  • Ovanstående direktiv tillåter att innehållet i ett dokument inkluderas i ett annat.
  • Kommandot "virtuella" ovan används för att specificera målet i förhållande till domänroten för applikationen.
  • Till den virtuella parametern finns även 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 köra skriptet, misslyckas kommandot include. Det "virtuella" ordet är ett nyckelord som måste placeras i inkluderingsdirektivet.

Hur man inkluderar HTML-fil i AngularJS

Angular tillhandahåller funktionen 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 huvudapplikationen AngularJS.

Låt oss titta på kodbasen nedan och förklara hur detta kan uppnås med Angular.

Steg 1) låt oss skriva koden nedan i en fil som heter Table.html. Det här är filen som kommer att injiceras i vår huvudapplikationsfil med ng-include-direktivet.

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

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Steg 2) låt oss skriva koden nedan i en fil som heter Main.html. Detta är en enkel angular.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 filen 'Table.html'.
  2. I kontrollern 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 betecknar namnet på ett ämne som styrenheter, modeller och direktiv.
  2. Description – Detta ger en beskrivning av varje ämne

Handledningsvariabeln är också tillgänglig i filen 'Table.html'.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

När du kör ovanstående kod får du följande utdata.

Produktion:

Inkludera HTML-fil i AngularJS

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äst föredragna 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 direktiv och nyckelordet virtuell parameter. Nyckelordet virtuell parameter används för att beteckna filen som behöver bäddas in. Detta är känt som server-side include.
  • Angular ger också möjlighet 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.

Du kanske gillar: