Erste Schritte mit Angular

12.10.2018
Angular

Angular
ist ein Frontend-Framework das ausschließlich auf dem Client-Browser ausgeführt wird und die zu Grunde liegende Programmiersprache heißt
TypeScript
, die sich in
JavaScript
 kompilieren lässt.

Angular wird immer dort eingesetzt wo flexible, modern aussehende Webanwendungen mit Businesslogik entwickelt werden. Für einfache Webseiten ohne viel Logik kann es zwar auch verwendet werden, das wäre aber wie mit Kanonen auf Spatzen geschossen. Die Komplexität von Frontend-Entwicklung steht der Backend-Entwicklung mittlerweile in nichts mehr nach. Weder in der Anzahl der Abhängigkeiten noch in der Architektur. Model-View-Controller ist längst zum Standard geworden und die Kommunikation mit dem Backend-Server läuft ausschließlich über die HTTP-Methoden wie GET, PUT, POST, DELETE, ...

Das einzige an das man sich gewöhnen muss sind die asynchronen Prozesse. Da man sich auf dem Client befindet muss auf die Antwort vom Server gewartet werden. Dies ist eine häufige Fehlerquelle, ansonsten unterscheidet sich die Frontend-Entwicklung gar nicht mehr so stark vom Backend.

Anders als bei Serverseitigen Frontend-Technologien wie z.B.

JSF
oder
Vaadin
, wird das statische HTML erst auf dem Client zusammengebaut, was zum einen ein riesiger Performancegewinn ist und zum anderen muss man als Entwickler sich nicht mehr mühselig darum kümmern, dass Komponenten neu gerendert werden wenn sich der Zustand auf dem Server ändert.

System einrichten

Zu allererst muss NodeJS installiert werden. Danach geht es auf der Konsole weiter.

Paketmanager

Ohne abhängige Fremdbibliotheken geht es einfach heute nicht mehr, deshalb wird ein gemeinsames Repository benötigt aus denen man bequem die Abhängigkeiten einbinden kann, äquivalent zu

Maven
aus der
Java
 Welt.

Npm

Npm wird bei der Installation von NodeJS mitinstalliert. Um die Version zu aktualisieren kann folgender Befehl ausgeführt werden. 

npm install -g npm

Yarn

Yarn ist ein alternativer Paketmanager der von Facebook entwickelt wurde und aufgrund persönlicher Vorlieben hier für die Dokumentation benutzt wird. Mittlerweile dürfte NPM alles bieten was Yarn auch kann im Bezug auf Security, Offlinefunktionalität, Lockdatei... Jedenfalls war Yarn eine Zeit lang NPM voraus und zu dieser Zeit habe ich mich an Yarn gewöhnt. Natürlich kann alles auch mit NPM installiert und gebaut werden. 

npm install -g yarn

Angular CLI

Über das Command-Line-Interface lässt sich hervorragend Code generieren, das sowohl zum Anlegen einer kompletten Projektstruktur dient, als auch für einzelne Klassen, Services, Komponenten, usw. bis hin zu einem Updatemechanismus für die Abhängigen Frontend-Bibliotheken. 

yarn global add @angular/cli

Wenn das CLI Yarn als Paketmanager nutzen soll, kann man das mit folgendem Befehl festlegen. 

ng config -g cli.packageManager yarn

Projekt erstellen

Um das CLI zu benutzen ist der Befehl ng auf der Konsole verfügbar. 

ng new PROJEKTNAME

Damit wird eine komplette Projektstruktur erzeugt mit dem Standard Angular-Beispielprojekt. Einige Prompts fragen euch ob z.B. ein Routermodul angelegt werden soll, oder welche Styles ihr benutzen möchtet. Wählt dort unbedingt

SCSS
statt
CSS
 um die Vorteile der nützlichen Methoden und Features nicht zu verpassen um eine ordentliche Struktur in die Styles zu bekommen. Hier habt ihr eine Übersicht was ng new noch alles kann.

Abhängigkeiten hinzufügen

mit yarn add NAME können Abhängigkeiten hinzugefügt werden. Mit dem zusätzlichen Parameter --dev werden die Abhängigkeiten nur für den Build-Prozess zur Verfügung gestellt und für den laufenden Betrieb nicht benötigt.

Folgende Abhängigkeiten kann ich nur wärmstens empfehlen: Bootstrap, Angular Material, Moment.js, Font-Awesome und D3. 

yarn add @fortawesome/fontawesome-free
yarn add bootstrap jquery popper.js
yarn add d3
yarn add moment
yarn add @types/d3 --dev
ng add @angular/material

Um Bootstrap und Fontawesome nutzen zu können, müssen die Abhängigkeiten dann noch zusätzlich importiert werden. Das kann folgendermaßen in der angular.json Datei eingetragen werden: 

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Mit Angular Universal wird einem das serverseitige Vorrendern des statischen HTML‘s kinderleicht gemacht. Mit ng add @nguniversal/express-engine werden alle notwendigen Konfigurationen inkl. Bau- und Start-Skripte von der CLI generiert und wenn man das Routing-Modul benutzt kann man sogar das “prerender“ nutzen, das von allen Seiten eine fertige statische Version baut. Für SEO-Abhängige Webseiten ein unverzichtbares muss, aber auch die Performance wird dadurch nochmal stark verbessert. Mit yarn build:ssr && yarn serve:ssr wird der Node-Server gestartet, der das statische HTML vorrendert und mit yarn prerender wird der build-Prozess gestartet, der statische HTML-Dateien mit der Verzeichnisstruktur der URL's erstellt.

Um alle Abhängigkeiten zu installieren kann man mit folgendem Befehl, im Hauptverzeichnis indem auch die package.json Datei liegt, den Prozess starten. 

yarn install

Projekt starten

Um seine Angular-app zu starten muss man dann nur noch folgenden Befehl eingeben und los gehts. 

ng serve

Fazit

So wie diese Seite selbst in Angular geschrieben ist, würde ich jeder Zeit Angular für Webanwendungen empfehlen. Die Wiederverwendbarkeit und Konfigurierbarkeit der Komponenten sind einfach beispiellos. Ich mache mir hier jedoch nicht die Mühe und schreibe ein Tutorial wie man mit Komponenten, Services, Modulen und dem Routing... umgeht, denn dafür gibt es unendlich viel gute Dokumentationen im Netz. Den besten ersten Einstiegspunkt bietet da die offizielle Seite von Angular selbst. Alle weiteren Artikel mit und über Angular werde ich ganz konkreten Problemstellungen und eleganten Lösungen dafür widmen.