ng-include in AngularJS: So fügen Sie eine HTML-Datei ein [Beispiel]

Standardmäßig bietet HTML nicht die Möglichkeit, clientseitigen Code aus anderen Dateien einzubinden. Normalerweise ist es in jeder Programmiersprache eine gute Praxis, die Funktionalität für jede Anwendung auf verschiedene Dateien zu verteilen.

Wenn Sie beispielsweise eine Logik für numerische Operationen haben, möchten Sie diese Funktionalität normalerweise in einer separaten Datei definieren. Diese separate Datei kann dann durch einfaches Einfügen in mehrere Anwendungen wiederverwendet werden.

Dies ist normalerweise das Konzept von Fügen Sie Aussagen hinzu die in Programmiersprachen wie .Net verfügbar sind und Java.

In diesem Tutorial werden andere Möglichkeiten untersucht, wie Dateien (Dateien, die externen HTML-Code enthalten) in die Haupt-HTML-Datei eingebunden werden können.

Client-Seite umfasst

Eine der häufigsten Möglichkeiten zum Einbinden von HTML-Code ist über Javascript. JavaSkript ist eine Programmiersprache, mit der der Inhalt einer HTML-Seite im Handumdrehen bearbeitet werden kann. Daher Javascript kann auch verwendet werden, um Code aus anderen Dateien einzubinden.

Die folgenden Schritte zeigen, wie dies erreicht werden kann.

Schritt 1) Definieren Sie eine Datei namens Sub.html und fügen Sie der Datei den folgenden Code hinzu.

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

Schritt 2) Erstellen Sie eine Datei mit dem Namen „Sample.html“, die Ihre Hauptanwendungsdatei ist, und fügen Sie den folgenden Codeausschnitt hinzu.

Im Folgenden sind die wichtigsten Aspekte aufgeführt, die Sie beim folgenden Code beachten sollten:

  1. Im Body-Tag gibt es ein div-Tag mit der ID „Content“. Hier wird der Code aus der externen Datei „Sub.html“ eingefügt.
  2. Es gibt einen Verweis auf ein JQuery-Skript. JQuery ist eine Skriptsprache, die auf Javascript was die DOM-Manipulation noch einfacher macht.
  3. Im Javascript Funktion gibt es eine Anweisung „$(„#Content“).load(„Sub.html“);“, die bewirkt, dass der Code in der Datei Sub.html in das Div-Tag mit der ID „Content“ eingefügt wird.
    <html> 
    	  <head> 
    	    <script src="jquery.js"></script> 
    	    <script> 
    	    $(function(){
    	      $("#Content").load("Sub.html"); 
    	    });
        </script> 
      </head> 
    
    <body> 
         <div id="Content"></div>
      </body> 
    </html>

Server Side Includes

Server Side Includes sind auch verfügbar, um einen gemeinsamen Codeabschnitt in eine Site einzubinden. Dies geschieht normalerweise, um Inhalte in die folgenden Teile eines HTML-Dokuments einzufügen.

  1. Kopfzeile
  2. Fußzeile
  3. Navigationsmenü.

Damit ein Webserver ein Server Side Includes erkennen kann, haben die Dateinamen spezielle Erweiterungen. Sie werden normalerweise vom Webserver akzeptiert, z. B. .shtml, .stm, .shtm, .cgi.

Die zum Einbinden von Inhalten verwendete Direktive ist die „include-Direktive“. Ein Beispiel für die Include-Direktive ist unten dargestellt;

<!--#include virtual="navigation.cgi" -->
  • Die obige Anweisung ermöglicht die Einbindung des Inhalts eines Dokuments in ein anderes.
  • Der „virtuelle“ Befehl oben im Code wird verwendet, um das Ziel relativ zum Domänenstamm der Anwendung anzugeben.
  • Zusätzlich zum virtuellen Parameter gibt es auch den Dateiparameter, der verwendet werden kann. Die „Datei“-Parameter werden verwendet, wenn der Pfad relativ zum Verzeichnis der aktuellen Datei angegeben werden muss.

Hinweis:

Der virtuelle Parameter wird verwendet, um die Datei (HTML-Seite, Textdatei, Skript usw.) anzugeben, die eingebunden werden muss. Wenn der Webserverprozess keinen Zugriff zum Lesen der Datei oder zum Ausführen des Skripts hat, schlägt der Befehl „include“ fehl. Das Wort „virtuell“ ist ein Schlüsselwort, das in die Include-Direktive eingefügt werden muss.

So fügen Sie eine HTML-Datei in AngularJS ein

Angular bietet die Funktion, die Funktionalität aus anderen AngularJS-Dateien mithilfe der ng-include-Direktive einzubinden.

Der Hauptzweck der „ng-include-Direktive“ besteht darin, ein externes HTML-Fragment abzurufen, zu kompilieren und in die Hauptanwendung von AngularJS einzubinden.

Schauen wir uns die folgende Codebasis an und erklären, wie dies mit Angular erreicht werden kann.

Schritt 1) Schreiben wir den folgenden Code in eine Datei namens Table.html. Dies ist die Datei, die mithilfe der ng-include-Direktive in unsere Hauptanwendungsdatei eingefügt wird.

Der folgende Codeausschnitt geht davon aus, dass es eine Bereichsvariable namens „tutorial“ gibt. Anschließend wird die Direktive ng-repeat verwendet, die jedes Thema in der Variablen „Tutorial“ durchgeht und die Werte für das Schlüssel-Wert-Paar „Name“ und „Beschreibung“ anzeigt.

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

Schritt 2) Schreiben wir den folgenden Code in eine Datei namens Main.html. Dies ist eine einfache Angular.JS-Anwendung mit den folgenden Aspekten

  1. Verwenden Sie die „ng-include-Direktive“, um den Code in die externe Datei „Table.html“ einzufügen. Die Anweisung wurde im folgenden Code fett hervorgehoben. Also das div-Tag ' ' wird durch den gesamten Code in der Datei „Table.html“ ersetzt.
  2. Im Controller wird eine „Tutorial“-Variable als Teil des $scope-Objekts erstellt. Diese Variable enthält eine Liste von Schlüssel-Wert-Paaren.

In unserem Beispiel sind die Schlüssel-Wert-Paare

  1. Name – Dies bezeichnet den Namen eines Themas wie Controller, Modelle und Anweisungen.
  2. Description – Hier finden Sie eine Beschreibung jedes Themas

Auf die Tutorial-Variable wird auch in der Datei „Table.html“ zugegriffen.

<!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>

Wenn Sie den obigen Code ausführen, erhalten Sie die folgende Ausgabe.

Ausgang:

Fügen Sie eine HTML-Datei in AngularJS ein

Zusammenfassung

  • Wir wissen standardmäßig, dass HTML keine direkte Möglichkeit bietet, HTML-Inhalte aus anderen Dateien wie anderen einzubinden Programmiersprachen.
  • Javascript zusammen mit JQuery ist es die beste Option zum Einbetten von HTML-Inhalten aus anderen Dateien.
  • Eine andere Art des Einbeziehens HTML Inhalte aus anderen Dateien sind zu verwenden Direktive und das Schlüsselwort für den virtuellen Parameter. Das Schlüsselwort „virtueller Parameter“ wird verwendet, um die Datei zu bezeichnen, die eingebettet werden muss. Dies wird als serverseitige Includes bezeichnet.
  • Angular bietet auch die Möglichkeit, Dateien mithilfe der ng-include-Direktive einzubinden. Mit dieser Anweisung kann Code aus externen Dateien direkt in die Haupt-HTML-Datei eingefügt werden.