Angular – ein Tutorial

Angular ist eine mächtige Plattform. So gelingt der Einstieg in das Reactive Framework.Gorodenkoff | shutterstock.com



Angular zählt zu den größeren Reactive Frameworks und ist darauf ausgerichtet, als singuläres architektonisches System sämtliche Anforderungen der Webentwicklung mit einem einheitlichen Ansatz abzudecken. Kritisiert wurde Angular lange Zeit vor allem für seine Schwerfälligkeit (im Vergleich zu React).



Diese Probleme wurden allerdings mit Version 19 größtenteils behoben. Modernes Angular basiert auf der Signals-API und minimaler Formalität, bietet aber dennoch eine Komplettlösung, die auch Dependency Injection und integriertes Routing umfasst.



Im Unternehmensumfeld ist Angular vor allem wegen seiner Stabilität und seiner kuratierten Natur beliebt. Das Framework wird allerdings dank seiner stärker auf die Community ausgerichteten Entwicklungsphilosophie auch für die breitere Community zunehmend attraktiver.



In diesem Tutorial erfahren Sie, wie Sie:




Angular einrichten,



Reactive-Komponenten mit Signals erstellen,



die Business-Logik mithilfe von Services organisieren, und



alle genannten Elemente durch interaktives Routing miteinander verknüpfen.




Der Case für Angular



Ein Javascript-Framework auszuwählen, fühlt sich manchmal bereits nach philosophischer Debatte an, sollte aber eine praktische Entscheidung sein. Angular zeichnet dabei vor allem aus, dass es nicht nur einen View Layer, sondern ein komplettes Toolkit bietet, um Web-Apps zu entwickeln.



Als reaktives Framework basiert auch Angular auf einer entsprechenden Engine, mit der sich State (Variablen) und View verbinden lassen. Was andere Frameworks hingegen nicht bieten können, ist die Fähigkeit, Data Binding zu nutzen, um Daten aus der Benutzeroberfläche automatisch mit JavaScript-Objekten zu synchronisieren. Um Anwendungen zu strukturieren und Testing-Prozesse zu vereinfachen, kommen bei Angular zudem auch Dependency Injection und Inversion of Control zum Einsatz. Damit nicht genug: Angular enthält auch fortgeschrittenere Funktionen wie Server-Side Rendering (SSR) und Static-Site Generation (SSG). Auf etwaige Meta-Frameworks können Sie für diese Zwecke also verzichten.



Natürlich ist auch Angular nicht für jeden Anlass die erste Wahl. Aber es ist eine hervorragende Option für größere Projekte, die die genannten Funktionen erfordern.



Angular installieren



Mit diesen Informationen im Hinterkopf richten wir nun Angular in Ihrer Entwicklungsumgebung ein, bevor wir uns damit befassen, eine Web-Applikation zu entwickeln. Zunächst sollten Sie sicherstellen, dass sowohl Node als auch NPM installiert sind. Dazu füttern Sie Ihre Befehlszeile mit:



$ node -v
$ npm -v



Im nächsten Schritt nutzen wir die CLI von Angular, um eine neue App zu starten:



$ ng new iw-ng



Wir haben nun eine grundlegende Projektstruktur in einem neuen Verzeichnis angelegt. Diese können Sie in eine IDE (beispielsweise Visual Studio Code) importieren oder direkt bearbeiten.



Wenn Sie einen Blick auf das Projekt-Layout werfen, werden Sie feststellen, dass dieses recht schlank ist – im Gegensatz zu früheren Angular-Projekten.



Die wichtigsten Teile:




src/main.ts ist der Haupteinstiegspunkt. In älteren Angular-Versionen musste diese Datei ein Modul initialisieren, das dann wiederum eine Komponente initialisierte. Jetzt wird umständliche Syntax vermieden, indem bootstrapApplication direkt mit Ihrer Root-Komponente gecallt wird.



src/index.html ist die HTML-Seite, auf der die Anwendung gehostet wird. Es handelt sich dabei um die standardmäßige index.html-Datei, die sämtliche Root-Anfragen auf einer Webseite bedient und das -Tag enthält, in dem die Angular-Komponente gerendert wird. Sie ist quasi der „Körper“, den der „Geist“ des Codes zum Leben erweckt.



src/app/app.ts ist die Root-Komponente der Anwendung. Diese Datei definiert die View-Logik und die Metadaten der Komponente. In der neuen „Standalone“-Welt verwaltet sie ihre eigenen Importe. Sie können also direkt dem Dateianfang entnehmen, welche Abhängigkeiten diese verwendet.



src/app/app.config.ts ist neu in modernem Angular und ersetzt das alte AppModule providers-Array. Hier konfigurieren Sie globale Dienste wie den Router oder den HTTP-Client.



angular.json ist die Konfigurationsdatei für die CLI selbst. Sie teilt den Build-Tools mit, wie der Code verarbeitet werden soll. Allerdings müssen Sie diese Datei kaum noch manuell bearbeiten.




Diese Komponenten rendert die Engine in folgendem Ablauf:




Der Browser empfängt index.html. Das -Tag ist vorhanden, aber leer.



Der Browser erkennt die