Angular 2: Ein kompletter Neuentwurf mit TypeScript

Google hat Angular 2 veröffentlicht — ein kompletter Neuentwurf des Frameworks auf Basis von TypeScript, Komponentenarchitektur und Ahead-of-Time-Kompilierung. Was sich geändert hat und wie man migriert.

Warum ein kompletter Neuentwurf¶

AngularJS (1.x) war ein Vorreiter unter den SPA-Frameworks, doch seine Architektur stieß an ihre Grenzen. Two-Way-Binding verursachte Performance-Probleme, Dependency Injection war unübersichtlich und die Scope-Hierarchie führte zu schwer auffindbaren Bugs.

Angular 2 ist ein komplett neues Framework — es teilt nur den Namen. Aufgebaut auf TypeScript mit einer von React inspirierten Komponentenarchitektur bietet es deutlich bessere Performance und Developer Experience.

Komponenten und TypeScript¶

Komponenten sind der grundlegende Baustein von Angular 2:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero',
  template: `
    <h2>{{hero.name}}</h2>
    <p>ID: {{hero.id}}</p>
    <button (click)="save()">Save</button>
  `
})
export class HeroComponent {
  hero = { id: 1, name: 'Superman' };

  save(): void {
    console.log('Saving hero:', this.hero.name);
  }
}

TypeScript bringt statische Typisierung, Interfaces und bessere IDE-Unterstützung. Decorators (@Component, @Injectable) ersetzen die AngularJS-Konfiguration.

Änderungen gegenüber AngularJS¶

Wesentliche Unterschiede:

• Komponenten statt Controller — hierarchischer Komponentenbaum
• TypeScript statt JavaScript — Typsicherheit und moderne Syntax
• RxJS Observables — reaktive Programmierung statt Promises
• Ahead-of-Time (AOT) Kompilierung — Templates werden beim Build kompiliert, nicht zur Laufzeit
• Tree Shaking — Eliminierung ungenutzten Codes
• Modulare Architektur — NgModules zur Code-Organisation

Die Performance-Verbesserungen sind dramatisch — AOT-Kompilierung und die OnPush Change-Detection-Strategie reduzieren den Rendering-Overhead erheblich.

Migration von AngularJS¶

Google stellt das ngUpgrade-Modul für eine schrittweise Migration bereit:

• AngularJS und Angular 2 parallel betreiben
• Komponente für Komponente migrieren
• Services zwischen beiden Versionen teilen
• AngularJS-Abhängigkeiten schrittweise entfernen

Für neue Projekte empfehlen wir direkt Angular 2. Für bestehende AngularJS-Anwendungen sollte abgewogen werden, ob die Migration die Investition wert ist — die Antwort lautet nicht immer ja.

Fazit: Die nächste Generation des Enterprise-Frameworks¶

Angular 2 ist ein mutiger Schritt — ein Breaking Change, der Teile der Community verärgert hat, aber ein modernes, performantes Framework für Enterprise-Anwendungen geliefert hat. Die Kombination aus TypeScript, RxJS und AOT-Kompilierung schafft eine robuste Plattform für komplexe Webanwendungen.