Was ist neu in Angular 2? (Part 1)

Da sich Angular 2 sich seit geraumer Zeit in der Beta befindet, möchte ich euch gerne ein paar Eckdaten zu dem Major-Update des beliebten JavaScript-Frameworks liefern. Einige von euch habe evtl. bereits mit der Version 1.x eine Single Page Application (SPA) entwickelt und fragen sich nun, was sich denn alles in der nächsten Version ändert.

Eine der grundlegenden Änderungen in Angular 2 ist die Nutzung von TypeScript. Bei TypeScript handelt es sich um ein Superset ( Obermenge ) von JavaScript. Das bedeutet einfach gesagt, dass JavaScript um z. B. ein statisches Typensystem erweitert wird. In der Praxis wirkt sich das dann folgendermaßen aus:

function greeter(person) {
    return "Hello, " + person;
}

In TypeScript wird dem Parameter "person" der Methode greeter() der Typ string getrennt von einem Doppelpunkt angehängt. Das obige Codebeispiel sieht dann in TypeScript wir folgt aus:

function greeter(person: string) {
    return "Hello, " + person;
}

Den Swift-Entwicklern dürfte diese Schreibweise bekannt vorkommen. Dort würde diese Methode ungefähr wie folgt aussehen:

func greeter(person: NSString) {
    return "Hello, \(person)";
}

 Ein anschauliches und umfangreiches Tutorial findet man auf der TypeScript-Website in der Sektion "Learn".

In der Struktur von Angular hat sich im Vergleich zur Version 1.x auch etwas getan. Vor Angular 2 wurde die Business-Logic hauptsächlich in die Controller gepackt. Die zu verarbeitenden Daten wurden von einem Service geliefert. Hat man die Daten verarbeitet wurden diese in den Templates ausgegeben. Dabei kapselte man sich wiederholdende  Bereiche in sog. Directives.

In Angular 2 stellen die Components das dar, was früher die Directives waren. Sie kontrollieren Teilbereiche einer Web-Application welcher als View bezeichnet wird. Dabei wird schlichtweg die Komponente im HTML-Markup ...

<meine-component></meine-component>

... der Web-Application durch den Inhalt des Views (HTML-Template) ersetzt.

<section>
<h1>Meine Superheldenliste</h1>
<ul>
<li>1. Rorschach</li>
<li>2. DeadPool</li>
<li>3. Hulk</li>
<li>4. Batman</li>
<li>...</li>
</ul>
</section>

Auch wenn nicht jeder mit dieser kleine Superheldenliste einverstanden ist. So sollte das Beispiel grob veranschaulichen, welche Aufgabe Components haben.

Wie bereits oben erwähnt wurde die Business-Logic vor Angular 2 in Controller gepackt und Services dienten als deren Helferlein. In Angular 2 wurde das in Service-Modulen zusammengefasst.