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

EJS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
EJS verhält sich als View Engine ähnlich wie ASP.NET Web-Forms. Das Akronym "EJS" bedeutet Embedded JavaScript und weist darauf hin, dass man direkt in einer HTML-Seite mit JavaScript arbeiten kann.

Transkript

In diesem Video schauen wir uns EJS als View Engine etwas genauer an und diese ist sehr ähnlich zum klassischen ASP.NET Web-Forms. Installiert wird das Ganze unter "npm install ejs --save" oder wenn man dann noch mal mit einem Master Template arbeiten möchte, "ejs-locals". Wofür steht denn eigentlich EJS? EJS steht für Embedded JavaScript. Also, es verrät schon, um was es hier geht und wenn man dann mal so an Web Forms denkt, wir können sozusagen einfach direkt in unsere HTML-Seite dann mit JavaScript arbeiten. Verfügt auch über RAZOR ähnliche Features und wie bereits schon verraten, können wir hier auch Masterpage nutzen. Wichtig ist aber, dass wir ejs-locals zusätzlich installieren und nochmal bei Express.js registrieren müssen. Weitere Infos zur Embedded JS kriegt man auf: "embeddedjs.com". Und wie schaut hier der Unterschied aus? Erstmal wird auch hier wieder kein require benötigt für EJS, nur für den Layout Support, wenn man das möchte. Auch wieder nur einfach als View Engine registrieren, unter: "app.set ("view engine", "ejs")". Also genauso einfach wie Jade zum Beispiel. Und Express.js erstellt auch hier wieder intern ein eigenes require. EJS werden dann im HTML-Format erzeugt und referenziert. Und innerhalb des View-Verzeichnisses muss das auch wieder stattfinden, also es ist für View Engines immer der Standard, und der JavaScript Code wird in einer RAZOR ähnlichen Syntax eingeführt. In dem Beispiel, wie wir es hier sehen und in Code rechts sehen wir, wie wieder ein json-Objekt durchgereicht wird beim Rendern. Und anschließend können wir auf das Property von dem Title innerhalb von diesem Embedded JS Syntax darauf zugreifen. Schauen wir uns das Ganze doch mal beim Beispiel wieder an. Erstmal brauchen wir natürlich wieder das entsprechende Paket da wechsle ich jetzt zu package.json und ich entferne jetzt Jade. Das brauche ich jetzt nicht mehr. Wir wollen jetzt EJS, EJS, passt! Dann natürlich die aktuelle Version Und, wenn ich jetzt die Datei speichere mit Strg+S, wird wieder durch meine Erweiterung, die ich programmiert habe Package Watcher von Visual Studio Code automatisch Jade gelöscht und EJS installiert. Okay, das Ganze wurde installiert und nun können wir das Ganze auch einbinden, das bedeutet, wir brauchen hier eben nur EJS anstatt Jade, und dann erzeuge ich ein neues Unterverzeichnis mit EJS und das json-Objekt belassen wir so. Dann gehe ich zu dem Unterordner Views, erzeuge hier das neue Verzeichnis EJS. Füge hier meine neuen Index-Dateien zu und diesmal mit der Dateiendung: .ejs. So ist es richtig. Und, mittels Ausrufezeichen-Tab wird normalerweise von Visual Studio, Code generiert. Deswegen benenne ich es noch mal kurz um, in eine HTML-Datei, dann bekomme ich kurz diesen Support. "save", Ausrufezeichen-Tab und schon bekomme ich hier ein Grundgerüst. Title brauchen wir jetzt erstmal noch nicht. Dann benenne ich das Ganze noch mal um in .ejs. Ja! Dann sehen wir es leider nicht so schön formatiert, das ist ein Nachteil, das wird noch nicht direkt supported von Visual Studio Code, man könnte dazu aber eigentlich, eine eigene Erweiterung schreiben. Ja, und damit wir jetzt hier auf das Embedded JavaScript zugreifen können, müssen wir hier wieder mit spitzer Klammer auf, Prozentzeichen, Bindestrich dann auf "title" zugreifen. das war's auch schon, Prozentzeichen, spitze Klammer zu. Mit ALT+Shift und der Pfeiltaste nach unten dupliziere ich diese Zeile mit Strg+X, schneide ich diesen Bereich aus und füge ich es mit Strg+V ein. Und Strg+S, speichere ich das Projekt Und das war auch schon alles, das heißt hier ist eben unser Embedded JavaScript Code, der aus unserem json-Objekt den Inhalt automatisch einfügt. Das war's, ich drücke jetzt hier mal f5, und starte unseren Webserver. Dann gehe ich hier direkt in Chrome und starte die Anwendung und wir sehen auch schon, wir bekommen ein "Hello from Jade!". Das ist natürlich noch nicht richtig vom Titel her. Das müssen wir natürlich noch ändern. Es ist hier... ...enthalten EJS. Einmal neu starten, ach so, ich muss natürlich Strg+S, das Ganze speichern. Einmal neu starten. Weiter f5 und schon sehen wir den neuen Content "Hello from EJS!". In diesem Video haben wir EJS kennengelernt und wie man das ganz einfach in Express.js mit einbinden kann.

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!