O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
1
Angular 2.0: Moderne Anwendungen für
das Web von morgen und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
...
2
Ziel
Angular 2.0 und zugrundeliegende Konzepte
anhand eines Beispielprojektes kennen lernen
Page  4
Didaktik
Kurze Pr...
3
Inhalt
 Motivation
 Überblick zu Angular 2
 DEMO
 Binding und Forms-Handling
 DEMO
 Routing
 DEMO
 Komponenten
...
4
Plattformen und Usability
HTML + JavaScript
Single Page Application
Page  15
HTML + JavaScript + jQuery => Komplexität
5
Page  16
Frameworks machen SPA beherrschbar
AngularJS
Page  17
Community Verbreitung
Eco-
System
6
HERAUSFORDERUNGEN IN
ANGULARJS 1.X
Page  36
Herausforderungen in AngularJS 1.x
Page  37
Performance Nachvollziehbarkei...
7
ANGULAR 2
Page  38
Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten (Web Components)
 TypeScript/ ES...
8
Component Controller
Page  40
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directiv...
9
View
Page  42
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: var flug...
10
BINDINGS NÄHER
BETRACHTET
Page  46
Architektur-Ziele von Angular 2
Page  47
Performance Komponenten
Vorhersagbarkeit
11
Data-Binding in Angular 1.x
Page  48
Model Model Directive
Komponenten-Baum in Angular 2
Page  49
Komponente für App
...
12
Regeln für Property-Bindings
 Eine Komponente hängt nur von ihren eigenen Daten
(und indirekt von denen des Parents) a...
13
Weitere Performance-Verbesserungen
Page  54
Immutable
Data
Observables
Event-Bindings (One-Way, Bottom/Up)
Page  56
{...
14
Event-Bindings (One-Way, Bottom/Up)
Kein Digest um Events zu versenden
Aber: Events können Daten ändern 
Property Bi...
15
Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Bin...
16
Property- und Event-Bindings
kombinieren
Page  66
<input [ng-model]="from" (ng-model)="from = $event">
Syntax-Zucker f...
17
Types of Binding
Page  68
<input [(ng-model)]="from">
[…]
<table [hidden]="flights.length == 0">
<tr *ng-for="#flight ...
18
HANDLING FORMS
Page  71
Ansätze in Angular 2
• ng-model
• Wie in AngularJS 1.x
• Angular erzeugt „Forms-Controller“
De...
19
Deklerative Formulare
Page  73
export class FlightList {
constructor(flightService: FlightService) {
[…]
this.filter =...
20
DEMO
Page  75
Imperative Formulare
export class FlightList {
filter: ControlGroup;
constructor(flightService: FlightSe...
21
Imperative Formulare
Page  77
<form [ng-form-model]="filter">
<input id="from" ng-control="from" type="text">
<div *ng...
22
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seite...
23
Routing unter AngularJS
 SPA erhält Platzhalter
 Je nach URL wird in diesen Platzhalter ein Template
geladen
 #flugb...
24
Routing unter AngularJS
Page  83
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter
Routing unter AngularJS
Page  84
Logo + M...
25
COMPONENT ROUTER
Page  85
Provider
ROUTER_PROVIDERS
provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page...
26
AppComponent
Page  87
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.h...
27
ROUTEN MIT PARAMETER
Page  89
Routen mit Parameter
Page  90
@Component({
selector: 'app'
})
@View({
directives: [ROUT...
28
Links auf Routen mit Parameter
Page  91
<a [router-link]="['/FlugEdit', {id: flug.id}]">Edit</a>
Route-Parameter ausle...
29
MIGRATION
Page  114
Migration
Page  116
Angular
1.x
Angular
2
30
Möglichkeiten
 Component Router: Parallelbetrieb
 Angular 1.5: Komponenten in Angular 1
 NgUpgrade: Angular 2 und An...
31
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software...
Próximos SlideShares
Carregando em…5
×

Angular 2 Workshop Oktober 2015

Unterlagen meines Angular-2-Workshops (Alpha 44) aus dem Oktober 2015

  • Entre para ver os comentários

Angular 2 Workshop Oktober 2015

  1. 1. 1 Angular 2.0: Moderne Anwendungen für das Web von morgen und Migrationspfade Manfred Steyer ManfredSteyer Aktuelles Buch Folie 2 O'Reilly: AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript Steyer, Softic
  2. 2. 2 Ziel Angular 2.0 und zugrundeliegende Konzepte anhand eines Beispielprojektes kennen lernen Page  4 Didaktik Kurze Präsentationen Live-Coding Fragen: Gerne jederzeit! Page  5
  3. 3. 3 Inhalt  Motivation  Überblick zu Angular 2  DEMO  Binding und Forms-Handling  DEMO  Routing  DEMO  Komponenten  DEMO  Migration  Fazit MOTIVATION Page  7
  4. 4. 4 Plattformen und Usability HTML + JavaScript Single Page Application Page  15 HTML + JavaScript + jQuery => Komplexität
  5. 5. 5 Page  16 Frameworks machen SPA beherrschbar AngularJS Page  17 Community Verbreitung Eco- System
  6. 6. 6 HERAUSFORDERUNGEN IN ANGULARJS 1.X Page  36 Herausforderungen in AngularJS 1.x Page  37 Performance Nachvollziehbarkeit Änderungsverfolgung Use-Case: Anwendungen Zusammenspiel mit anderen Bibliotheken
  7. 7. 7 ANGULAR 2 Page  38 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  39
  8. 8. 8 Component Controller Page  40 @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 View Page  41 <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>
  9. 9. 9 View Page  42 <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> DEMO: ERSTE SCHRITTE Page  45
  10. 10. 10 BINDINGS NÄHER BETRACHTET Page  46 Architektur-Ziele von Angular 2 Page  47 Performance Komponenten Vorhersagbarkeit
  11. 11. 11 Data-Binding in Angular 1.x Page  48 Model Model Directive Komponenten-Baum in Angular 2 Page  49 Komponente für App Komponente (z. B. Liste) Komponente (z. B. Eintrag) Komponente (z. B. Eintrag)
  12. 12. 12 Regeln für Property-Bindings  Eine Komponente hängt nur von ihren eigenen Daten (und indirekt von denen des Parents) ab  Eine Komponente hängt nicht von Daten ihrer Kinder ab!  Abhängigkeits-Graph ist ein Baum  Angular benötigt nur einen Digest um Baum mit GUI abzugleichen Page  51 Property-Binding Page  52 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
  13. 13. 13 Weitere Performance-Verbesserungen Page  54 Immutable Data Observables Event-Bindings (One-Way, Bottom/Up) Page  56 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
  14. 14. 14 Event-Bindings (One-Way, Bottom/Up) Kein Digest um Events zu versenden Aber: Events können Daten ändern  Property Binding Page  57 Property- und Event-Bindings Page  59 Property-Binding ausführen Event-Handler ausführen Ereignis tritt ein App ist bereit Alle Handler ausgeführt Properties gebunden
  15. 15. 15 Recap Property-Binding: One-Way; Top/Down Event-Binding: One-Way; Bottom/Up Two-Way-Binding? Two-Way = Property-Binding + Event-Binding Page  64 Property- und Event-Bindings kombinieren Page  65 <input [ng-model]="from" (ng-model)="updateFrom($event)"> updateFrom(newValue) { this.from = newValue; }
  16. 16. 16 Property- und Event-Bindings kombinieren Page  66 <input [ng-model]="from" (ng-model)="from = $event"> Syntax-Zucker für 2-Way-Binding Page  67 <input [(ng-model)]="from"> <input bindon-ng-model="from">
  17. 17. 17 Types of Binding Page  68 <input [(ng-model)]="from"> […] <table [hidden]="flights.length == 0"> <tr *ng-for="#flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> DEMO: USING NG-MODEL Page  69
  18. 18. 18 HANDLING FORMS Page  71 Ansätze in Angular 2 • ng-model • Wie in AngularJS 1.x • Angular erzeugt „Forms-Controller“ Deklerativ • Anwendung erzeugt „Forms- Controller“ • Mehr Kontrolle Imperativ • Angular generiert Formular für Datenmodell • Noch nicht implementiert Daten- getrieben
  19. 19. 19 Deklerative Formulare Page  73 export class FlightList { constructor(flightService: FlightService) { […] this.filter = { from: 'Graz', to: 'Hamburg' }; […] } } View Page  74 <form #f="form"> <input type="text" ng-control="from" [(ng-model)]="filter.from" required> <div *ng-if="!f.controls.from.valid"> …Error… </div> <div *ng-if="f.controls.from.hasError('required')"> …Error… </div> […] </form> FormDirective f ControlGroup form Control from
  20. 20. 20 DEMO Page  75 Imperative Formulare export class FlightList { filter: ControlGroup; constructor(flightService: FlightService, fb: FormBuilder) { […] this.filter = fb.group({ from: ['Graz', Validators.required], to: ['Hamburg', Validators.required] }); […] } searchFlights() { var filter = this.filter.value; […] } }
  21. 21. 21 Imperative Formulare Page  77 <form [ng-form-model]="filter"> <input id="from" ng-control="from" type="text"> <div *ng-if="!filter.controls.from.valid">…Error…</div> […] </form> ROUTING Page  78
  22. 22. 22 Motivation  SPAs bestehen aus einer Seite  Innerhalb dieser werden Bereiche ein- und ausgeblendet --> "Logische Seiten"  Herausforderungen:  URL-Parameter und Bookmarks  Back-Button  Eigene Datei pro logischer Seite --> Übersicht Page  79 Routing unter AngularJS  Logische Seiten erhalten eine URL, z. B:  /FlugDemo#flugbuchen/passagier  /FlugDemo#flugbuchen/flug  Logische Seiten erhalten URL-Parameter, z. B.:  /FlugDemo#flugbuchen/passagier/5 Page  80
  23. 23. 23 Routing unter AngularJS  SPA erhält Platzhalter  Je nach URL wird in diesen Platzhalter ein Template geladen  #flugbuchen/passagier --> passagier.html  #flugbuchen/flug --> flug.html  Templates sind i.d.R. eigene Dateien  Werden bei Bedarf nachgeladen  Können auch in SPA inkludiert werden Page  81 Routen (Zustände) Routen sind Kombination aus u. a.: Url (mit/ohne Platzhalter) Template Controller Page  82
  24. 24. 24 Routing unter AngularJS Page  83 Logo + Menü Menü2 Fußzeile SPA Platzhalter Routing unter AngularJS Page  84 Logo + Menü Menü2 Fußzeile SPA Passagier.html /FlugDemo#flugbuchen/passagier
  25. 25. 25 COMPONENT ROUTER Page  85 Provider ROUTER_PROVIDERS provide(LocationStrategy, {useClass: HashLocationStrategy}) Page  86
  26. 26. 26 AppComponent Page  87 @Component({ selector: 'app' }) @View({ directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, as: 'Home' }, { path: '/flug-suchen', component: FlugSuchen, as: 'FlugSuchen' } ]) export class App { } View von AppComponent Page  88 <a [router-link]="['/Home']">Home</a> <div> <router-outlet></router-outlet> </div>
  27. 27. 27 ROUTEN MIT PARAMETER Page  89 Routen mit Parameter Page  90 @Component({ selector: 'app' }) @View({ directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, as: 'Home' }, { path: '/flug-suchen', component: FlugSuchen, as: 'FlugSuchen' }, { path: '/flug-edit/:id', component: FlugEdit, as: 'FlugEdit' } ]) export class App { }
  28. 28. 28 Links auf Routen mit Parameter Page  91 <a [router-link]="['/FlugEdit', {id: flug.id}]">Edit</a> Route-Parameter auslesen Page  92 @Component({}) @View({ templateUrl: 'app/components/flug-edit/flug-edit.html' }) export class FlugEdit { id; constructor(params: RouteParams) { this.id = params.get('id'); this.info = 'Flug: #' + this.id; } }
  29. 29. 29 MIGRATION Page  114 Migration Page  116 Angular 1.x Angular 2
  30. 30. 30 Möglichkeiten  Component Router: Parallelbetrieb  Angular 1.5: Komponenten in Angular 1  NgUpgrade: Angular 2 und Angular 1.x mixen  NgForward: AngularJS 1.x im Angular-2-Stil  Sinnvoll: Vorbereitung durch Einsatz von modernen AngularJS 1.x-Code vorbereiten: EcmaScript 6, TypeScript, Dekoratoren, Controller-As Page  117 [https://github.com/angular/ngUpgrade] 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, ES 6/ TypeScript Page  123
  31. 31. 31 [mail] manfred.steyer@softwarearchitekt.at [blog] www.softwarearchitekt.at [twitter] ManfredSteyer Kontakt www.software-engineering-leadership.de

×