Das Dokument behandelt die Migration von AngularJS 1.x zu Angular 2 und die Möglichkeiten, Angular 1.x mit modernen Technologien wie TypeScript und ES6 zu nutzen. Es enthält Anleitungen zur Nutzung von Dekoratoren, dem Component Router und zur Verbesserung der Performance. Zudem werden Best Practices für eine reibungslose Migration und die Verwendung von Angular 2 in Verbindung mit bestehenden AngularJS-Komponenten vorgestellt.

1. 1
Fit für die Zukunft:
Modernes AngularJS 1.x1
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Page  2

2. 2
Inhalt
 Intro
 Überblick zu Angular 2
 Überblick zu Migrationsmöglichkeiten
 AngularJS 1.x mit TypeScript und ES6 (ES 2015)
 Dekoratoren in TypeScript und ES7 (ES 2016)
 Dekoratoren für AngularJS 1.x
 Component Router für Angular 1.x und 2
Page  3
Didaktik
Kurze Präsentationen
Code-Beispiele
Page  4

3. 3
ÜBERBLICK ZU ANGULAR 2
Page  5
Herausforderungen in Angular 1.x
Page  6
Performance Nachvollziehbarkeit $digest
Use-Case:
Anwendungen
Zusammenspiel
mit anderen
Bibliotheken

4. 4
Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten (u. a. Web Components)
 TypeScript/ ES 6 (ES 5 möglich)
 Kompilierung nach ES 5
 Modularisierung
 Flexibles Rendering (auch: Web-Worker, Server)
 Spielt besser mit anderen Bibliotheken zusammen
Page  7
Component Controller
Page  8
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directives: [NgFor, NgIf]
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}
Kann künftig großteils
entfallen

5. 5
View
Page  9
<input [(ng-model)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ng-for="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" (click)="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>
View
Page  10
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: var flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" on-click="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>

6. 6
MIGRATION
Page  11
Migration
Page  12
Angular
1.x
Angular
2
ng-upgrade

7. 7
ng-upgrade
 Parallelbetrieb über Component Router
 Komponenten in Angular 1
 Angular 2 mit Angular 1.x-Komponenten und vice versa
 Angular-2-Dekoratoren für Angular 1
 Automatische Upgrade-Tools, Guides und Best Practices
Page  13
[https://github.com/angular/ngUpgrade]
Auf Angular 2 heute schon vorbereiten
Modernes AngularJS 1.x schreiben
EcmaScript 6/ TypeScript
Controller-As
ES7-Dekoratoren
Component Router (sobald verfügbar)
Page  14