SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
1
Angular 2.0: Routing
Manfred Steyer
ManfredSteyer
Inhalt
Motivation
Konfiguration
Routing-Parameter
Hierarchisches Routing
Lifecycle-Hooks
Page  2
2
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seiten"
 Routen verweisen auf diese Seiten
 Route ist Teil der Url
 Bookmarks
 Back-Button
 Router unterstützen hierbei
Page  4
Routing unter AngularJS
Page  10
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter
3
Routing unter AngularJS
Page  11
Logo + Menü
Menü2
Fußzeile
SPA Passagier-
Komponente
/FlugDemo#flugbuchen/passagier
Hierarchische Views
Page  12
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1
4
Hierarchische Views
Page  13
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
FlugBuchen-Komponente
Hierarchische Views
Page  14
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
Optionen
Platzhalter
FlugBuchen-Komponente
5
Hierarchische Views
Page  15
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen
Passagier-
Komponente
FlugBuchen-Komponente
Routen via Hash-Fragment
 /FlugDemo#flugbuchen/passagier
 Hash-Fragment wird nie zum Server gesendet
Page  16
6
Routen via History API
 /FlugDemo/flugbuchen/passagier
 Initialer Aufruf:
Gesamte Url wird zum Server gesendet
 Server antwortet mit SPA
 Server kann erste Ansicht "vorrendern"
 Performance, SEO, …
 SPA informiert Browser über Grenze zwischen
physischer und logischer Url
Page  17
Parameter
 /FlugDemo/flugbuchen/passagier/7
 /FlugDemo#flugbuchen/passagier/7
Page  18
7
COMPONENT ROUTER
Page  20
Vorbereitung
 Bundle für Router über Script-Verweis inkludieren:
 <script src="node_modules/angular2/bundles/router.dev.js">
</script>
 ROUTER_PROVIDERS
 Für Hash-Strategie
 provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page  21
8
History API (PathLocationStrategy)
Standard
<base href="/">
Alternative: Token APP_BASE_HREF
Page  22
AppComponent
Page  23
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home,
name: 'Home', useAsDefault: true },
{ path: '/flug-suchen', component: FlugSuchen,
name: 'FlugSuchen' }
])
export class App {
[…]
}
9
View von AppComponent
Page  24
<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/FlugSuchen']">Flug suchen</a>
<div>
<router-outlet></router-outlet>
</div>
Aktives Element bekommt Klasse 'router-link-active'
ROUTEN MIT PARAMETER
Page  25
10
Routen mit Parameter
Page  26
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, name: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
name: 'FlugSuchen' },
{ path: '/flug-edit/:id', component: FlugEdit,
name: 'FlugEdit' }
])
export class App {
[…]
}
Route-Parameter auslesen
Page  27
@Component({
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;
}
}
11
Links auf Routen mit Parameter
Page  28
<a [routerLink]="['/FlugEdit', {id: flug.id}]">Edit</a>
DEMO
Page  29
12
ZUSAMMENFASSUNG
Page  53
Zusammenfassung
Page  54
Angular:
Weite
Verbreitung
Komponenten Data-Binding
Dependency
Injection
Services Formulare
Validierung Routing
13
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact

Weitere ähnliche Inhalte

Angular 2 - Routing Jax2016

  • 1. 1 Angular 2.0: Routing Manfred Steyer ManfredSteyer Inhalt Motivation Konfiguration Routing-Parameter Hierarchisches Routing Lifecycle-Hooks Page  2
  • 2. 2 Motivation  SPAs bestehen aus einer Seite  Innerhalb dieser werden Bereiche ein- und ausgeblendet --> "Logische Seiten"  Routen verweisen auf diese Seiten  Route ist Teil der Url  Bookmarks  Back-Button  Router unterstützen hierbei Page  4 Routing unter AngularJS Page  10 Logo + Menü Menü2 Fußzeile SPA Platzhalter
  • 3. 3 Routing unter AngularJS Page  11 Logo + Menü Menü2 Fußzeile SPA Passagier- Komponente /FlugDemo#flugbuchen/passagier Hierarchische Views Page  12 Logo + Menü Menü2 Fußzeile SPA Platzhalter 1
  • 4. 4 Hierarchische Views Page  13 Logo + Menü Menü2 Fußzeile SPA /FlugDemo#flugbuchen FlugBuchen-Komponente Hierarchische Views Page  14 Logo + Menü Menü2 Fußzeile SPA /FlugDemo#flugbuchen Optionen Platzhalter FlugBuchen-Komponente
  • 5. 5 Hierarchische Views Page  15 Logo + Menü Menü2 Fußzeile SPA /FlugDemo#flugbuchen/passagier Optionen Passagier- Komponente FlugBuchen-Komponente Routen via Hash-Fragment  /FlugDemo#flugbuchen/passagier  Hash-Fragment wird nie zum Server gesendet Page  16
  • 6. 6 Routen via History API  /FlugDemo/flugbuchen/passagier  Initialer Aufruf: Gesamte Url wird zum Server gesendet  Server antwortet mit SPA  Server kann erste Ansicht "vorrendern"  Performance, SEO, …  SPA informiert Browser über Grenze zwischen physischer und logischer Url Page  17 Parameter  /FlugDemo/flugbuchen/passagier/7  /FlugDemo#flugbuchen/passagier/7 Page  18
  • 7. 7 COMPONENT ROUTER Page  20 Vorbereitung  Bundle für Router über Script-Verweis inkludieren:  <script src="node_modules/angular2/bundles/router.dev.js"> </script>  ROUTER_PROVIDERS  Für Hash-Strategie  provide(LocationStrategy, {useClass: HashLocationStrategy}) Page  21
  • 8. 8 History API (PathLocationStrategy) Standard <base href="/"> Alternative: Token APP_BASE_HREF Page  22 AppComponent Page  23 @Component({ selector: 'app', directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, name: 'Home', useAsDefault: true }, { path: '/flug-suchen', component: FlugSuchen, name: 'FlugSuchen' } ]) export class App { […] }
  • 9. 9 View von AppComponent Page  24 <a [routerLink]="['/Home']">Home</a> <a [routerLink]="['/FlugSuchen']">Flug suchen</a> <div> <router-outlet></router-outlet> </div> Aktives Element bekommt Klasse 'router-link-active' ROUTEN MIT PARAMETER Page  25
  • 10. 10 Routen mit Parameter Page  26 @Component({ selector: 'app', directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, name: 'Home' }, { path: '/flug-suchen', component: FlugSuchen, name: 'FlugSuchen' }, { path: '/flug-edit/:id', component: FlugEdit, name: 'FlugEdit' } ]) export class App { […] } Route-Parameter auslesen Page  27 @Component({ 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; } }
  • 11. 11 Links auf Routen mit Parameter Page  28 <a [routerLink]="['/FlugEdit', {id: flug.id}]">Edit</a> DEMO Page  29
  • 12. 12 ZUSAMMENFASSUNG Page  53 Zusammenfassung Page  54 Angular: Weite Verbreitung Komponenten Data-Binding Dependency Injection Services Formulare Validierung Routing