Angular 2: Routing
1 gefällt mir455 aufrufe
Das Dokument behandelt das Routing in Angular 2.0, einschließlich der Motivation für Single Page Applications (SPAs), der Konfiguration von Routen und der Verwendung von hierarchischem Routing sowie Lifecycle-Hooks. Es werden verschiedene Strategien zur Behandlung von Routen, einschließlich Hash-Fragmenten und der History API, sowie die Verwendung von Routenparametern erläutert. Außerdem wird der Aufbau einer Angular-Anwendung mit Routen und deren Management durch den Router beschrieben, einschließlich Beispielkomponenten und ihrer Implementierung.
![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 {
[…]
}](https://image.slidesharecdn.com/02angular2routing-160422113921-160423115604/85/Angular-2-Routing-8-320.jpg)
![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](https://image.slidesharecdn.com/02angular2routing-160422113921-160423115604/85/Angular-2-Routing-9-320.jpg)
![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;
}
}](https://image.slidesharecdn.com/02angular2routing-160422113921-160423115604/85/Angular-2-Routing-10-320.jpg)
![11
Links auf Routen mit Parameter
Page 28
<a [routerLink]="['/FlugEdit', {id: flug.id}]">Edit</a>
DEMO
Page 29](https://image.slidesharecdn.com/02angular2routing-160422113921-160423115604/85/Angular-2-Routing-11-320.jpg)
Angular 2: Routing
- 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