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

Decorator und Metadaten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit dem Component Decorator lassen sich Metadaten an eine Klasse hängen, die als Komponente arbeiten soll.
05:05

Transkript

Lasst uns gemeinsam über Dekoratoren in der Angular-Welt sprechen. Im Wesentlichen dienen Dekoratoren dafür, um im ECMAScript2015-Kontext Klassen zu konfigurieren. Ihr seid nämlich damit in der Lage, Metainformationen einer Klasse hinzuzufügen Dekoratoren gibt es sehr viele in der Angular-Welt. Sie befinden sich in unterschiedlichen Modulen. Im Core-Modul gibt es beispielsweise die Möglichkeit Komponenten zu dekorieren, Direktiven, Injectable und Pipes. Und für das Router-Modul gibt es beispielsweise den Decorator Routes. Entscheidend ist es jetzt, wie wir in der Lage sind, solche Dekoratoren zu nutzen, um eine Klasse zu dekorieren. Ich wechsle hierfür in meine Entwicklungsumgebung. Und in meiner Entwicklungsumgebung ist das erste, was wir hier erledigen wollen, einmal eine neue TypeScript-Datei zu erzeugen. Denn wir möchten die Komponente wie auch die Klasse dazu immer in separate Module, also in separate TypeScript-Dateien hinterlegen. Ich erzeuge eine neue TypeScript-Datei. Die Komponente, die ich gleich anlegen möchte, ist die Route-Komponente, also die Komponente, mit der unsere Applikation beginnt zu arbeiten. Entsprechend nenne ich das Ganze hier "app", und da es eine Component ist packe ich noch das "component" dahinter. Wie ihr sehen könnt, setzt WebStorm hier automatisch noch die Endung "ts" hier hinter, für "TypeScript", und wie erwähnt, bin ich mit einem Decorator in der Lage, eine Klasse zu konfigurieren. Eine Klasse erzeuge ich im TypeScript- oder auch im ECMAScript 2015-Umfeld mit dem Schlüsselwort "class" und dem Namen der Klasse. Da dies die Applikationskomponente also die Route-Komponente wird, nenne ich sie "AppComponent" und werde ein Konstruktor jetzt definieren. Und im Konstruktor selber soll eigentlich kein Hokuspokus passieren außer ein "console.log". "App Component" Jetzt ist der nächste Schritt, dass wir diese Klasse dekorieren wollen. Damit ich es dekorieren kann muss ich zunächst einmal mit einem "@"-Zeichen beginnen. Das "@"-Zeichen sagt jetzt, ab jetzt wird dekoriert, gefolgt von dem Namen des Decorators. Dann den Parameter klammern, womit ich dann den Decorator mit Informationen versorgen kann. Und hier gibt es dann entsprechend ein Konfigurationsobjekt, das ich dann übergeben kann. Das Ganze dann ohne Semikolon, direkt vor der Klasse definieren, damit man auch weiß, welcher Decorator zu welcher Klasse gehört. Okay. Wir wollen jetzt, wie gesagt, eine Komponente dekorieren, also verwenden wir hier "@". Und wir werden sehen, was hier von WebStorm sehr intelligent ist, denn WebStorm bietet mir dann hier auch gleich das "Component" an. Es erkennt also hier, dass es einen Component-Decorator hierfür gibt. Ich bestätige das hier. Und automatisch seht ihr auch, dass ein Konfigurationsobjekt benötigt wird und WebStorm hat sogar die Intelligenz, euch anzuzeigen, welche Eigenschaften dieser Decorator haben soll, oder die Metadaten an dieser Stelle. Zwingend notwendig für eine Komponente sind die Eigenschaften "selector", und natürlich auch "template" Alle anderen Eigenschaften sind optional, aber "selector" und "template" brauch ich einfach, damit ich eine Komponente wirklich realisieren kann. Ich erzeuge jetzt hier also ein Objekt mit einer Selektor-Eigenschaft. und die Komponente soll den Selektor "app" haben, was bedeutet, innerhalb von html kann ich dann später einfach "app" als Knoten später benutzen. Das ist nichts anderes als das, was ich mit dem Selektor definiere. Und der Inhalt dieser Komponente der wird definiert über "template". Und da möchte ich einfach ein "h1" haben, für "Hello World". Das heißt, später wird resultierend sobald ich das "app"-Element auf die Bühne lege, in dem "app"-Element dieses "h1" dann hinterlegt. Das war's im Wesentlichen schon. Ein wichtiger Hinweis noch: Dieses "import"-Statement, dass ihr hier oben findet Dieses Statement macht mir WebStorm voll automatisch in Folge der Code Completion. Solltet ihr mit einem anderen Editor arbeiten, und dieses "import"-Statement wird nicht automatisch gesetzt, müsst ihr euch bitte selber darum kümmern, dass ihr dieses "import"-Statement definiert. Das macht ihr mit dem Schlüsselbegriff "import", und in geschweiften Klammern gebt ihr dann die Elemente ein, die ihr aus diesem Modul importieren wollt. Könnt ihr also Komma-separiert ohne Probleme machen und weitere Elemente hier hinzufügen. Mit dem Schlüsselwort "from" sagt ihr dann, aus welchem Modul das Ganze importiert werden soll. Zur Erinnerung: Component befindet sich im Core-Modul. In diesem Video habt ihr gesehen, wie wir in der Lage sind, den Komponenten-Decorator zu nutzen.

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!