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

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Diese View Engine ist unmittelbar vergleichbar mit ASP.NET MVC, wobei man Jade-Dateien vor sich hat, die erst zu HTML gerendert werden. Die Engine ist jedoch recht fehleranfällig und die Fehlermeldungen selbst sind leider nicht besonders aussagekräftig.

Transkript

In diesem Video sehen wir uns etwas sehr Spannendes an, und zwar gerade für ASP.NET MVC-Liebhaber, die gern denselben Komfort unter Node.js hätten und zwar ist Jade eben ein View Template, also View Engine, die sehr ähnlich zu vergleichen ist mit ASP.NET MVC. und man hat dann keine Nummer in HTML-Datei mehr, sondern sogenannte Jade-Dateien und die werden eben dann serverseitig zu HTML-Dateien gerendert. Das Schöne ist, wir können hierbei ebenfalls so was wie Mastertemplate nutzen und verfügt über Razor ähnliche Funktionen und Features, die wir kennenlernen werden, aber na ja, aus eigener Erfahrung ist es sehr, sehr einfach da schnell um Fehler zu machen, und die Fehler sind alles andere als aussagekräftig. Weitere Infos über Jade bekommt man dann auf der Produktwebsite http://jade-lang.com. Und installiert wird alles bei "npm install jade --save". Wie ist der genaue Aufbau? Erst mal wenn man Jade mit Express.js nutzt, wird erstmal kein "require" benötigt. Es heißt, wie wir jetzt hier rechts in Source Code sehen, man gibt Express.js diese View Engine als Mittelwert mit und man schreibt einfach zusätzlich View Engine dazu und dann weiß Express.js exakt nach welchen Dingen es suchen muss, und Jade ist ja dann das nötige Schlüsselwort, und das wird vom Haus einfach mit unterstützt. Und es ist eben sehr, sehr einfach, wenn man diese View Engine registriert, und Express,js erzeugt damit sein eigenes "require" und man muss eigentlich nur noch die Jade-Datei in Jade-Format erzeugen und referenzieren und das macht man in dem Fall, was man hier bei der "app.get function" sehen, gibt es hier dann extra bei "response render" die jade/index-Funktion. Somit weiß dann Express.js, dass er in dem Fall bei dem Aufruf unter dieser Route die View Engine dafür einsetzt. Und diese Jade-Dateien werden immer standardmäßig in ein Verzeichnis unter Views abgelegt. Da wird immer nach deren Dateien gesucht. Und in dem Fall wäre es hier dann die index.jade-Datei. Und wie schaut ungefähr Jade-Format aus? Wir sehen auf der linken Seite den HTML-Content, das heißt "doctype html". Aus dem wird dann direkt, wirklich direkt ein HTML-Element von HTML erzeugt. Wir sehen, dass es hier zum Beispiel dann kein Ende gibt. Man schreibt sozusagen eigentlich nur noch das jeweilige HTML-Element und rückt daneben dementsprechend die ganzen Werte ein. Und wenn man irgendein Content mitgeben möchte, in dem Fall beim "title" macht man es dann einfach nur noch mit einem Ist gleich. Und da ist eben das wohl sehr schnell fehleranfällig wenn man hier irgendwo eine Einrückung nicht sauber macht, dann kann es nämlich zu einem Fehler führen. Und na ja, aus diesem Jade-Format wird eben automatisch dann diese HTML-Datei gerendert. Es gibt aber auch ein Razor ähnliches Feature. Das heißt ein json-Objekt wird hier beim Rendern mitgegeben zusätzlich. Wie wir hier sehen "Hello from Jade" mit "title" und in der Jade-Datei wird dann eigentlich einfach nur noch der Propertyname von diesem json-Objekt dazu geschrieben mittels Ist gleich-Symbol. Und dann wird das automatisch erkannt. Fügen wir doch mal so ein Jade-Beispiel in ein Beispielprojekt ein. Als Allererstes muss natürlich Jade installiert werden. Dazu gehe ich jetzt hier in die Konsole wobei ich habe eine Erweiterung installiert. Schauen wir mal nach unter f1 "extension install" und zwar habe ich den "Package watcher" geschrieben. Das ist bereits installiert, Package Watcher, ansonsten wenn es nicht installiert ist, hier einfach installieren und man muss dann einmal Visual Studio Code neu starten. Das Besondere an meiner Erweiterung, die ich für Visual Studio Code geschrieben habe, ist jetzt folgendermaßen. Ich brauche nämlich nur noch hier in meine package.json gehen. Ich klicke hier mal node.modules auf und hier ungefähr sollte dann das das ersichtlich werden, wenn es installiert wurde. Und jetzt kann ich durch das IntelliSense von Visual Studio Code, wenn ich jetzt hier Steuerung leer drücke, mir alle Pakete anzeigen, die es gibt und in dem Fall werde ich Jade, ich mache hier natürlich einen String, Hier haben wir Jade und ja, welche Version möchten wir, Steuerung leer. Lassen wir uns doch mal anzeigen, was es aktuell gibt. Nehmen wir 1.11.0. 1.11.0. Und wenn ich jetzt die package.json speichere, wird automatisch im Hintergrund "npm install" aufgerufen. Wir sehen schon, der Mauszeiger lädt kurz. Und hier sehen wir auch schon, dass automatisch Jade installiert worden. OK. Das bedeutet, wir haben jetzt Jade und das wurde automatisch mit Package Watcher als Visual Studio Code Extension installiert. Wenn man es nicht installieren möchte, einfach in der Konsole den Befehl eingeben. Anschließend gehen wir in die App.js und hier befindet sich ja unsere Express-Anwendung. Jetzt erstmal hier noch mit einem "Hello World"-Beispiel, das wir hier nicht mehr benötigen. Und jetzt binden wir einfach diese View Engine als View ein. "view engine". Unschön ist, dass man das Ganze natürlich per String eingeben muss und dass es nicht typesicher ist. Allerdings dürfte jetzt alles passen, View Engine. Und jetzt geben wir als Antwort zurück "response render" und jetzt gibt man den Namen der jeweiligen Jade-Datei mit und zwar auch ohne Dateiendung. in dem Fall wird es "index", aber ich möchte dazu einen eigenen Unterordner erzeugen, weil ich mehrere View Engines zeige. Daher "jade/index" Und was wir benötigen, ist ein neues Verzeichnis, "New folderviews". innerhalb von den Views, das ist also dieses Standardverzeichnis, wo immer nach einer View Engine, nach diesen Dateien also nachgeschaut wird, dann haben wir hier unsere Jade. Und dann erzeugen wir hier unsere index.jade-Datei. Ich habe schon mal passend einen Jade-Content in der Zwischenablage, den ich einfach mal einflügle. Wie ich schon sagte, es ist wichtig, dass man hier das Ganze mit Tag trennt, und ich greife hier schon mal auf ein json-Property zu. mit "title". Das bedeutet, wir müssen dieses Objekt natürlich noch durchreichen. Und zwar direkt beim Rendern wird dieses Objekt mitgegeben. Das machen wir jetzt hier mittels geschweiften Klammern. Das wird es json mitgeben. Dann wäre ich hier das "property title". Und das ist dann hier zum Beispiel "Hello from Jade". Und das war schon alles. Das heißt, wir tun serverseitig haben wir eben unsere json-Objekte und geben das der View Engine. Diese Render, die eben aus diesen Dateiformaten eine gültige HTML-Seite und verwendet ja automatisch eben den Wert von json-Objekt Wenn ich jetzt hier noch mal Strg+Shift+B, werden wir alles von TypeScript natürlich noch absegnen lassen. und dann f5. Dann starte ich mal Express.js Server. Und dann schauen wir uns doch alles mal in Chrome an. Und dann sehen wir auch schon, wie hier uns die fertige Website geliefert wird. "Hello from Jade", das ist der Titel. Das ist eine Express App. Auch hier der Titel wurde automatisch ersetzt. Das war alles, damit wir mit Jade als View Engine arbeiten können.

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!