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.
