Angular

Kurz: Ein umfassendes Frontend-Framework von Google (TypeScript-basiert) — im Gegensatz zu React eine “Batteries-included”-Komplettlösung mit fest vorgegebener Struktur.

Genauer: Angular bringt Routing, Formularverarbeitung, HTTP-Client und Dependency Injection direkt mit, statt wie React nur eine View-Bibliothek zu sein, die man mit anderen Tools kombiniert. Die Neuentwicklung ab Angular 2 (2016) war ein kompletter Rewrite des ursprünglichen AngularJS, beide sind nicht kompatibel zueinander.

Im Detail

Komponenten mit Decorators

Zentrales Baustein-Konzept sind Komponenten mit eigenem Template, eigener Logik (in TypeScript) und eigenem Stylesheet — ähnlich wie bei React, aber mit deutlich strikterer, vorgeschriebener Struktur über Decorators (spezielle Annotationen, die einer Klasse zusätzliche Bedeutung geben):

@Component({
  selector: "app-hello",
  template: "<h1>Hallo, {{ name }}</h1><button (click)=\"gruessen()\">Klick mich</button>",
  styleUrls: ["./hello.component.css"],
})
export class HelloComponent {
  name = "Welt";
  gruessen() {
    alert(`Hallo, ${this.name}!`);
  }
}

Die geschweiften Doppelklammern ({{ name }}) sind Angulars Template-Syntax für Interpolation, (click) bindet ein DOM-Event an eine Methode — Angular nutzt bewusst eine eigene, HTML-nahe Template-Sprache statt reinem JavaScript/TypeScript wie bei JSX in React.

Dependency Injection

Angulars eingebautes Dependency-Injection-System (von serverseitigen Frameworks wie Spring/.NET inspiriert) erlaubt es, Services (z. B. für HTTP-Requests, Zustandsverwaltung) zentral zu definieren und in beliebige Komponenten “hineinzureichen”, ohne sie manuell durch die Komponentenhierarchie weiterzugeben (“Prop Drilling”, ein bekanntes React-Problem). Ein Service wird einfach im Konstruktor einer Komponente angefordert, Angular kümmert sich automatisch um Instanziierung und Lebenszyklus:

constructor(private http: HttpClient) {}

Der AngularJS-zu-Angular-Bruch

Die Neuentwicklung ab Angular 2 (2016) war ein kompletter Rewrite des ursprünglichen AngularJS (Angular 1, 2010), nicht nur ein Versions-Update — beide sind grundverschieden und nicht kompatibel zueinander (unterschiedliche Sprache: JavaScript vs. TypeScript, unterschiedliche Architektur: MVC vs. komponentenbasiert). Dieser radikale Bruch verwirrte viele Entwickler und öffnete das Feld für Konkurrenten wie React, die in derselben Zeit stark an Popularität gewannen.

Abwägung gegenüber React und Vue

Das macht große, teamübergreifende Anwendungen konsistenter (weniger Entscheidungsspielraum, wie Routing/Formulare/State aussehen sollen), bedeutet aber auch eine steilere Lernkurve als bei minimalistischeren Ansätzen wie React oder Vue, die bewusst nur die View-Schicht abdecken und alles andere dem Entwickler überlassen. Weil das Framework selbst vorschreibt, wie Routing, Formulare und HTTP-Calls aussehen, wirken unterschiedliche Angular-Codebasen oft ähnlicher strukturiert als React-Projekte, wo jedes Team eigene Bibliotheken kombiniert — ein Vorteil für große Unternehmen mit vielen Teams, ein potenzieller Nachteil für kleine, schnell iterierende Projekte.

RxJS und reaktive Programmierung

Angular setzt stark auf RxJS (Reactive Extensions for JavaScript) zur Handhabung asynchroner Daten — etwa HTTP-Antworten oder Nutzereingaben werden als “Observables” (Datenströme, auf die man reagieren kann) statt als einzelne Werte oder Promises behandelt. Das erlaubt mächtige Operationen wie das automatische Verwerfen veralteter Suchanfragen bei schneller Nutzereingabe (switchMap) oder das Kombinieren mehrerer Datenströme, erhöht aber auch die Lernkurve zusätzlich, da RxJS ein eigenes, recht umfangreiches Konzept-Set mitbringt, das über normales JavaScript hinausgeht.

Ivy-Compiler und Standalone Components

Seit Angular 9 kompiliert der “Ivy”-Compiler Templates in kleinere, effizientere JavaScript-Ausgaben und ermöglicht Tree-Shaking (ungenutzten Code aus dem finalen Bundle entfernen) auf Komponentenebene. Neuere Angular-Versionen (ab Version 14) führten außerdem “Standalone Components” ein, die ohne die früher zwingend vorgeschriebenen NgModule-Wrapper auskommen — eine Reaktion auf Kritik, Angular sei im Vergleich zu React/Vue zu umständlich strukturiert, und eine schrittweise Annäherung an einfachere Component-Modelle.

Siehe auch: AngularJS, React, Vue, TypeScript