Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Node.js für ASP.NET-Entwickler

Jade Layout-File

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ähnlich zu ASP.NET Masterpages beschreibt die Layout-Datei das äußere Gerüst – in ihr wird zudem der Blockname definiert. In der Unterseite muss man zuerst auf die Layout-Datei hinweisen, auf die man zugreifen möchte, und danach noch auf den Block.

Transkript

Natürlich können wir auch so was wie Layout-Datei nutzen. Das ist sehr ähnlich zu ASP.NET Masterpage. Wie macht man das Ganze dann unter Jade? Das ist ganz einfach. Wir haben eine zusätzliche Layout-Datei und die beschreibt das äußere Gerüst, zum Beispiel, es entspricht also dann unserer Masterpage. Dann setzt man zum Beispiel innerhalb von Content einen sogenannten Block, und gibt dem einen variablen Namen in dem Fall hier Content. Und bei dieser gewünschten Unterseite die reingeladen werden soll, muss man an erster Stelle darauf hinweisen, auf welche Layout-Datei man zugreifen möchte, und natürlich dass dann der weitere Content unter folgenden Block variablen Namen gehostet wird. Schauen wir uns doch mal an einem Beispiel an. Und zwar erzeugen wir jetzt einfach zusätzlich die layout.jade-Datei. Diese hält jetzt eben dann das Grundgerüst aus dieser Datei. Plus dass es sich hier natürlich noch mal etwas verändert hat. Das bedeutet, wir setzen hier eben jetzt den Block und beschreiben das Ganze unter Content. Wie man übrigens schön sehen kann, tut hier auch Visual Studio Code Jade sehr schön unterstützen. Das sieht man auch noch mal hier rechts unten, ist natürlich sehr angenehm für die Syntax. Das heißt, das ist eben das äußere Gerüst und da soll die Unterseite reingeladen werden können. Wir können hier zum Beispiel auch noch mal ein "footer" setzen. "This is the footer." Also wir können auch noch unten weitere Elemente hinzufügen. Es spielt gar keine Rolle. Und jetzt als Unterseite müssen wir darauf hinweisen, "extends layout". dass wir also mit einer Layout-Datei arbeiten und der folgende Inhalt zählt zum Block Content. Und dann können wir wieder wie gewohnt hier mit unserem Jade-Format weiterarbeiten. Wir wollen jetzt eine Überschrift definieren, geben direkt mit dem "= title", dann wieder die Kopie von unserem json-Objekt mit. "p This is an express app!" Dann speichere ich beide Dateien. Und wenn wir jetzt nun mit f5 die Express-Anwendung starten in Visual Studio Code, kann ich auch hier direkt das Ganze starten, und wir sehen, wir haben jetzt den neuen Content, der jetzt hinzugefügt wurde. Natürlich auch noch mal der Titel und dann sogar unseren "footer" und alles über unsere eine Layout-Datei.

Node.js für ASP.NET-Entwickler

Sehen Sie, wie Sie den Umstieg auf auf native JavaScript-Entiwcklung mit Node.js erfolgreich meistern.

2 Std. 52 min (31 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:15.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!