Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Komponenten

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Komponenten sind unabdingbar für eine Angular-2.0-App. Welche Bedeutung diese haben, erfahren Sie in diesem Video.
06:19

Transkript

Angular ist ja ein Framework, das komponentenbasiert ist. Unser Hauptziel ist es also, wenn wir neue Funktionalitäten darstellen möchten, also für den User darstellen möchten, dass wir eigene Komponenten erstellen. Und diese eigenen Komponenten sind benutzerdefinierte HTML-Knoten, wenn ihr so wollt, und in diesen HTML-Knoten kann ich dann entsprechend beschreiben, was die Komponente darstellen soll, und in einer separaten Schicht, wie die Komponente funktionieren soll. Wie sie funktioniert, beschreibe ich, indem ich innerhalb einer ganz normalen Klasse quasi die Logik dann entsprechend beschreibe. So eine Klasse kann im Grunde genommen sehr einfach aussehen. Hier in diesem Fall beispielsweise, dass ich eine Applikationskomponente machen will. Und die Klasse selbst, die hat eigentlich nur einen einzigen Konstruktor, und sobald dann also so eine Komponente erzeugt wird, soll dann entsprechend "App Component" in der Konsole erscheinen. Also relativ einfach. Natürlich bin ich auch in der Lage, dann, zusätzlich zu dieser normalen Klasse, die ich jetzt habe, auch Eigenschaften und Methoden in diese Klasse einzubinden. Das heißt, ich bin jetzt nicht gezwungen, lediglich Komponenten zu machen, die aus einem Konstruktor bestehen. Das mache ich jetzt hier mal einfach, indem ich eine Eigenschaft "name" und einen onClick-Handler, also eine Funktion "onClick", definiere. Wichtig ist, ich gehe noch einmal zurück: Das mache ich, damit ich dann später diese Eigenschaft "name" und die Methode "onClick" binden kann. Und woran will ich es später binden? An etwas Visuellem, das heißt an die Vorlage selber, die später die Komponente repräsentieren soll. Okay, wir haben also "name" als Eigenschaft vom Typ "string" "Hello World" und eine "onClick"-Methode, die nichts anderes macht als in der Konsole etwas zu schreiben. Fehlt uns also nur noch, zu beschreiben: Wie soll eigentlich meine Komponente aussehen? Ich beginne einfach mal damit, dass die Komponente selber ein h1-Element sein soll. Und jetzt möchte ich ja aus meiner Klasse eine Eigenschaft binden, das heißt ich möchte in meiner Komponente etwas darstellen. Das kann ich über eine ganz einfache Bindung machen. Die Bindung kann ich in dem Template dadurch symbolisieren beziehungsweise einbinden, indem ich mit geschweiften Klammern dann entsprechend die Eigenschaft, die ich in meiner Klasse definiert habe, einfach binde. Das würde hier bedeuten, dass, wenn ich dann entsprechend die Komponente auf die Bühne legen würde, dass hier einfach nur "Hello World" stehen würde, weil, erinnert euch, in der Klasse haben wir die Eigenschaft "name" als String definiert, mit dem jeweiligen Wert "Hello World" an der Stelle. Okay. Als nächstes möchte ich jetzt ein Klickereignis dazubinden. Und ein Klickereignis kann ich einfach in der Angular-Welt mit einer normalen Klammer und dem entsprechenden Ereignisnamen "click" definieren, gefolgt von einem Gleichheitszeichen. Anschließend kann ich in den Anführungszeichen dann auf eine Methode referenzieren, die ich in meiner Klasse definiert habe. Und das ist eben die Methode "onClick". Was passiert also? Lege ich diese Komponente auf die Bühne, wird automatisch an der Stelle, wo dann die geschweifte Klammer mit "name" drinsteht, der Text automatisch implementiert und dargestellt. Und zusätzlich ist es so, dass, wenn ich auf dieses h1-Element einfach einen Klick ausführe, die Methode "onClick" aus meiner entsprechenden Logikklasse ausgeführt wird und damit ein console.log dargestellt werden würde. Auf die Art und Weise kann ich also hervorragend dafür sorgen, dass ein Logikelement sich mit einem Template zusammen entsprechend eine View für den User dann zur Verfügung stellt. Wichtig ist: Ich habe hier ein superprimitives Template genutzt, indem ich einfach ein h1 gemacht habe. Von der reinen Theorie her wäre ich aber auch in der Lage, innerhalb dieses Templates eine andere Komponente noch mit einzubinden, die ich davor gemacht habe. Das heißt, ich bin natürlich in der Lage, Komponenten ineinander zu verschachteln. Logisch auch, wenn wir davon sprechen, dass Angular selbst ein Framework ist, das es uns ermöglicht, komponentenbasierte Anwendungen zu machen, wäre es ziemlich traurig, wenn das nicht gehen würde. Wie sieht sowas dann aus? Ich könnte also in meinem Template selber sagen: Hey, liebes Template, du sollst zusätzlich "my-component" darstellen. Und "my-component" ist eine Komponente, die ich zuvor dann irgendwo erstellt habe, und die hat ein eigenes Template, eine eigene Logik, und die möchte ich jetzt einfach zusätzlich zu meiner App Component dann darstellen. Damit das Ganze funktionieren kann, müsst ihr nur eine einzige Sache beachten. Denkt bitte daran, dass diese Komponente, die ihr dann entsprechend gebaut habt, in dem Modul, wo auch die App-Komponente selbst registriert wurde, über "declarations" mit registriert werden soll. In diesem Fall hat die Komponente den Klassennamen "MyComponent". Das ist deswegen so extrem wichtig, damit der Compiler weiß, dass in dem Moment, wo er die App-Komponente darstellt und dort dann "my-component" findet, dass er dann die Information bekommt, dass er die jeweiligen Elemente dieser Komponente in der MyComponent-Klasse findet. Auf diese Art und Weise sind wir also in der Lage, basierend auf einer Komponente, die quasi initial unsere Applikation darstellen soll, die nennen wir an dieser Stelle jetzt einfach mal "root component", eine komplette Anwendung zu bauen. Und diese komplette Anwendung basiert dadurch, dass diese root component eben dann halt mit weiteren Kind-Komponenten miteinander verschachtelt werden können, die können im Grunde genommen dann wiederum andere Kind-Komponenten ineinander verschachteln, und so bin ich also in der Lage, meine gesamte Anwendung komplett komponentenbasiert zu machen. Bleibt eigentlich nur noch eine kurze Anmerkung, die ich euch geben muss. Damit das Ganze aufgeht, muss ich Angular natürlich über einen Bootstrap mitteilen: Hey, du hast da eine ganz bestimmte Komponente. Diese Komponente ist im Grunde genommen die Komponente, mit der deine gesamte Anwendung starten muss. Und das musst du im Bootstrapping entsprechend dann unbedingt beachten. Und damit das Ganze dann funktioniert, ist es dann so, dass wir hier an dieser Stelle Folgendes machen: Wir deklarieren innerhalb des Moduls, des Applikationsmoduls, mit der Eigenschaft "bootstrap" einfach die Komponente, die tatsächlich als Root-Komponente in Frage kommt, und mit der unsere Anwendung selbst begonnen werden soll. Und das ist auch die Komponente, die dann entsprechend in unserer index.html abgelegt wird. Wie das später in einem Sample funktioniert, werden wir alles noch sehen, aber das ist im Grunde genommen der Kern, wie das Zusammenspiel der Komponente in diesem Fall mit dem Applikationsmodul funktioniert.

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!