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

Module

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Module ermöglichen in der Angular-Welt, eigene Projekte zu strukturieren. Sie bestimmen selbst, welche Inhalte in Modulen zu finden sind und können diese anschließend wunderbar mit Kollegen und der Welt teilen.
06:21

Transkript

In den kommenden Minuten möchte ich sehr gerne mit euch über die Angular-Module sprechen. Tut mir bitte einen Gefallen vorweg. Verwechselt bitte die Angular-Module nicht mit den JavaScript-Modulen. In der JavaScript-Welt gibt es ja auch Module. Das sind ja immer Dateien, und in diesen Dateien könnt ihr definieren, welche Elemente nach außen verfügbar gestellt werden, indem ihr dies mit dem Schlüsselwort "Export" kennzeichnet. Die Module in der Angular-Welt haben eine etwas andere Bedeutung. Sie bündeln, ähnlich wie in einem Blackbox-Prinzip, im Grunde genommen bestimmte Funktionalitäten und Features und ermöglichen euch damit, quasi ein Paket zu haben, und dieses Paket beispielsweise an Kollegen oder auch an die ganze Welt zu verteilen, damit diese mit den Funktionen und Features, die ihr selbst entwickelt habt, dann entsprechend weiterarbeiten können. Das heißt, wir sind technisch in der Lage, eine eigene Anwendung oder auch ein Modul, das wir selber schreiben, zu erweitern, indem wir externe Module einbinden. Das bedeutet also ja im Wesentlichen nichts anderes als dass Module quasi Funktionalitäten sind, das heißt sie haben bestimmte Funktionalitäten beinhaltet, und wenn ich sie in einem eigenen Modul ebenfalls nutzen will, importiere ich sie, und danach kann ich sie dann verwenden, und kann dann sogar, wenn ich möchte, mein Modul dann wiederum weitergeben, welches dann die Abhängigkeit dann auch weiter durchtragen würde. Warum muss ich sowas überhaupt machen? Warum packe ich ein Modul in das andere Modul und erweitere das auf diese ganze Art und Weise? Das ist im Grunde genommen deswegen, damit der Compiler Bescheid weiß, wonach er Ausschau halten soll. Wenn wir das Ganze nämlich in Modulen verpacken, dann definieren wir innerhalb der Module ganz klare Bestandteile. Und der Compiler, der Angular-Compiler, der ja die Aufgabe hat, die Templates mit Logiken dann entsprechend zu paaren und anschließend dem User eine View zur Verfügung zu stellen, der hat jetzt ganz klare Definitionen, wonach er Ausschau halten kann, was natürlich von Vorteil ist, denn damit haben wir dann auch entsprechend einen Performancegewinn. Angular selbst bietet uns sogar schon Module. Und die müssen wir im Grunde genommen einfach nur importieren in unsere eigenen Module, wenn wir sie nutzen wollen. Lasst uns mal die hauseigenen Module von Angular angucken. Das ist beispielsweise BrowserModule. BrowserModule ist im Wesentlichen ein Modul, in dem quasi das Ereignis-Handling rund um den Browser herum gesteuert wird, DOM-Manipulation und Co. Die Besonderheit dieses BrowserModules ist im Übrigen, dass das BrowserModule selber ebenfalls ein Shared Module, nämlich das CommonModule, importiert und einbindet, damit es damit arbeiten kann. Und denkt bitte daran: Das CommonModule ist von dem JavaScript-Modul common entsprechend quasi abgebildet. Und das CommonModule, das stellt quasi Direktiven und Pipes zur Verfügung, die ich in meinem eigenen Modul nutzen möchte. Möchte ich also beispielsweise die strukturelle Direktive NgIf in meinem eigenen Modul nutzen, muss ich gewährleisten können, dass CommonModule auch in meinem Modul drin ist. Ansonsten weiß der Compiler einfach nicht, wie er dieses NgIf auflösen soll. Genauso gibt es ein HttpModule für XHR-Aufrufe. Es gibt ein FormsModule, um Formulare zu realisieren, und das RouterModule, um entsprechend ein komponentenbasiertes Routing hinzukriegen. Das sind im Grunde genommen die Grundlagen eines Moduls. Lasst uns nun im nächsten Schritt mal schauen: Wie erzeugen wir überhaupt Module? Supereinfach. Das Erste, was ihr macht, ist, erstmal für dieses Modul eine Klasse anzulegen. Das ist gar kein Hexenwerk. Und das Ganze sieht dann entsprechend wie folgt aus. Nachdem ihr diese Klasse angewendet habt, wäre es natürlich sehr von Vorteil, wenn wir jetzt diesem Modul beibringen, dass es mit anderen Modulen zusammenarbeiten soll. Und dafür muss ich im Grunde genommen der Modulklasse mittels eines Decorators MetaDaten-Informationen einbinden. Wie ich das mache, ist relativ einfach zu sehen. Ich nehme hier einfach NgModule. Dieses NgModule, das ich hier definiere, mit dem @-Zeichen davor, zeigt auf, dass es ein Decorator ist. Das heißt, damit kann ich MetaDaten binden, und zwar die MetaDaten für mein AppModule. Was tue ich hier? Ich gehe hin und verwende jetzt in den MetaDaten die Eigenschaft "imports". Und diese Eigenschaft "imports", die ich verwende, die verwende ich deswegen, weil ich eben das BrowserModule in mein eigenes Applikationsmodul einbinden möchte. Und ab diesem Moment ist also mein Applikationsmodul in der Lage, auf beispielsweise sowas wie NgIf zurückzugreifen, weil das BrowserModule wiederum vom CommonModule abhängt und so weiter und so weiter. Das heißt, mein Modul hat auf einen Schlag hin einfach schon ganz viele Funktionalitäten hinzubekommen, weil es einfach das BrowserModule importiert hat. Im nächsten Schritt ist es nun so, dass ich ja innerhalb meines eigenen Moduls irgendwann mal auf jeden Fall auch mal eigene Komponenten, Direktiven und Pipes dann entsprechend einbinden möchte. Was das im Klartext bedeutet, also, was überhaupt eine Komponente ist, Direktiven und Pipes, werden wir noch lernen. Aber grundsätzlich müsst ihr euch Folgendes vorstellen: Wenn ich in meinem Modul Funktionalität zur Verfügung stellen will, mache ich das mit Komponenten, Direktiven und Pipes. Und die möchte ich jetzt entsprechend innerhalb meines Moduls nutzen, damit der Compiler Bescheid weiß: Hey, wenn ich jetzt etwas Bestimmtes sehe, dann weiß ich ganz genau, ich muss das mit den Elementen in Verbindung bringen, damit der Benutzer eine sinnvolle View bekommt. Und das mache ich ganz einfach, indem ich jetzt hier einfach die Eigenschaft "declarations" verwende. Mit der Eigenschaft "declarations" kann ich jetzt nämlich nicht nur externe Funktionalitäten importieren, sondern auch Funktionalitäten, die ich selber geschrieben habe, in dem Modul selber deklarieren, um es dann in dem Modul nutzen zu können. Und das ist in diesem Fall die declaration, und in dieser declaration binde ich jetzt eine App Component. Und welche Bedeutung eine App Component hat, werden wir gleich lernen. Aber in diesem Video haben wir gesehen, welche Bedeutung ein Modul hat und wie wir Module dann entsprechend nutzen können.

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!