AngularJS ng-include: HTML-Dateien mit Beispiel einbinden
James Hartmann
⚡ Intelligente Zusammenfassung
ng-include in AngularJS ruft ein externes HTML-Fragment ab, kompiliert es und fügt es in die Hauptseite ein, sodass gemeinsam genutztes Markup wie eine Tabelle, eine Kopf- oder Fußzeile in einer wiederverwendbaren Teildatei enthalten ist.
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 verfügbar sind in Programmiersprachen wie z.B. .NET und Java.
Dieses Tutorial befasst sich mit anderen Möglichkeiten, Dateien (Dateien, die externe Inhalte enthalten) zu verarbeiten. HTML Der Code kann in die Haupt-HTML-Datei eingebunden werden.
Kundenseite umfasst
Eine der gebräuchlichsten Methoden zum Einbinden von HTML-Code ist über JavaSkript. JavaSkript ist eine Programmiersprache, mit der der Inhalt einer HTML-Seite im Handumdrehen bearbeitet werden kann. Daher JavaSkripte können 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:
- Im Body-Tag gibt es ein div-Tag mit der ID „Content“. Hier wird der Code aus der externen Datei „Sub.html“ eingefügt.
- Es gibt einen Verweis auf ein jQuery-Skript. jQuery ist eine Skriptsprache, die auf … aufbaut. JavaEin Skript, das die DOM-Manipulation noch einfacher macht.
- Im JavaIn der Skriptfunktion gibt es die 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.
- Kopfzeile
- Fußzeile
- Navigationsmenü.
Damit ein Webserver eine Server Side Include-Datei erkennt, müssen die Dateinamen spezielle Erweiterungen haben. Üblicherweise werden vom Webserver Dateiendungen wie .shtml, .stm, .shtm und .cgi akzeptiert.
Die Anweisung zum Einbinden von Inhalten heißt „include-Anweisung“. Ein Beispiel für die include-Anweisung 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
AngularJS bietet die Möglichkeit, Funktionalität aus anderen AngularJS-Dateien mithilfe von ng-include einzubinden. Richtlinien.
Der Hauptzweck der „ng-include-Direktive“ besteht darin, ein externes HTML-Fragment abzurufen, zu kompilieren und in die Hauptanwendung von AngularJS einzubinden.
Versionshinweis: AngularJS 1.x hat den Langzeit-Support am 31. Dezember 2021 verlassen, und das Framework-Team erklärt, dass Die Unterstützung für AngularJS wurde offiziell eingestellt. Im Januar 2022 wurden keine neuen Releases oder Sicherheitspatches veröffentlicht. Jeder Schritt und Codeblock im Folgenden bleibt als historische Referenz unverändert. Modernes Angular bietet keinen direkten Ersatz: Markup wird aus Komponenten zusammengesetzt, und ein zur Laufzeit ausgewähltes Fragment wird gerendert. ng-container und ngComponentOutlet.
Schauen wir uns den unten stehenden Code an und erklären wir, wie dies mit AngularJS 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 setzt voraus, dass eine Bereichsvariable namens „tutorial“ existiert. Anschließend wird sie verwendet. ng-Wiederholung Die Direktive durchläuft jedes Thema in der Variable „tutorial“ und zeigt die Werte für „Name“ und „“ an.Description' Schlüssel-Wert-Paar.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Schritt 2) Schreiben wir den folgenden Code in eine Datei namens Main.html. Dies ist eine einfache AngularJS-Anwendung mit folgenden Aspekten.
- 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.
- Im ControllerIm Rahmen des $scope-Objekts wird eine Variable namens „tutorial“ erstellt. Diese Variable enthält eine Liste von Schlüssel-Wert-Paaren.
In unserem Beispiel sind die Schlüssel-Wert-Paare
- Name – Dies bezeichnet den Namen eines Themas wie Controller, Modelle und Anweisungen.
- 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:
Der folgende Screenshot zeigt das gerenderte Ergebnis: Der Browser-Tab trägt den Titel „Event Registration“, die Überschrift befindet sich über der eingefügten Tabelle, und die drei Zeilen werden über das Partial aus dem Tutorial-Array in Main.html geladen. Der kommentierte Screenshot zeigt die Überschrift „Gur99“, während der Code Folgendes ausgibt: Guru99
ng-include-Attribute: src, onload und autoscroll
Neben dem Dateinamen akzeptiert die Direktive zwei optionale Attribute und kann auf drei Arten geschrieben werden: als Attribut eines beliebigen Elements, als <ng-include> als Element oder als CSS-Klasse. Die folgende Referenz folgt der offiziellen ngInclude-Dokumentation.
| Attribut | Erforderlich | Was sie tut, |
|---|---|---|
| src oder ng-include | Ja | Ausdruck, der zum Template ausgewertet wird URL |
| laden | Nein | Der Ausdruck wird jedes Mal ausgewertet, wenn ein neues Teilstück vollständig geladen ist. |
| automatisches Scrollen | Nein | Ruft $anchorScroll nach dem Laden des Inhalts auf; das Weglassen des Attributs deaktiviert das Scrollen. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
Der häufigste Fehler ergibt sich aus der ersten Zeile: src nimmt eine AusdruckEs handelt sich nicht um eine einfache Zeichenkette. Ein Pfadliteral benötigt daher eigene Anführungszeichen innerhalb des Attributs, weshalb das obige Beispiel Folgendes lautet: ng-include="'Table.html'". Schreiben ng-include="Table.html" lässt AngularJS auswerten Table Wenn Sie eine Bereichseigenschaft haben, finden Sie nichts und lassen Sie das Element leer.
Warum ng-include einen neuen untergeordneten Gültigkeitsbereich erstellt
Die Direktive fügt keinen Markup-Code in den umgebenden Gültigkeitsbereich ein. Jedes `include` erzeugt ein neues Kindelement. kann dass sie prototypisch von dem Bereich erbt, in dem sie deklariert wurde, und dass diese Tatsache die meisten bindenden Überraschungen erklärt.
Das Lesen funktioniert wie erwartet. Der obige Ausschnitt lautet: tutorial direkt vom Elternteil, weshalb ng-repeat findet das Array. Beim Schreiben tritt der Fehler auf: wenn eine partielle Variable einem primitiven Datentyp einen Wert zuweist, wie beispielsweise bei ng-model="topic"AngularJS erstellt topic Im Kindbereich ändert sich die Kopie im Elternbereich nie.
Zwei Gewohnheiten vermeiden die Falle:
- Über ein Objekt binden, wie in
ng-model="data.topic", sodass Eltern- und Kindknoten denselben Bezugspunkt erreichen. - Speichern Sie den Zustand in einem Controller oder einem Service und stellen Sie Funktionen anstelle von einfachen Primitiven bereit.
Die Include-Anweisung gibt auch Folgendes aus: $includeContentRequested, $includeContentLoaded und $includeContentErrorso dass ein Elternteil reagieren kann $scope.$on ohne dabei überhaupt in den Kinderbereich einzugreifen.
Wie man ein leeres oder fehlgeschlagenes ng-include behebt
Ein Include-Befehl, der kein Ergebnis liefert, schlägt in der Regel aus einem von wenigen Gründen fehl. Gehen Sie diese Gründe der Reihe nach durch.
- Prüfen Sie die Angebote. Ein Dateiname, der als Literal angegeben wird, benötigt einfache Anführungszeichen innerhalb des Attributwerts. Ohne diese wird der Ausdruck zu „undefiniert“ aufgelöst, und es wird keine Anfrage gesendet.
- Die Seite wird über HTTP bereitgestellt. Die Direktive sendet einen XHR-Request an das Partial, daher schlägt das direkte Öffnen von Main.html von der Festplatte über eine Dateiadresse in den meisten Browsern fehl. Jeder lokale Webserver behebt dieses Problem.
- Bestätigen Sie, dass der Pfad aufgelöst wird. Beobachten Sie das Netzwerk-Panel hinsichtlich der Anfrage. Ein 404-Fehler bedeutet, dass der Pfad relativ zur Seite ist, die die Einbindung enthält, und nicht relativ zur Partial-Datei, die darauf verweist.
- Beachten Sie die Same-Origin-Regel. Standardmäßig ist die Vorlage URL muss mit der Domäne und dem Protokoll des Anwendungsdokuments übereinstimmen, da AngularJS es durchleitet $sce.getTrustedResourceUrlEine Vorlage von einer anderen Quelle benötigt einen Eintrag in der vertrauenswürdigen Ressource. URL Alternativ kann eine Liste oder ein expliziter trustAsResourceUrl-Wrapper verwendet werden, und der Remote-Server muss weiterhin CORS-Header senden.
- Achten Sie auf das Scheitern. $includeContentError wird immer dann ausgelöst, wenn der Antwortstatus außerhalb des Bereichs von 200 bis 299 liegt, wodurch ein ansonsten leerer Bereich in eine protokollierbare Meldung umgewandelt wird.
Ein weiterer Grund wird leicht übersehen. AngularJS speichert jedes geladene Partial in `$templateCache`, sodass eine bearbeitete Datei weiterhin veralteten Code ausliefern kann, bis der Cache-Eintrag entfernt oder die Seite neu geladen wird. Wenn ein Fragment eigenes Verhalten benötigt und nicht nur den Code, dann … benutzerdefinierte Direktive Das Werkzeug mit eigener Vorlage und isoliertem Anwendungsbereich ist das bessere Werkzeug.
