Angular 2 - Routing Jax2016
-
Upload
manfred-steyer -
Category
Internet
-
view
402 -
download
0
Transcript of Angular 2 - Routing Jax2016
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
SPAPlatzhalter
3
Routing unter AngularJS
Page 11
Logo + Menü
Men
ü 2
Fußzeile
SPAPassagier-
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#flugbuchenF
lugB
uch
en
-Ko
mp
on
en
te
Hierarchische Views
Page 14
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo#flugbuchen
Optionen
Platzhalter
Flu
gB
uch
en
-Ko
mp
on
en
te
5
Hierarchische Views
Page 15
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen
Passagier-
Komponente
Flu
gB
uch
en
-Ko
mp
on
en
te
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
VerbreitungKomponenten Data-Binding
DependencyInjection
Services Formulare
Validierung Routing