Der Einstieg in die Entwicklung mit Angular

Für die Entwicklung von Web-Anwendungen gibt es heutzutage zahlreiche Möglichkeiten. Eine weit bekannte und gut dokumentierte Möglichkeit bietet Angular. Von Google entwickelt und bereits bei vielen Unternehmen produktiv im Einsatz, wird es für die Entwicklung von Client-Anwendungen in HTML und TypeScript verwendet. Es ist möglich, eine einmal geschriebene Anwendung leicht auf andere Plattformen zu übertragen. Hier ist es egal, ob dies Web, Mobile oder Native Apps sind. Außerdem kann man mit Angular die zurzeit wohl beste Performance im Web erreichen.

Happy Angular

Das alles klingt sehr attraktiv und deshalb möchte ich genauer wissen, wie es ist, mit Angular eine Webseite zu entwickeln. Dafür werde ich heute mein erstes Projekt erstellen und die Entwicklungsumgebung einrichten. Um einen Einstieg in die Entwicklung mit Angular zu bekommen, habe ich den ersten Teil der deutschsprachigen Podcast-Reihe “Happy Angular” von meinem Kollegen Sebastian Dorn gehört. Auf seiner Website https://happy-angular.de/ gibt es wöchentlich neue Folgen rund um das Thema Angular.

Die Rolle von Node.js und NPM

Ein erstes Angular Projekt ist mit wenig Aufwand erstellt. Es geht schnell und ist noch dazu sehr einfach. Falls du es direkt ausprobieren möchtest, solltest du zuerst sicherstellen, dass node.js installiert ist. Falls dies nicht so ist, kannst du es hier herunterladen und anschließend installieren. Auch wenn wir keinen Server-seitigen node.js Code schreiben werden, gibt es zwei gute Gründe für node.js. Zum einen können wir einen lokalen Development Server hosten und zum anderen bekommen wir den Paketmanager npm mitgeliefert. Ein großer Vorteil von npm ist die Verwaltung von Abhängigkeiten in unserem Projekt. Diese werden in der Datei package.json definiert und im node_modules Ordner gespeichert. Möchtet ihr euer Projekt später teilen, beispielsweise auf der Plattform github, dann müsst ihr diesen Ordner dort nicht hochladen. Über die package.json bleibt transparent, welche Abhängigkeiten in welcher Version verwendet werden und mit npm können diese jederzeit heruntergeladen werden.

Die Angular CLI

Nachdem node.js installiert ist, arbeiten wir mit Angular CLI, dem Angular Command Line Interface. Mit diesem Werkzeug können wir eine Anwendung erstellen, die out-of-the-box funktioniert und dabei den Best Practices folgt. Die Angular CLI hilft darüber hinaus einzelne Bausteine einer Anwendung zu generieren, die direkt mit einfachen zugehörigen Tests erstellt werden. Nicht nur bei der Code-Generierung unterstützt Angular CLI, sondern es ist gleichzeitig auch ein Build-Tool. Sowohl für die Entwicklung als auch später für die Produktion baut es meine Anwendung und stützt sich dabei auf webpack.
Mit npm können wir Angular CLI einfach installieren:

npm install -g @angular/cli

Das erste Projekt erstellen

Nach der Installation können wir in einem Verzeichnis unserer Wahl ein neues Projekt erstellen. Dazu verwenden wir

ng new helloAngular

Werfen wir anschließend einen Blick in das Verzeichnis, so stellen wir fest, dass bereits eine Menge an Dateien erstellt wurden. Wir können unter anderem den zuvor schon erwähnten node_modules Ordner sehen, der unsere Abhängigkeiten beinhaltet. Vorerst bin ich aber gespannt, ob ich wirklich schon ein lauffähiges Projekt habe. Deshalb folgt ein Wechsel in das Verzeichnis /helloAngular/ und ein kurzer Befehl, um meine Anwendung lokal zu testen:

cd helloAngular

ng serve

In der Konsole erscheint der Hinweise, dass meine Anwendung unter http://localhost:4200/ zu erreichen ist. Und tatsächlich, ich werde vom Angular-Logo mit etwas Text und ein paar Links begrüßt.

Live Reloading testen

Im Podcast wird berichtet, dass Angular CLI das Live Reloading unterstützt. Das bedeutet, dass Änderungen am Code vom System eigenständig übernommen, also nachgeladen werden. Dies teste ich, indem ich mir aus dem src-Ordner die HTML-Datei heraussuche und sie in einem Editor öffne. Dazu verwende ich gerne Visual Studio Code, da dieser Editor kostenlos ist und eine gute Einbindung für Type Script hat. In der HTML-Datei ändere ich eine Überschrift und kann im Browser beobachten, wie die Seite automatisch neu geladen wird. Während der Entwicklung kann ich also direkt die Auswirkungen meiner Änderungen sehen. Man sollte sich allerdings bewusst sein, dass der Status der Anwendung beim Live Reloading nicht erhalten bleibt.

Der erste Schritt zum Erlernen einer neuen Technologie ist getan. Dank Angular CLI und der Anleitung von Sebastian Dorns Podcast konnte ich innerhalb weniger Minuten mein erstes Projekt aufsetzen und die ersten kleinen Erfolge sehen. Ich bin gespannt auf die nächste Folge und freue mich drauf, die Eigenschaften von Angular kennenzulernen!