Angular 2 Grundkurs

Bootstrap eines Moduls

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie man ein Applikations-Modul für den Start einer Angular-Anwendung konfiguriert, lernen Sie in diesem Video.
06:41

Transkript

In diesem Video möchte ich euch zeigen, wie ihr eure Angular-Anwendung Bootstrap, das heißt, die Angular-Anwendung initialisiert. Wir haben bislang ein Modul erzeugt, das wir "AppModul" genannt haben und in dem wir eine App-Komponente registriert haben. Die App-Komponente selber soll "Hello World" anzeigen. Ist ansonsten von der Logik her relativ einfach gehalten. Und mit dem Selektor haben wir gesagt, dass die Komponente selber entsprechend als html-Element "app" implementierbar sein soll. Und das bedeutet ja, dass wir jetzt hier innerhalb der index.html in der Lage sein müssen, hier ganz normal "app" zu verwenden. Und wenn wir dann hier "app" verwendet haben, sollte dann im body selber "Hello World" erscheinen. Wir müssen, damit das Ganze jetzt funktioniert, und das Bootstrapping sauber läuft noch zwei, drei Kleinigkeiten in die Wege leiten. Zunächst einmal müssen wir hier innerhalb des Applikationsmoduls mittels der Eigenschaft "bootstrap" dafür sorgen, dass wir Angular Bescheid sagen: In diesem Modul gibt es eine Komponente, und diese Komponente die wirst du auflösen können oder die wirst du auflösen müssen# nicht indem du innerhalb einer anderen Vorlage schaust sondern es ist deine Route-Komponente. Das registriere ich, indem ich hier sage "AppComponent" und damit weiß dann Angular automatisch Bescheid, dass wenn es die Anwendung an sich startet, dass es hier innerhalb der index.html ebenfalls nach dieser Komponente suchen kann, um sie zu initialisieren. Last but not least ist es ganz wichtig, dass ich ja jetzt hier innerhalb des Moduls so immer wieder verwendete Elemente auch schon mal vorab initialisiere. Immer wieder verwendete Elemente können beispielsweise Elemente aus dem Common-Modul sein, wie die strukturelle Direktive "NgIF", aber auch beispielsweise Elemente aus dem Browser-Modul die zwingend notwendig sind, - erinnert euch bitte - weil ja der Compiler selber auf Browser-Ereignisse und Co hört, um entsprechend dann immer wieder die Benutzerview wieder zu aktualisieren und neu zu rendern und darzustellen. Das heißt, ich muss also zwingend in dem Applikationsmodul, das für das Bootstrapping verantwortlich ist, das Browsermodul mit implementieren. damit auch der Compiler dann vernünftig arbeiten kann. Das mache ich jetzt also ebenfalls hier an dieser Stelle. Und ich kann ja innerhalb eines Moduls weitere Module einfach importieren über die Eigenschaft "imports" welches ebenfalls eine Liste ist. Und das Browsermodul selber muss ich natürlich jetzt auch hier laden, beziehungsweise importieren. Und das mache ich über "angular" "/platform-browser" und der Kollege, den ich hier haben will ist das Browsermodul. Muss dann also "BrowserModule" hier nur noch einbinden. Und das ist so genial. Wir haben jetzt also schon sehr viel erreicht. Wir haben das Applikationsmodul gemacht. Das Applikationsmodul wird über das Browsermodul dafür sorgen, dass alle wesentlichen Bestandteile von Angular auf jeden Fall initialisiert werden. Ich habe hier in dem Applikationsmodul gesagt, es werde mit einer "AppComponent" arbeiten, die auch gebootstrapped werden soll, und dadurch kann dann die index.html dann auch vernünftig arbeiten und das html-Element "@" wird hier entsprechend aufgelöst. Ich muss jetzt nur noch eine einzige Sache machen, nämlich das Anstoßen der Anwendung. Das Anstoßen der Anwendung mache ich in der "main.ts"-Datei. Erinnert euch bitte daran: Wir haben ja in der index.html gesagt, dass wir hier mit dem "app" an sich als Package beginnen. Und in das "system.config" hatten wir ja hier bei der "app" gesagt, diese beginnt mit der "main.js" und die "main.js" exportiere ich über die "main.ts". Bislang hatten wir hier ganz primitiv einfach nur ein "Hello World". Und im nächsten Schritt möchte ich nun dafür sorgen, dass ich über die Methode "platform" "BrowserDynamic" ein Bootstrapping auslöse. Ihr erkennt schon, "plattformBrowserDynamic" wird nicht erkannt, also muss ich es hier per "import" jetzt entsprechend importieren, indem ich vom Angular-Modul "angular", Slash, "platform-browser-dynamic", entsprechend "platformBrowserDynamic" hier hole. Perfekt. Scheine ich mich vertippt zu haben. So jetzt ist es perfekt. Und jetzt kommt der Clou. Ich sage nämlich "bootstrapModule" Mit "bootstrapModule" sage ich dann entsprechend jetzt der Angular-Anwendung in "main.ts": Mit diesem Modul beginne zu arbeiten. Was übergebe ich dann? Das "AppModule", das ich gerade angelegt habe. Das bedeutet, "main.ts" wird gestartet. Im "main.ts" wird über ein Modul ein Bootstrapping initialisiert, - das ist das App-Modul - Dass App-Modul sagt dann: Das Browsermodul brauche ich als Abhängigkeit und importiere mir das dann. Werde dann zusätzlich hier noch die AppComponent registrieren. Und die verwende ich auch als Bootstrapping und so wird dann die index.html aufgelöst. Fehlt nur noch der entgültige Test, also starte ich jetzt hier mal den Browser und werde das mal kurz auf den Monitor rüberziehen. - Moment, muss ein bisschen kleiner machen - So. Und dann seht ihr dann hier das "Hello World". Und damit ihr mir auch wirklich glaubt, dass dieses "Hello World" genau daraus kommt, werde ich jetzt hier mal ganz fix in die Komponente gehen und sagen, "SUPER!". Speicher das, wechsle, warte und da ist mein "SUPER!". Das heißt, die Initialisierung der Anwendung hat wunderbar funktioniert. Und wenn ich mir hier mal ganz kurz die Konsole anschaue, dann sehen wir auch, dass SystemJS einen tollen Job hingelegt hat. Es werden nämlich hier zunächst einmal die Vendor-Dateien und die Polyfill-Dateien geladen. Und SystemJS erkennt dann anschließend automatisch, welche Abhängigkeiten noch zusätzlich notwendig sind und lädt alle Dateien für mich nach, ohne dass ich mich selber darum kümmen muss. Hier zum Beispiel, wunderbar, zu erkennen, dass hier die "browser-dynamic" nachgeladen wird. Warum wird die "browser-dynamic" nachgeladen? Weil ich eben hier die "browser-dynamic" entsprechend anfordere. Und auf die Art und Weise arbeitet SystemJS dann und lädt die einzelnen Elemente. Ich gratuliere euch! Ihr habt eben euer erstes Projektsetup fertig angelegt.

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!