Intro zu meinem Modern-Angular-Workshop

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