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.

Angular 2 Grundkurs

Vorlagen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Komponenten und deren Inhalte lassen sich in Vorlagen definieren, die als Metadaten transportiert werden. Dieses Video zeigt die unterschiedlichen Möglichkeiten des Templatings.
03:52

Transkript

Angular 2.0-Komponenten werden mit Vorlagen gefüttert. Diese Vorlagen dienen für Folgendes. Jedes Mal wenn Angular einen html-Knoten findet, der diesem Selektor hier entspricht, wie wir es in der index.html hier haben, geht Angular hin und schaut, welche Vorlage definiert ist und befüllt dann diesen Knoten mit der Vorlage. Wenn wir uns das schnell einmal im Inspektor anschauen, werdet ihr das ganz schnell sehen, dass wir hier die "my-app" haben, wie wir sie in der index.html definiert haben und in der "my-app" befindet sich ein header-Knoten "my-app". Und hier, auch wunderbar zu erkennen, genau die Vorlage, wie wir sie angegeben haben. Um Vorlagen innerhalb der Angular 2-Welt zu definieren, gibt es in den Metadaten zwei Eigenschaften. Entweder ich verwende wie ihr hier seht "template", oder aber auch ich kann "templateUrl" verwenden und auf eine externe Datei verweisen, in der die Vorlage dann hinterlegt ist. "template" selber ist für kürzere Strings geeignet. Ihr könnt aber auch ECMAScript 2015-konform statt der normalen Anführungszeichen hier Backticks verwenden. Und wenn ihr Backticks nutzt, habt ihr den Vorteil, dass ihr in der Lage seid, jetzt hier an der Stelle - ich füge euch das mal schnell ein - mehrzeilige Vorlagen innerhalb des Strings hier zu definieren, ohne wie früher immer String-Operationen mit irgendwelchen Pluszeichen und Ähnliches zu machen. Der Backtick erlaubt es uns also, dass ich jetzt hier ganz einfach zum Beispiel reinschreiben könnte, es soll einen Navigationsbereich geben, dann gibt es einen Bereich "main", und einen Footer-Bereich. Speichere ich das Ganze, dann seht ihr hier "Navigation", "Hello World" und "Footer". Und so habe ich ein mehrzeiliges Template innerhalb des Decorators definiert. Alternativ könnte ich diesen Inhalt auch wunderbar in eine externe Datei auslagern. Um das zu machen, erzeuge ich jetzt einfach fix eine html-Datei, die genauso heißt wie die Komponente, also "app.component" Den Inhalt der html-Datei entferne ich komplett. Und stattdessen gehe ich zurück in die App-Komponente, klaue mir hier den Inhalt, füge den in die "app.component"- Vorlagendatei hinein, und verwende dann anstelle der Eigenschaft "template" einfach "templateUrl". Ich nehme auch die Backticks raus. Also "templateUrl". Und definiere nun relativ zum basepass die Datei. Das ist also an dieser Stelle "./app". "/app.component.html" Teste ich das Ganze nun, seht ihr, dass das wunderbar hier im Browser angezeigt worden ist. Ich werde jetzt auch mal ganz fix in den Netzwerkmonitor gehen. Und innerhalb des Netzwerkmonitors könnt ihr nun erkennen, dass die html hier geladen wurde. Das heißt in diesem Fall wurde die Vorlage der Komponente aus der externen Datei "app.component.html" geladen. In diesem Video habt ihr gemeinsam mit mir gelernt, wie ihr Vorlagen einer Komponente definieren könnt.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!