Angular 2 - Routing Jax2016

13
1 Angular 2.0: Routing Manfred Steyer ManfredSteyer Inhalt Motivation Konfiguration Routing-Parameter Hierarchisches Routing Lifecycle-Hooks Page 2

Transcript of Angular 2 - Routing Jax2016

Page 1: Angular 2 - Routing Jax2016

1

Angular 2.0: Routing

Manfred Steyer

ManfredSteyer

Inhalt

Motivation

Konfiguration

Routing-Parameter

Hierarchisches Routing

Lifecycle-Hooks

Page 2

Page 2: Angular 2 - Routing Jax2016

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

Page 3: Angular 2 - Routing Jax2016

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

Page 4: Angular 2 - Routing Jax2016

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

Page 5: Angular 2 - Routing Jax2016

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

Page 6: Angular 2 - Routing Jax2016

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

Page 7: Angular 2 - Routing Jax2016

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

Page 8: Angular 2 - Routing Jax2016

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 {

[…]}

Page 9: Angular 2 - Routing Jax2016

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

Page 10: Angular 2 - Routing Jax2016

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;

}

}

Page 11: Angular 2 - Routing Jax2016

11

Links auf Routen mit Parameter

Page 28

<a [routerLink]="['/FlugEdit', {id: flug.id}]">Edit</a>

DEMO

Page 29

Page 12: Angular 2 - Routing Jax2016

12

ZUSAMMENFASSUNG

Page 53

Zusammenfassung

Page 54

Angular: Weite

VerbreitungKomponenten Data-Binding

DependencyInjection

Services Formulare

Validierung Routing

Page 13: Angular 2 - Routing Jax2016

13

[email protected]

SOFTWAREarchitekt.at

ManfredSteyer

Contact