Angular wird von zahlreichen großen Unternehmen eingesetzt, von Google, Microsoft und bis hin zu PayPal, Nike, Delta Airlines oder der Deutschen Bank. Wir stellen Ihnen das beliebte Frontend-Framework vor.

Was ist Angular?

Die Web-Development-Plattform Angular (manchmal auch als Angular 2+ bezeichnet) basiert auf Microsofts JavaScript-Derivat TypeScript und wird insbesondere für die Entwicklung von Single-Page-Apps (SPAs) und mobilen Anwendungen eingesetzt. Die Open-Source-Software wird von einer großen Community unter Führung von Google entwickelt.

Als Plattform für die Entwicklung komplexer Webanwendungen ist Angular mehr als ein Framework: Neben dem Core-Framework und zahlreichen Bibliotheken für die verschiedensten Funktionen umfasst Angular auch eine Reihe von Entwicklerwerkzeugen für die Entwicklung, Erstellung, Prüfung und Aktualisierung des Codes, insbesondere das Kommandozeilenwerkzeug Angular CLI. Vor allem aber entstand rund um Angular ein riesiges Software-Ökosystem von mehr als 1,7 Millionen Entwicklern und Content Creators, die zahlreiche fertige Lösungen für diverse Aufgabenstellungen beisteuern (mehr Infos).

Die Geschichte von Angular

Nachdem 1990 Tim Berners-Lee die erste HTML-Webseite veröffentlichte, nahm das World Wide Web schnell Fahrt auf: In den 1990er Jahren wurden Browser leistungsfähiger, HTML und CSS wurden standardisiert, es entstanden PHP, JavaScript und andere Web-Technologien. Die 2000er Jahre waren bereits die Dekade von Bibliotheken und Frameworks. Denn Webseiten wurden immer komplexer, funktionsreicher und dynamischer – Funktionssammlungen und Frameworks halfen, die gestiegenen Anforderungen schnell und mit weniger Aufwand umzusetzen. Backend-Frameworks entstanden etwa für Java (WebObjects, veröffentlicht 1997), ASP (ASP.NET, 2002), PHP (Jamroom, 2003) oder Ruby (Ruby on Rails, 2004. Fürs Frontend wurden CSS-Frameworks wie YAML (2005), vor allem aber Bibliotheken und Frameworks für JavaScript entwickelt, beispielsweise Dojo (2004), Prototype (2005) oder jQuery (2006).

Am Ende der Dekade, 2009, erschien dann die erste Version von Angular auf der Bildfläche – damals von seinem Erfinder Miško Hevery „<angular/>“ genannt, aber heute als „AngularJS“ oder manchmal auch „Angular 1“ bezeichnet. Warum dieses Namenschaos, fragen Sie?

Die innovativen Konzepte des neuen, noch JavaScript-basierten Werkzeugs überzeugten zunächst Heverys Arbeitgeber Google und dann, nach der Veröffentlichung von „AngularJS“ als Open-Source-Bibliothek, Tausende Frontend-Entwickler in aller Welt. Dennoch entschied sich Google, Angular von Grund auf zu überarbeiten. 2016 erschien das TypeScript-basierte „Angular 2“ – ohne „JS“ im Namen, um Verwechslungen mit dem parallel weiterentwickelten AngularJS (aktuell ist Version 1.8.3) zu vermeiden. Seit Anfang 2022 wird AngularJS von den Entwicklern allerdings nicht mehr unterstützt.

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten

Die Vorteile von Angular

Auch wenn seit 2019 die Verbreitung von Angular leicht abgenommen hat, nutzen noch mehr als die Hälfte der JavaScript-Entwickler (auch) dieses Framework für ihre Projekte. Denn Angular bietet eine Reihe attraktiver Features, die viele andere Frameworks nicht mitbringen.

Umfassende Plattform

Angular bietet Ihnen eine All-in-One-Plattform für die Entwicklung der verschiedensten Webanwendungen von Projekten einzelner Entwickler bis hin zu komplexen Enterprise-Anwendungen mit großen Teams. Es ist Bestandteil des MEAN-Technologie-Stacks (MongoDB, Express.js, Angular, Node.js), das Entwicklern alle notwendigen Tools für die Entwicklung dynamischer Web-Apps bietet: Datenbank, JavaScript-Runtime und Web-Framework fürs Backend sowie Frontend-Framework.

Modulare Architektur

Angulars Architektur ist modular. Die Basis bildet das Core-Framework, das die essenziellen Konzepte moderner Webanwendungen implementiert. Weitere wesentliche Bestandteile sind zum einen hierarchisch geschachtelte Komponenten, die logischen Bausteine jeder Anwendung als wiederverwendbare Module, und zum anderen Services für Daten und Logik. Das Angular-Team pflegt ein GitHub-Repository mit zahlreichen offiziellen Komponenten, zum Beispiel für UI-Elemente, Google Maps API oder die YouTube Player API.

Hinzu kommen optionale Module für diverse Funktionen, beispielsweise Routing (für Single-Page-Anwendungen), Formulare, Animationen, Mehrsprachigkeit, Offline-Fähigkeiten für Progressive Web Apps (PWAs) oder die API-Kommunikation (HTTP, REST, GraphQL).

Nützliche Konzepte

Wie viele Frontend-Frameworks unterstützt Angular die MVC-Architektur: Model (Daten im Backend), View (aktuelle Ansicht der Model-Daten im Frontend) und Controller (setzt Nutzeraktionen im Frontend in Änderungen der Daten im Model um). Anders als im JavaScript-Standard unterstützt Angular dabei ein bidirektionales Datenbinding: Sowohl Änderungen im Model (Datenänderung auf dem Server) als auch im View (Eingaben des Benutzers) können automatisch, ohne weiteres Zutun des Entwicklers synchronisiert werden (es wird auch die MVVM-Architektur „Model-View-Viewmodel“ unterstützt). Abhängigkeiten zwischen Komponenten, Services und anderen Elementen werden vom Framework per Dependency Injection geregelt.

Weitere Vorteile sind u. a. Code-Konsistenz, mehr Produktivität durch wiederverwendbaren Code, plattformübergreifende Einsetzbarkeit, die Unterstützung von PWAs, schnelle Fehlertestverfahren oder die erweiterten Möglichkeiten von TypeScript, insbesondere Typenunterstützung. Die von einigen Entwicklern kritisierte fehlende Flexibilität bei der Nutzung fremder Bibliotheken erhöht im Gegenzug den Standardisierungsgrad, minimiert Kompatibilitätsprobleme und erleichtert die Aktualisierung von Anwendungen.

Unterstützung durch Google und die Community

Der wahrscheinlich größte Vorteil, den Angular bietet, heißt Google. Denn dank des Tech-Giganten stehen für Entwicklung und Support genügend Ressourcen zur Verfügung, sodass auf eine langfristig stabile Unterstützung des Frameworks gehofft werden darf. Aber auch die große Entwickler-Community sorgt für neue Funktionen, schnelle Fehlerbeseitigung und Unterstützung im Problemfall.

Bisher hat das Angular-Team zuverlässig in etwa halbjährlichem Rhythmus ein neues Major Release mit neuer Versionsnummer herausgebracht; im Juni 2022 erschien Angular 14. Jede Major-Version erhält 18 Monate lang LTS (Long-Term Support).

Angular vs. React und Vue.js

Die meistgenutzten JavaScript-Frontend-Frameworks sind laut State of JS Report 2021 React, Angular und Vue.js (in dieser Reihenfolge). Wodurch unterscheiden sie sich und welche eignen sich am besten für Ihr Projekt?

Die Antwort ist wie so oft ein klares „Kommt drauf an“ – alle drei Frameworks haben Stärken, die sie für bestimmte Projekte besonders empfehlen. Aus unserer Sicht punktet Angular vor allem mit seinem Funktionsreichtum, seiner klaren Struktur und seinem Fokus auf komplexe Anwendungen auf Enterprise-Level. Das Framework bietet Entwickler-Teams sofort ein starkes, aber skalierbares Grundgerüst mit allen oben beschriebenen Vorteilen.

Wer allerdings für die Struktur seiner Anwendung mehr Freiheit wünscht, wäre bei React vielleicht besser aufgehoben. Die Web-UI-Bibliothek bietet Entwicklern sehr viel Spielraum, ja verlangt von ihnen sogar die Konzeption einer eigenen Architektur. Gleichzeitig gibt es für bestimmte Anforderungen deutlich mehr Lösungsmöglichkeiten (Module) als in Angular, was den Aufwand erst einmal erhöht, aber auch schlankere, auf die Anforderungen zugeschnittene Ergebnisse ermöglicht.

Auch Vue.js will Entwicklern nicht zu viele Konzepte aufzwingen, aber klare Strukturen bieten. Evan You, der 2014 die erste Version von Vue.j veröffentlichte, hat sich bei der Entwicklung unter anderem an AngularJS orientiert und einige Konzepte, etwa bidirektionales Binding, übernommen, andere aber verworfen. So entstand ein schlankeres, leichter zu erlernendes, aber ebenfalls sehr leistungsfähiges Framework. Mehr Infos finden Sie in diesem Blogartikel: Vue vs. Angular.

Weiterführende Infos und Tipps

Performance optimieren

Angulars Stärke ist die Entwicklung von Single-Page-Apps, die zu Anfang komplett geladen und direkt im Browser gerendert werden. So ist danach kein Nachladen vom Server mehr nötig (die Serverlast sinkt) und die SPA reagiert ähnlich flüssig wie eine native App (besseres Benutzererlebnis). In der Tat war AngularJS wahrscheinlich das erste JavaScript-Framework, das solche Single-Page-Applikationen ermöglichte.

Voraussetzung dafür ist natürlich performantes Rendern auf Clientseite. Mittlerweile gibt es in Angular mit Ivy schon die dritte Compiler- und Rendering-Engine (die vierte, wenn man AngularJS mitzählt). Die übersetzt den in Angular erstellten Code in möglichst schlanken und effizienten JavaScript-Code. Sie ist damit besonders performancekritisch und bestimmt auch die Größe des auszuliefernden JavaScript-Bundles (wichtig bei schlechter Internetverbindung). Einen Überblick über Ivy gibt Ihnen dieser Beitrag: Angular-Apps mit der Ivy Rendering-Engine. Was Sie noch tun können, um die Performance Ihrer Angular-Anwendung zu erhöhen, lesen Sie hier: Angular-Performance: So zünden Sie den Turbo.

Material Design mit Angular Material

Viele mobile Apps und auch Websites nutzen Googles Designsprache Material Design. Ein Ziel von Material Design ist es, plattformübergreifend ein einheitliches Designsystem für das Web zur Verfügung zu stellen. Deshalb hat Google auch APIs veröffentlicht, mit denen Third-Party-Entwickler die Designsprache in ihre Anwendungen integrieren können. So liegt es nahe, dass auch Googles Angular-Framework entsprechende Funktionen mitbringt: Falls Sie Material Design in Ihrer App verwenden möchten, können Sie dafür die UI-Bibliothek Angular Material nutzen. Diese stellt zahlreiche Komponenten und zugehörige APIs für Ihre Bedienoberfläche zur Verfügung, von Buttons über Dialoge bis hin zu Autocomplete-Funktionen.

Angular in Google Maps einbinden

Viele Web-Apps nutzen Kartendarstellungen. Wer dafür Karten aus Google Maps verwenden will, kann das mit Hilfe der Google Maps JavaScript API tun. Wie schon erwähnt, stellt das Angular-Team verschiedene fertige Komponenten bereit, um Entwicklern die Arbeit zu erleichtern, darunter auch ein Modul mit Komponenten für die Google-Maps-Integration. Diese Komponenten ermöglichen es unter anderem, Kartenausschnitte darzustellen, Markierungen zu setzen und zu diesen ein Infofenster anzuzeigen. Mehr Infos finden Sie in der Readme des Google-Maps-Moduls.

Angular mit anderen Tools kombinieren

Auch wenn Angular als All-in-One-Paket beschrieben wird, gibt es doch viele Anwendungsfälle, in denen andere Werkzeuge bessere Lösungen anbieten. Entwickler können daher das Framework gewinnbringend mit anderen Tools kombinieren. Einige Vorschläge dafür finden Sie hier:

Noch mehr Tipps

Sie möchten noch mehr über Angular erfahren? Dann legen wir Ihnen diese spannenden Beiträge ans Herz:

Titelmotiv: Bild von Artur Czuba auf Pixabay

Host Europe
Letzte Artikel von Host Europe (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten