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

Angular 2 Grundkurs

index.html anlegen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt Ihnen, wie Sie Polyfills, Vendors und System.js einbinden können.
05:04

Transkript

Ein wesentlicher Bestandteil von unserem Projekt fehlt ja noch. wir brauchen ja noch die index.html, die dafür sorgt, dass dann unser Projekt quasi einen Startpunkt hat. Die index.html erzeugen wir jetzt hier fix: Und innerhalb der index.html nenne ich das ganze Projekt mal "setup" und innerhalb des Bodies bin ich jetzt anschließend auch. Was muss jetzt in diese index.html rein? Zunächst einmal die Polyfills. Und die Polyfills laden wir als Skript. Und zwar erstmal ins node_modules, - "node_modules" - innerhalb des node_modules dann in "core-js", da waren unsere Polyfills drin. Und dort gibt es den Unterordner "client", und die fertigen Polyfills sind dann in "shim.min.js". Ta-Ta. Fertig. CoreJS, zur Erinnerung, war diese witzige kleine Bibliothek, die dafür sorgt, dass die Browser, die noch nicht so fit sind in ECMAScript 2015, formals auch bekannt als Harmony oder als ECMAScript 6, dann etwas auf die Sprünge hilft, damit es dann ebenfalls ECMAScript 6, also ECMAScript 2015-konform arbeiten kann. Dann brauchen wir noch diverse weitere Bibliotheken, mit denen Angular zwingend arbeiten muss. Das heißt, wir brauchen noch Drittanbieter, die wir initialisieren wollen. Und ich klaue mir das hier schnell mal. Einer der Drittanbieter ist ZoneJS. Damit bin ich in der Lage, den Ausführungskontext zu bestimmen und das "zone.js" finde ich im "dist"-Ordner. Danach möchte ich gerne "reflect-metadata" laden. Das "reflect-metadata", damit bin ich in der Lage, Metadaten vernünftig und konform zuzuweisen. Und last but not least laden wir SystemJS. SystemJS ist der module loader, der in der Lage ist, die ECMAScript-Module Javascript-konform, ECMAScrip-konform dann entsprechend nachzuladen, ohne dass ich mich immer darum kümmern muss. Und das ist dann das "system.source.js" Großartig. Was wir jetzt an dieser Stelle erledigt haben ist also, dass wir alle notwendigen Bibliotheken um überhaupt mit Angular arbeiten zu können, jetzt initialisiert haben und geladen haben und das Ganze machen wir dann hier direkt im "head". Im nächsten Schritt wollen wir jetzt dafür sorgen dass wir "systems" ansprechen. und "systems" sprechen wir so an, dass wir dafür sorgen, dass das "systems" die "config" legt und anschließend ein Modul initialisiert. Und wie das geht, möchte ich euch jetzt sehr gerne einmal zeigen. Ich erzeuge zunächst einen neuen Skriptblock. Und in diesen Skriptblock schnappe ich mir jetzt "system" und verwende die Anweisung "import". Und die "import"-Anweisung, die ich hier verwende, die nutze ich so, dass ich sage: Tu mir bitte den Gefallen und lade "system.config.js". Damit ist dann die Konfiguration geladen oder wird geladen. Was ich als Rückgabewert von "import" bekomme ist ein Promise, also registriere ich mich hier mit "then". In dem Moment, wo dann "system.config" erfolgreich geladen wurde, möchte ich, dass eine Funktion ausgeführt wird. Und die Funktion, die ausgeführt wird, soll dafür sorgen, dass meine Applikation selber initialisiert wird Zur Erinnerung: Wir werden später hier einen "app"-Ordner haben und in diesem "app"-Ordner werden wir dann eine "main.ts" hinterlegen, die dann quasi als Startpunkt unserer Applikation dienen soll. Und innerhalb der "system.config" haben wir auch hier wunderbar das Paket dafür referenziert, das ist das "app"-Paket. Wenn also die Konfiguration erfolgreich geladen wurde ist der nächste Schritt der, dass ich "system" wieder anspreche, diesmal das "import" verwende, und sage, dass ich gerne "app" initialisieren möchte. Und wenn dann "app" initialisiert werden konnte, habe ich dann mein Ziel erfüllt. Sollte übrigens "systems" nicht geladen werden können, habe ich ein großes Problem, weil ich die ganzen Module dann nicht mehr vernünftig zuweisen kann und arbeiten kann. Also mache ich hier noch ein "catch"-Handler rein, der dann dafür sorgt, dass ich dann in der Konsole selber eine Fehlermeldung bekomme. Und zwar die Fehlermeldung, die ich hier als Parameter übergebe. Und damit haben wir dann SystemJS eingebunden. In diesem Video habt ihr gelernt, wie wir in der Lage sind, die unterschiedlichen Bibliotheken und zu guter Letzt SystemJS in euer Projektsetup einzubinden.

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!