ng-include in AngularJS: HTML-bestand opnemen [Voorbeeld]

Door: James Hartman James Hartman
Hours Bijgewerkt

Standaard biedt HTML niet de mogelijkheid om client-side code uit andere bestanden op te nemen. Normaal gesproken is het in elke programmeertaal een goede gewoonte om functionaliteit over verschillende bestanden voor elke toepassing te verdelen.

Als u bijvoorbeeld logica voor numerieke bewerkingen had, zou u die functionaliteit normaal gesproken in één afzonderlijk bestand willen hebben gedefinieerd. Dat afzonderlijke bestand kan vervolgens in meerdere toepassingen worden hergebruikt door dat bestand gewoon op te nemen.

Dit is normaal gesproken het concept van Inclusief verklaringen die beschikbaar zijn in programmeertalen zoals .Net en Java.

In deze tutorial wordt gekeken naar andere manieren waarop bestanden (bestanden die externe HTML-code bevatten) kunnen worden opgenomen in het hoofd-HTML-bestand.

Klantzijde omvat

Een van de meest voorkomende manieren is om HTML-code op te nemen via Javascript. JavaScript is een programmeertaal die kan worden gebruikt om de inhoud van een HTML-pagina direct te manipuleren. Vandaar, Javascript kan ook worden gebruikt om code uit andere bestanden op te nemen.

De onderstaande stappen laten zien hoe dit kan worden bereikt.

Stap 1) Definieer een bestand met de naam Sub.html en voeg de volgende code toe aan het bestand.

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

Stap 2) Maak een bestand met de naam Sample.html, uw hoofdtoepassingsbestand, en voeg het onderstaande codefragment toe.

Hieronder vindt u de belangrijkste aspecten die u moet weten over de onderstaande code:

  1. In de body-tag bevindt zich een div-tag met de ID Content. Dit is de plaats waar de code uit het externe bestand 'Sub.html' wordt ingevoegd.
  2. Er is een verwijzing naar een jQuery-script. JQuery is een scripttaal die daarop is gebouwd Javascript wat DOM-manipulatie nog eenvoudiger maakt.
  3. In de Javascript functie, is er een instructie '$(“#Content”).load(“Sub.html”);' waardoor de code in het bestand Sub.html wordt geïnjecteerd in de div-tag met de id Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

GERELATEERDE ARTIKELEN

Server Side omvat

Server Side Includes zijn ook beschikbaar om een ​​gemeenschappelijk stukje code op een site op te nemen. Dit wordt normaal gesproken gedaan voor het opnemen van inhoud in de onderstaande delen van een HTML-document.

  1. Pagina hoofd
  2. Pagina ondertekst
  3. Navigatie menu.

Om ervoor te zorgen dat een webserver een Server Side Included herkent, hebben de bestandsnamen speciale extensies. Ze worden meestal geaccepteerd door de webserver, zoals .shtml, .stm, .shtm, .cgi.

De richtlijn die wordt gebruikt voor het opnemen van inhoud is de “include-richtlijn”. Een voorbeeld van de include-richtlijn wordt hieronder weergegeven;

<!--#include virtual="navigation.cgi" -->
  • De bovenstaande richtlijn maakt het mogelijk dat de inhoud van het ene document in het andere wordt opgenomen.
  • Het “virtuele” commando boven de code wordt gebruikt om het doel te specificeren ten opzichte van de domeinroot van de applicatie.
  • Naast de virtuele parameter is er ook de bestandsparameter die kan worden gebruikt. De “file”-parameters worden gebruikt wanneer men het pad moet specificeren ten opzichte van de directory van het huidige bestand.

Opmerking:

De virtuele parameter wordt gebruikt om het bestand (HTML-pagina, tekstbestand, script, enz.) op te geven dat moet worden opgenomen. Als het webserverproces geen toegang heeft om het bestand te lezen of het script uit te voeren, mislukt de include-opdracht. Het 'virtuele' woord is een trefwoord dat in de include-richtlijn moet worden geplaatst.

Hoe een HTML-bestand in AngularJS op te nemen

Angular biedt de functie om de functionaliteit van andere AngularJS-bestanden op te nemen met behulp van de ng-include-richtlijn.

Het primaire doel van de “ng-include richtlijn” wordt gebruikt om een ​​extern HTML-fragment op te halen, te compileren en op te nemen in de hoofdtoepassing van AngularJS.

Laten we naar de onderstaande codebasis kijken en uitleggen hoe dit kan worden bereikt met Angular.

Stap 1) laten we de onderstaande code schrijven in een bestand met de naam Table.html. Dit is het bestand dat in ons hoofdtoepassingsbestand zal worden geïnjecteerd met behulp van de ng-include-richtlijn.

In het onderstaande codefragment wordt ervan uitgegaan dat er een scopevariabele bestaat met de naam 'tutorial'. Vervolgens wordt de ng-repeat-richtlijn gebruikt, die elk onderwerp in de variabele “Tutorial” doorloopt en de waarden voor het sleutel-waardepaar 'naam' en 'beschrijving' weergeeft.

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

Stap 2) Laten we de onderstaande code schrijven in een bestand genaamd Main.html. Dit is een eenvoudige angular.JS-applicatie die de volgende aspecten heeft

  1. Gebruik de “ng-include richtlijn” om de code in het externe bestand 'Table.html' te injecteren. De verklaring is vetgedrukt weergegeven in de onderstaande code. Dus de div-tag ' ' wordt vervangen door de volledige code in het bestand 'Table.html'.
  2. In de controller wordt een “tutorial”-variabele gemaakt als onderdeel van het $scope-object. Deze variabele bevat een lijst met sleutelwaardeparen.

In ons voorbeeld zijn de sleutelwaardeparen dat

  1. Naam – Dit geeft de naam aan van een onderwerp, zoals Controllers, Modellen en Richtlijnen.
  2. Description – Dit geeft een beschrijving van elk onderwerp

De tutorialvariabele is ook toegankelijk in het bestand '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>

Wanneer u de bovenstaande code uitvoert, krijgt u de volgende uitvoer.

uitgang:

Voeg een HTML-bestand toe aan AngularJS

Samenvatting

  • Standaard weten we dat HTML geen directe manier biedt om HTML-inhoud uit andere bestanden op te nemen programmeertalen.
  • Javascript samen met JQuery is dit de beste optie voor het insluiten van HTML-inhoud uit andere bestanden.
  • Een andere manier van opnemen HTML inhoud van andere bestanden is het gebruik van de richtlijn en het trefwoord virtuele parameter. Het virtuele parametersleutelwoord wordt gebruikt om het bestand aan te duiden dat moet worden ingesloten. Dit staat bekend als server-side-includes.
  • Angular biedt ook de mogelijkheid om bestanden op te nemen met behulp van de ng-include-richtlijn. Deze richtlijn kan worden gebruikt om code uit externe bestanden rechtstreeks in het hoofd-HTML-bestand te injecteren.