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

Angular 2 Grundkurs

Einstiegspunkt definieren und testen

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Video lernen Sie, wie Sie die Hauptdatei für den Einstiegspunkt in die Anwendung erzeugen und testen.
05:47

Transkript

Der nächste Schritt, den wir jetzt noch erledigen müssen, ist es unsere erste TypeScript-Datei zu erstellen, dafür zu sorgen, dass der TypeScript-Compiler diese Datei kompiliert, und SystemJS dafür sorgt, dass die Datei geladen und gestartet wird. Zur Erinnerung: SystemJS erwartet diese Datei im "app"-Unterordner als "main.ts". Das heißt, wir erzeugen jetzt eine neue Datei, eine TypeScript-Datei, im Unterordner "app" und die Datei soll "main" heißen. Die Datei soll im ersten Schritt überhaupt gar keine Magie machen. Es reicht uns vollkommen aus, wenn wir ein Console.Log bekommen. "Hello World". Großartig. Im nächsten Schritt muss wie gesagt dafür gesorgt werden, dass jetzt die "main.ts" auch kompiliert wird. Dafür wechseln wir in die Package.json. In der Package.json seht ihr, dass wir hier schon Skripte für den TypeScript-Compiler, Typings und Co gemacht haben. Wir werden jetzt noch ein zusätzliches Skript hinzufügen, nämlich "tsc" mit der Option "w", um den TypeScript-Compiler ebenfalls mit der Option "w" zu starten. Die Option "w" sorgt dafür, dass ein Watch-Modus im Compiler aktiviert wird, so dass der Compiler automatisch überprüft, welche Dateien geändert werden und in der Lage sind, diese Dateien immer neu zu kompilieren. Danach, erinnert euch bitte, dass wir einen Lite-Server hier installiert hatten. Dieser Lite-Server war dafür da, dass ich quasi, ohne dass ich ein komplexes Environment brauche, das Projekt direkt im Browser testen kann. Diesen Lite-Server werde ich ebenfalls hier als Prozess anlegen. Und zwar als "lite"-Prozess und gestartet werden soll hier der "lite-server". Last but not least werde ich jetzt einen Startprozess definieren. Dieser Startprozess ist sehr häufig i Package.json drin. Die sagen quasi aus, welches Skript verwendet werden soll, wenn ein Projekt gestartet werden soll. Und in meinem Fall sieht mein Startprozess wie folgt aus. Ich möchte zunächst meinen TypeScript-Code einmal kompilieren und in Javascript-Code umwandeln. Also rufe ich den TypeScript-Compiler auf. Anschließend werde ich Concurrently aufrufen. Denn ich will ja nicht nur, dass der Code ein einziges Mal kompiliert wird, sondern ich will dann anschließend auch, dass der Browser gestartet wird. Und der Browser quasi dann die index.html öffnet. und dafür sorgt, dass dann automatisch auch noch der TypeScript-Compiler mit der Option "B" gestartet wird. damit der Compiler dazu angeregt wird, die Dateien zu observieren und immer zu aktualisieren bei Bedarf. Also verwende ich "concurrently" mit folgenden Optionen Zunächst einmal "npm run" und wir starten den TypeScript-Compiler mit der Option "w". Anschließend "npm" "run lite". Das heißt Grundkompilierung, anschließend Watcher-Modus aktivieren, Server aktivieren. Und wenn wir jetzt keinen Fehler gemacht haben, sind wir in der Lage im Terminal einfach "npm run start" aufzurufen Dann sehen wir, dass ich den TypeScript-Compiler aufrufe. Nachdem der TypeScript-Compiler aufgerufen wird - ich gehe dann mal ganz kurz hoch - wird dann der TypeScript-Compiler mit Watch nochmal aufgerufen und der Lite-Server wird ebenfalls aufgerufen. Zusäzlich ein kurzer Hinweis darüber, dass ein Browser-Sync passiert in dem Moment, wo html-, Javascript- oder css-Dateien aktualisiert werden und dass ich das Ganze unter "localhost:3000" dann hier finde. Es hat sich bei auch schon der Browser geöffnet - in meinem zweiten Monitor - und da sehen wir dann halt auch "localhost:3000". Verständlicherweise sehen wir jetzt hier noch nicht wahnsinnig viel, denn wir haben ja in unserer "main.ts" auch lediglich ein "console.log" gemacht. Ich hätte auch hier mal einfach ein header reinmachen können, "hello", und dann seht ihr: Browsersync, "hello" ist da. Ich öffne mal die Konsole und hier ist das "Hello World" Das "Hello World" wird hier über die "main.js" dann referenziert, so dass wir dann wissen: Da ist das Ganze dann entstanden und dann auch verwiesen worden. Wenn wir in die Netzwerkeinstellung einmal nur schauen, dann können wir etwas ganz besonderes erkennen, nämlich dass hier, wie bereits angekündigt die Polyfills "zone", "reflect" und Co geladen wurden, dass wir hart verlinkt haben. Dann wurde hier "main.js" geladen. "main.js" wurde ja geladen, weil wir in der index.html ja gesagt haben, wir wollen "app" initialisieren und in der "system.config" war dann halt auch die "app" drin. Sehr spannend aber auch hier zu erkennen, dass ganz eindeutig hier nicht noch mehr geladen wurde. Obgleich wir ja hier innerhalb der Konfiguration sehr viele Angular-Module noch definiert haben sehen wir, dass diese eben nicht geladen wurden. Das liegt einfach daran, dass in der "main.ts" noch kein Import und auch keine Nutzung von externen Modulen stattfindet und dementsprechend halt auch keine Referenzierung. In diesem Video haben wir gelernt, wie wir in der Lage sind, unser Setup einmal zu starten und mit der "main.ts" einen Startpunkt zu definieren.

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!