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.

Moderne Webanwendungen mit Node.js und Express.js

Templates mit Jade

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie können HTML- und Jade-Code hin- und her konvertieren (lassen) und dabei von einigen Vorteilen profitieren.

Transkript

Die wenigsten Internetseiten setzen sich lediglich aus statischen Inhalten zusammen. Letztendlich ist Dynamik auch einer der Gründe, warum man am Ende des Tages Node.js verwenden möchte, Um die Brücke zu schlagen zwischen HTML-Code und Dynamik gibt es sogenannte Template-Engines. Eine dieser Template-Engines ist Jade. Jade werde ich ihnen nun im Laufe des Videos vorstellen, als auch mit Hilfe der aktuell statischen index.html eine Umsetzung innerhalb von Jade vornehmen. Das Allererste, das man innerhalb seines Projektes tun sollte, ist die Installation von Jade als Abhängigkeit des Projektes selbst. als auch die globale Installation der Jade-Konsolenanwendung. Wenn alles korrekt funktioniert hat, kann ich Jade ausführen, und es passiert zunächst einmal nichts. Innerhalb meines Projektes lege ich nun einen Ordner mit dem Titel "views" an. Hier werde ich alle meine Jade-Dateien zu einem späteren Zeitpunkt hinterlegen. Im Unterordner "layout" werden entsprechend Basiskomponenten hinterlegt werden. Mehr dazu in der Umsetzung mit Jade. Ich habe nun meine index.html-Datei und möchte diese in Jade umwandeln. Jade hat eine besondere Art und Konvention, wie entsprechend der Jade-Code im Vergleich zu HTML aussieht. Auf der Website html2jade von Aaron Powell dot com, gibt es einen Konverter, der entsprechend HTML in Jade umwandeln kann. In diesem Beispiel sieht man, dass die Konventionen von Jade vor allem mit Einrückungen arbeiten, statt wie üblich für HTML mit XML-tags. Wenn also beispielsweise ein "tag" wie <head etwas umschließt, wird das durch eine zusätzliche Einrückung aller Inhalte, die von <head umschlossen werden, ausgedrückt. Attributausprägungen werden in Klammern geschrieben, und tatsächliche Inhalte stehen als freier Text hinter dem jeweiligen Element. An dieser Stelle bietet es sich an, den Inhalt der index.html hier rein zu kopieren, Ich füge also den gesamten Inhalt ein, und klicke auf den Button. Ich bekomme nun entsprechend alle Jade üblichen Konventionen für meine HTML-Datei zurück, in meinem Projekt lege ich also nun unter dem Reiter "views", eine Datei mit der Bezeichnung "index.jade" an und füge alles ein, was soeben konvertiert wurde. Zum einen bietet mir Webstorm hier die Möglichkeit Jade-Dateien automatisch zu HTML konvertieren zu lassen. Das ignoriere ich nun und verwende die Kommandozeilenanwendung. Beim Konvertieren der index.jade in HTML würde man nun das gleiche Ergebnis wie die index.html erwarten. Allerdings tritt in diesem Fall ein Fehler auf, da es hier sich um unerwarteten Text handelt. Und zwar gibt es ein Problem mit dem Konverter, das einfach behoben werden kann. Mit der Funktion "replace", STEUERUNG+R, kann mittels einer sogenannten "regular expression" alle Zeilen, die entsprechend diese Linie hier enthalten, durch nichts ersetzt werden. Wiederhole ich nun den Umwandlungsvorgang, so erhalte halte ich die index.html-Datei. Diese liegt in meinem Ordner "views". Ich lösche nun die aktuelle index.html, teste, ob meine index.html tatsächlich so funktioniert wie die ursprüngliche. Und siehe da, der Inhalt ist der gleiche. Das bedeutet, die Konvertierung funktioniert korrekt. Da ich zukünftig aber keine index.html mehr brauche, entferne ich diese nun. Als nächstes möchte ich mir einige der Vorteile von Jade zunutze machen, beispielsweise das Auslagern des Standardlayouts. Dafür erstelle ich unterhalb von "layouts" eine neue Datei mit der Bezeichnung "layout.jade". Aus der "index.jade" übernehme ich nun alle Inhalte, die ich immer für gleich halte, egal, welche Webseite ich gerade bediene. Das bedeutet, jede Unterseite hat immer den Dokument-Header, als auch den <body-tag. Über copy & paste füge ich dieses nun ein, und definiere einen sogenannten Block mit der Bezeichnung "content". Da ich diese Inhalte nun einmal in der "layout.jade"-Datei habe, kann ich sie mir in der "index.jade"-Datei ersparen. Das bedeutet, ich entferne alles, was oben steht, und bereits in der "layout.jade"-Datei enthalten ist. Mit der Angabe "extends layouts/layout", gebe ich nun an, das entsprechend hier einzufügen ist, was sich aktuell in der "layout.jade"-Datei enthält. Und über die zusätzliche Definition des Blocks "content", füge ich quasi alle Inhalte, die sich unterhalb von "content" befinden, in den Block "content" ein. Ich teste nun noch einmal, ob die Anwendung korrekt funktioniert, und erhalte wieder eine index.html. Um sicherzugehen, dass hier auch alles richtig aussieht, kopiere ich die Dateien in den "public"-Ordner, und führe sie entsprechend im Browser aus. Und siehe da, alle Inhalte sind wie erwartet. Ich habe Ihnen nun Jade als eine Art von Template Engine vorgestellt, die später auch im Express Framework verwendet werden kann. Installiert wurde Jade zum einen im Projekt selbst als Projektabhängigkeit, aber auch als Kommandozeilenanwendung, um unter Umständen zu testen, ob die entsprechenden Jade-Templates funktionieren. Die Besonderheit von Jade ist die Konvention von Einrückungen statt XML-tags. Bereits gesehen haben Sie, wie Sie mit Hilfe von Platzhaltern Inhalte voneinander trennen können und wiederverwenden. Später ist es auch möglich Logik in diese entsprechenden Jade-Dateien einzubringen. Mit dem Konvertiertool kann man Jade-Dateien entsprechend in HTML-Dateien umwandeln, ein Vorgang, der automatisiert vom Express Framework durchgeführt wird. Mit der index.html habe ich nun aus dem Basis-Layout die "layout.jade"-Datei erstellt, und die tatsächlichen Inhalte innerhalb der index.jade abgebildet.

Moderne Webanwendungen mit Node.js und Express.js

Entwickeln Sie auf der Open-Source-Plattform Node.js kompakte und performante Webapplikationen und lernen Sie weiterführende Konzepte professioneller Webentwicklung kennen.

2 Std. 20 min (24 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2015

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!