Ng-include in AngularJS: So schließen Sie eine HTML-Datei ein (Beispiel)

Inhaltsverzeichnis:

Anonim

Standardmäßig bietet HTML nicht die Möglichkeit, clientseitigen Code aus anderen Dateien einzuschließen. In jeder Programmiersprache ist es normalerweise eine gute Praxis, Funktionen für jede Anwendung auf verschiedene Dateien zu verteilen.

Wenn Sie beispielsweise Logik für numerische Operationen hätten, möchten Sie diese Funktionalität normalerweise in einer separaten Datei definieren. Diese separate Datei kann dann in mehreren Anwendungen wiederverwendet werden, indem nur diese Datei eingeschlossen wird.

Dies ist normalerweise das Konzept von Include-Anweisungen, 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 aufgenommen werden können.

In diesem Tutorial lernen Sie:

  • Client-Seite umfasst
  • Server Side Includes
  • So fügen Sie eine HTML-Datei in AngularJS ein

Client-Seite umfasst

Eine der häufigsten Möglichkeiten ist das Einfügen von HTML-Code über Javascript. JavaScript ist eine Programmiersprache, mit der der Inhalt einer HTML-Seite im laufenden Betrieb bearbeitet werden kann. Daher kann Javascript auch verwendet werden, um Code aus anderen Dateien einzuschließen.

Die folgenden Schritte zeigen, wie dies erreicht werden kann.

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

Dies ist eine enthaltene Datei

Schritt 2) Erstellen Sie eine Datei mit dem Namen Sample.html, die Ihre Hauptanwendungsdatei ist, und fügen Sie das folgende Codefragment hinzu.

Nachfolgend sind die wichtigsten Aspekte aufgeführt, die beim folgenden Code zu beachten sind:

  1. Im Body-Tag befindet sich 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 Abfrageskript. JQuery ist eine Skriptsprache, die auf Javascript basiert und 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.