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 über Logik für numerische Operationen verfügen, möchten Sie diese Funktionalität normalerweise in einer separaten Datei definieren. Diese separate Datei könnte dann in mehreren Anwendungen wiederverwendet werden, indem einfach diese Datei eingefügt wird.

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

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 gebräuchlichsten Methoden zur Einbindung von HTML-Code ist Javascript. JavaScript ist eine Programmiersprache, mit der der Inhalt einer HTML-Seite im Handumdrehen manipuliert werden kann. Daher kann Javascript auch verwendet werden, um Code aus anderen Dateien einzubinden.

Die folgenden Schritte zeigen, wie dies erreicht werden kann.

Schritt 1) Definieren Sie eine Datei mit dem Namen Sub.html und fügen Sie Folgendes hinzuwing Code in die Datei einfügen.

<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 auf Javascript basierende Skriptsprache, die die DOM-Manipulation noch einfacher macht.
  3. In der Javascript-Funktion gibt es eine Anweisung '$(“#Content”).load(“Sub.html”);' Dadurch wird der Code in der Datei Sub.html in das div-Tag mit der ID „Content“ eingefügt.
    <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 folgendem Inhaltwing Aspekte

  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. Beschreibung – 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 Folgendeswing Ausgabe.

Output:

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 ist zusammen mit JQuery die am besten bevorzugte 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.