Das Dokument behandelt die Neuerungen von Angular 2 im Vergleich zu AngularJS, einschließlich Performance-Verbesserungen, der Nutzung von TypeScript und der Migration von Angular 1.x zu Angular 2. Es werden Herausforderungen und Vorteile beim Einsatz von Angular 2 dargestellt sowie Methoden zur Migration bestehender AngularJS-Anwendungen beschrieben. Der Fokus liegt auf der Schaffung einer verbesserten Benutzererfahrung durch moderne Architektur und Komponentenbasierte Entwicklung.

1. 1
Angular 2: Neuerungen und Migration
Manfred Steyer
ManfredSteyer
Aktuelle Projekte
Page  2
Software Engineering Leadership
Berufsbegleitendes Studium (M.Sc.)
für Führungskräfte
software-engineering-leadership.at
Modern AngularJS - Deep Dive
Workshop
Graz, November 2015
angular.at/Trainings

2. 2
Inhalt
Warum AngularJS ?
Angular 2
DEMO
Migration
Fazit
Page  3
WARUM ANGULARJS?
Page  4

3. 3
Plattformen und Usability
HTML + JavaScript
Single Page Application
Einige Frameworks
Page  15
AngularJS EmberJS
Durandal Aurelia

4. 4
Community (April 2014)
Page  18
AngularJS EmberJS Durandal Aurelia
Stars 37.318 13.339 1.534 2.347
Forks 15.494 2.851 357 97
Contributers 1.215 474 69 8
Zahlen aus Core-Projekten übernommen
Google Analytics (April 2015)
Page  19

5. 5
Job Trends (Indeed.com, April 2015)
Page  20
HERAUSFORDERUNGEN IN
ANGULARJS 1.X
Page  32

6. 6
Herausforderungen in Angular 1.x
Page  33
Performance Nachvollziehbarkeit $digest
Use-Case:
Anwendungen
Zusammenspiel
mit anderen
Bibliotheken
ANGULAR 2
Page  34

7. 7
Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten (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  35
Component Controller
Page  36
@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

8. 8
View
Page  37
<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  38
<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>

9. 9
Datenbindung
 Orientierung an Flux-Muster aus React --> Performance
 Performancegewinn durch Immutable Data und
Observables
 Performance: Im Bereich von ReactJS
 Property-Binding: One-Way-Binding, Top/Down
 Event-Binding: Bottom/Up
 Two-Way-Binding: Property-Binding + Event-Binding
Page  39
DEMO: ANGUALR 2 MIT
TYPESCRIPT UND @CODE
Page  41

10. 10
MIGRATION
Page  42
Migration
Page  44
Angular
1.x
Angular
2

11. 11
Möglichkeiten
 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
 Sinnvoll: Migration durch Einsatz von modernen AngularJS 1.x-
Code vorbereiten: EcmaScript 6, Controller-As
Page  45
[https://github.com/angular/ngUpgrade]
Component Router
 Ziel einer Route --> Komponente
 Angular 2: Native Komponente oder Web Component
 Angular 1.x: Controller + Template
 Konvention für Controller: XYController
 Konvention für Template: xy/xy.html
 Konvention für Controller-Instanz: xy
 Konfigurieren: $componentLoaderProvider
Page  46

12. 12
Entwicklungsstand und Installation
 Noch in Entwicklung
 Wird mit Angular 2 bzw. 1.5 kommen
 Repo: https://github.com/angular/router
 Installation: npm install angular-new-router
Page  47
DEMO
Page  48

13. 13
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung mit Fokus auf
Performance, Komponenten und modernen Standards
 Parallelbetrieb, u. a. mit neuem Router
 Vorbereitung durch modernen Angular 1.x-Code,
Neuer Component Router (ab 1.5), ES 6/ TypeScript
Page  51
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de