ng-include i AngularJS: Sådan inkluderes HTML-fil [Eksempel]

Som standard giver HTML ikke mulighed for at inkludere kode på klientsiden fra andre filer. Det er normalt en god praksis i 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 ønske at have denne funktion defineret i en separat fil. Den separate fil kunne derefter genbruges på tværs af flere applikationer ved blot at inkludere den fil.

Dette er normalt begrebet Medtag udsagn som 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 HTML-hovedfilen.

Client Side inkluderer

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

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

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

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

Trin 2) Opret en fil kaldet Sample.html, som er din primære programfil, og tilføj nedenstående kodestykke.

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

I body-tagget er der et div-tag, som har et id på Content. Dette er stedet, hvor koden fra den eksterne fil 'Sub.html' vil blive indsat.
Der er en reference til et jquery-script. JQuery er et scriptsprog bygget ovenpå Javascript hvilket gør DOM-manipulation endnu nemmere.

I Javascript funktion, er der en sætning '$(“#Content”).load(“Sub.html”);' hvilket får koden i filen Sub.html til at blive injiceret i div-tagget, som har id'et for Content.

<html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

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

Server Side Inkluderer

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

Sideoverskrift
Sidefod
Navigationsmenu.

For at en webserver kan genkende en Server Side Includes, har filnavnene specielle 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;

<!--#include virtual="navigation.cgi" -->

Ovenstående direktiv tillader, at indholdet af et dokument kan indgå i et andet.
Den "virtuelle" kommando ovenfor bruges til at angive målet i forhold til applikationens domænerod.
Til den virtuelle parameter er der også filparameteren, som kan bruges. "Fil"-parametrene bruges, når man skal angive stien i forhold til mappen for den aktuelle fil.

Bemærk:

Den virtuelle parameter bruges til at angive den fil (HTML-side, tekstfil, script osv.), der skal inkluderes. Hvis webserverprocessen ikke har adgang til at læse filen eller udføre scriptet, vil include-kommandoen mislykkes. 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 at bruge ng-include-direktivet.

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

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 filen, som vil blive indsat i vores hovedapplikationsfil ved hjælp af ng-include-direktivet.

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

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

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

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

I vores eksempel er nøgleværdiparrene

Navn – Dette angiver navnet på et emne som controllere, modeller og direktiver.
Description – Dette giver en beskrivelse af hvert emne

Selvstudievariablen er også tilgængelig 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 udfører ovenstående kode, får du følgende output.

Produktion:

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 indlejring af HTML-indhold fra andre filer.
En anden måde at inkludere HTML indhold fra andre filer er at bruge direktiv og det virtuelle parameter nøgleord. Det virtuelle parameter nøgleord bruges til at angive den fil, der skal indlejres. Dette er kendt som server-side inkluderer.
Angular giver også mulighed for at inkludere filer ved at bruge ng-include-direktivet. Dette direktiv kan bruges til at indsprøjte kode fra eksterne filer direkte i HTML-hovedfilen.

Du kan lide:

Client Side inkluderer

RELATEREDE ARTIKLER

Server Side Inkluderer

Sådan inkluderes HTML-fil i AngularJS

Resumé