Angular

Angular ist ein Frontend-Framework von Google auf Basis von TypeScript. Es wird verwendet, um Single-Page-Applications zu entwickeln, die dynamisch Inhalte laden, ohne die Seite neu zu laden. Es bietet starke Konzepte wie Komponenten, Dependency Injection und Reaktives Datenbinding.

AngularJS basiert auf JavaScript und hat eine MVC-Architektur. Das moderne Angular ab Version 2 basiert auf TypeScript, verwendet Komponenten statt Controller und ist deutlich performanter und modularer.

TypeScript ist eine typisierte Erweiterung von JavaScript. Es bietet statische Typen, Klassen und Interfaces. Dadurch wird der Code wartbarer und Fehler werden früher erkannt.

Eine Komponente ist die kleinste Baueinheit der UI und besteht aus HTML CSS und TypeScript. Ein Modul gruppiert mehrere Komponenten und Services zu einer funktionalen Einheit.

Two-Way Data Binding bedeutet, dass Änderungen im UI automatisch das Datenmodell aktualisieren. Änderungen im Modell werden ebenfalls direkt im UI angezeigt.

Routing wird über das RouterModule gesteuert. Es ermöglicht die Navigation zwischen verschiedenen Views ohne Seitenreload.

Services sind Klassen, die Logik oder Daten bereitstellen, die von mehreren Komponenten genutzt werden. Angular injiziert sie über Dependency Injection, wobei der Container die Instanzen verwaltet. Ein Service wird meist mit @Injectable() markiert.

Ein Promise gibt genau ein Ergebnis zurück. Ein Observable kann mehrere Werte über Zeit liefern. In Angular sind Observables Standard für asynchrone Prozesse.

Über Input- und Output-Dekoratoren. Alternativ über Services als Shared State oder über Router-Parameter.

Change Detection prüft, ob sich Daten geändert haben, und aktualisiert die View. Der Standardmodus prüft alle Komponenten. OnPush prüft nur bei Input-Änderungen oder asynchronen Events und spart Performance.

Eine Komponente steuert einen Teil der Benutzeroberfläche. Sie besteht aus Template Styles und einer TypeScript-Klasse. Komponenten kapseln Logik und Darstellung.

Ein Modul organisiert zusammengehörige Komponenten Services und Pipes. Es definiert Abhängigkeiten und den Anwendungskontext. Jedes Angular-Projekt hat mindestens ein Root-Modul.

ngOnInit ist ein Lifecycle-Hook. Er wird nach der Initialisierung der Komponente aufgerufen. Typisch ist das Laden von Daten.

Lifecycle Hooks erlauben das Reagieren auf verschiedene Phasen einer Komponente. Beispiele sind ngOnInit ngOnChanges oder ngOnDestroy. Sie helfen beim Ressourcenmanagement.

Dependency Injection stellt Abhängigkeiten automatisch bereit. Komponenten müssen ihre Services nicht selbst erzeugen. Das verbessert Testbarkeit und Wartbarkeit.

Pipes transformieren Daten im Template. Beispiele sind date oder currency. Eigene Pipes können leicht erstellt werden.

Die Async Pipe abonniert Observables automatisch. Sie kümmert sich auch um das Unsubscribe. Dadurch wird Speicherlecks vorgebeugt.

Lazy Loading lädt Module erst bei Bedarf. Das reduziert die Initial-Ladezeit. Es ist wichtig für große Anwendungen.

OnPush reduziert die Anzahl der Change-Detection-Zyklen. Angular prüft nur bei neuen Referenzen oder Events. Das verbessert die Performance.

Ein Resolver lädt Daten vor dem Routenwechsel. Die Komponente erhält die Daten bereits beim Start. Das verbessert die Nutzererfahrung.

Guards steuern den Zugriff auf Routen. Sie werden für Authentifizierung oder Rollenprüfung genutzt. Beispiele sind CanActivate oder CanLoad.

Reactive Forms sind modellgetrieben. Sie bieten bessere Kontrolle und Testbarkeit. Validierung erfolgt im TypeScript-Code.

Template-driven Forms sind deklarativ im HTML definiert. Sie sind einfacher, aber weniger flexibel. Sie eignen sich für kleine Formulare.

RxJS ist eine Bibliothek für reaktive Programmierung. Sie basiert auf Observables und Operatoren. Angular nutzt RxJS intensiv.

Ein Memory Leak entsteht, wenn Subscriptions nicht beendet werden. Das kann die Performance stark beeinträchtigen. Unsubscribe oder Async Pipe helfen.

State Management verwaltet den globalen Zustand einer Anwendung. Bekannte Lösungen sind NgRx oder Akita. Es ist wichtig bei komplexen Apps.

NgRx ist ein Redux-ähnliches State-Management. Es basiert auf Actions Reducers und Effects. Es erhöht Vorhersagbarkeit und Struktur.

Man nutzt TestBed und Jasmine oder Jest. Komponenten können isoliert getestet werden. Mocks ersetzen Services.

Angular Universal rendert Seiten auf dem Server. Das verbessert SEO und Ladezeiten. Danach übernimmt der Client.

Für sehr kleine Projekte kann Angular zu komplex sein. Der Lernaufwand ist höher als bei leichten Frameworks. Für große Enterprise-Apps ist es jedoch sehr geeignet.