Die Architektur und Konzepte von Angular sind darauf ausgerichtet, robuste und skalierbare Webentwicklung zu bieten.
Komponenten: Sie bilden die fundamentalen Bausteine in modernen Angular-Anwendungen. Jede Komponente definiert eine Klasse mit Daten und Methoden und ist mit einem HTML-Template verbunden, das die Benutzeroberfläche definiert. Standalone-Komponenten ermöglichen einen direkteren, modulfreien Ansatz zur Komponentendefinition. Dank des zunehmenden Einsatzes des SCAM-Patterns (Single Component Angular Module) in früheren Versionen hat sich dieser Ansatz durchgesetzt. Standalone-Komponenten deklarieren ihre Abhängigkeiten direkt, was zu einer flacheren, intuitiveren Architektur führt.
Module: NgModules waren lange Zeit ein zentrales Konzept in Angular. Das Root-Modul existiert nach wie vor für die Bootstrap-Funktion, aber mit der Einführung von Standalone-Komponenten arbeiten Entwickler zunehmend direkter mit Komponenten. Module werden hauptsächlich für spezifische Anwendungsfälle oder bei der Migration älterer Anwendungen verwendet.
Templates: Angular-Templates unterstützen leistungsstarke Rendering-Strategien. Die Template-Syntax ermöglicht reaktive Muster mit guter Typsicherheit und IDE-Integration.
Signals und reaktive Programmierung: Angular hat das Signals-Konzept für reaktive Zustandsverwaltung eingeführt. Signals bieten eine präzise, granulare Reaktivität, die den traditionellen RxJS-basierten Ansatz ergänzt und in vielen Fällen vereinfacht. Sie ermöglichen eine effizientere Change Detection und bessere Performance.
Services und Dependency Injection: Für anwendungsweite Logik und Datenzugriff bleiben Services zentral. Das Dependency Injection System unterstützt den Standalone-Ansatz mit hierarchischer Injection und verbesserter Tree-Shaking-Fähigkeit.
Routing: Der Angular Router unterstützt Standalone-Komponenten und bietet Lazy-Loading-Funktionen. Die Navigation zwischen Ansichten erfolgt mit Unterstützung für verschachtelte Routen und verschiedene Routingstrategien.
Direktiven: Diese funktionalen Erweiterungen für DOM-Elemente können wie Komponenten als Standalone-Elemente definiert werden und müssen nicht mehr in Modulen deklariert werden.
Data Binding: Angular unterstützt weiterhin vielseitige Datenbindungsstrategien, die durch Signals ergänzt werden können. Die Integration von Signals in das Datenbindungssystem ermöglicht eine effizientere Aktualisierung der Benutzeroberfläche.
Zoneless Change Detection: Angular bietet Unterstützung für zonenlosen Betrieb, wodurch die Anwendungsperformance durch gezieltere Change Detection verbessert werden kann.
Die folgende Abbildung zeigt die grundlegende Schichtenarchitektur einer typischen Angular-Anwendung:
Diese Darstellung verdeutlicht die zentrale Struktur einer Angular-Anwendung mit ihren Hauptschichten:
Präsentationsschicht: Der sichtbare Teil der Anwendung, bestehend aus Komponenten, Templates und Direktiven, die direkt mit dem Benutzer interagieren.
Geschäftslogikschicht: Diese Ebene enthält Services, Guards und Resolver, die die eigentliche Anwendungslogik kapseln und wiederverwendbare Funktionalität bereitstellen.
Datenzugriffsschicht: Verantwortlich für die Kommunikation mit externen Systemen über den HTTP Client sowie für das State Management innerhalb der Anwendung.
Dependency Injection: Als Querschnittskonzept durchzieht das DI-System alle Schichten und ermöglicht die lose Kopplung zwischen den Komponenten.
Die klare Trennung dieser Schichten fördert die Wartbarkeit und Skalierbarkeit von Angular-Anwendungen. Jede Schicht hat spezifische Verantwortlichkeiten, was zu einer besseren Testbarkeit und einer klareren Codeorganisation führt.
Ein bedeutender Wandel in der Angular-Entwicklung ist der Übergang von der modulbasierten zur Standalone-Architektur, wie die folgende Abbildung zeigt:
Diese Gegenüberstellung verdeutlicht den Paradigmenwechsel in der Angular-Entwicklung:
Linke Seite (Modulbasierte Architektur): - Komponenten werden in Modulen deklariert und organisiert - Module importieren andere Module, um deren Funktionalität zu nutzen - Komponenten werden über Module exportiert und importiert - Hierarchische Modulstruktur mit AppModule als Einstiegspunkt
Rechte Seite (Standalone-Architektur): - Komponenten
deklarieren sich selbst als standalone: true - Direkte
Abhängigkeiten zwischen Komponenten ohne Modul-Zwischenschicht -
Komponenten importieren andere Komponenten direkt - Initialisierung über
bootstrapApplication() statt über das AppModule
Dieser Übergang vereinfacht die Anwendungsstruktur erheblich und ermöglicht eine direktere, intuitivere Organisation des Codes. Die Abhängigkeiten werden klarer, da sie direkt in den Komponenten deklariert werden, was zu einer besseren Tree-Shaking-Fähigkeit und damit zu schlankeren Bundles führt.
Diese Bausteine arbeiten in Angular zusammen, um eine moderne, leistungsfähige und entwicklerfreundliche Umgebung für die Webentwicklung zu schaffen. Der Schwerpunkt verschiebt sich zunehmend von einer modulbasierten zu einer komponentenbasierten Architektur, was zu schlankeren, wartbareren und effizienteren Anwendungen führt.