1

Angular 2.0: Routing

Manfred Steyer

ManfredSteyer

Über mich …

Manfred Steyer

SOFTWAREarchitekt.at

Trainer & Consultant

GDE & MVP

Focus: Angular 2

Page 2

ManfredSteyer

2

Inhalt

Motivation

Konfiguration

Routing-Parameter

Child Routes

Aux Routes

Guards

Lazy Loading und Preloading

Shared Modules und Lazy Loading

Page 3

Motivation

SPAs bestehen aus einer Seite

Innerhalb dieser werden Bereiche ein- und

ausgeblendet --> "Logische Seiten", Routen

Url sollte auf Route hinweisen

Bookmarks

Back-Button

Router unterstützen hierbei

Page 6

3

Routing unter AngularJS

Page 12

Logo + Menü

Men

ü 2

Fußzeile

SPAPlatzhalter

Routing unter AngularJS

Page 13

Logo + Menü

Men

ü 2

Fußzeile

SPAPassagier-

Komponente

/FlugDemo#passagier

4

Routen via Hash-Fragment

/FlugDemo#passagier

Hash-Fragment wird nie zum Server gesendet

Page 18

Routen via History API

/FlugDemo/passagier

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 19

5

Parameter

/FlugDemo#passagier/7?showDetails=true

/FlugDemo/passagier/7?showDetails=true

Page 20

COMPONENT ROUTER

Page 22

6

Vorbereitung

ES6/TypeScript-Modul: @angular/router

(Alte Impl.: @angular/router-deprecated,

vormals: angular2/router)

Angular 2 Modul: RouterModule

Festlegen der Grenze zwischen URL und Route bei

History API:

<base href="/">

Oder: Token APP_BASE_HREF (@angular/common)

Page 26

Konfiguration

Page 27

const APP_ROUTES: Routes = [{

path: 'home',component: HomeComponent

},{

path: 'flug-suchen',component: FlugSuchenComponent

}}

7

Konfiguration

Page 28

const APP_ROUTES: Routes = [{

path: '',redirectTo: 'home',pathMatch: 'full'

},{

path: 'home',component: HomeComponent

},{

path: 'flug-suchen',component: FlugSuchenComponent

}}

Konfiguration

Page 29

export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG);

// app.module.ts@NgModule({

imports: [BrowserModule,HttpModule,FormsModule,AppRoutesModule

],[…]

})export class AppModule {}

Für Root-Module

Für Feature-Module: forChild

8

AppComponent

Page 30

@Component({selector: 'app',templateUrl: 'app/app.html'

})export class App {

[…]}

View von AppComponent

Page 31

<a [routerLink]="['/']">Home</a>

<a [routerLink]="['/flug-suchen']">Flug suchen</a>

<div>

<router-outlet></router-outlet>

</div>

9

ROUTEN MIT PARAMETER

Page 34

Konfiguration

Page 35

const APP_ROUTES: Routes = [

[…]

{path: 'flug-suchen',component: FlugSuchenComponent

},{

path: 'flug-edit/:id',component: FlugEditComponent

}}

10

Parameter auslesen

Page 36

export class FlugEditComponent {

public id: string;

constructor(

private route: ActivatedRoute) {

route.params.subscribe(p => {

this.id = p['id'];[…]

});

}[…]

}

Links auf Routen mit Parameter

Page 38

<a [routerLink]="['/flug-edit', flug.id]">Edit</a>

11

DEMO

Page 40

App

Home

Flug suchen

Passagier suchen

Passagier editieren

id

FlightBookingModule

AppModule

HIERARCHISCHES ROUTING

Page 46

12

Hierarchische Views

Page 47

Logo + Menü

Men

ü 2

Fußzeile

SPA

Platzhalter 1

Hierarchische Views

Page 48

Logo + Menü

Men

ü 2

Fußzeile

SPA

/FlugDemo/flugbuchen

Flu

gB

uch

en

-Ko

mp

on

en

te

13

Hierarchische Views

Page 49

Logo + Menü

Men

ü 2

Fußzeile

SPA

/FlugDemo/flugbuchen

Optionen

Platzhalter

Flu

gB

uch

en

-Ko

mp

on

en

te

Hierarchische Views

Page 50

Logo + Menü

Men

ü 2

Fußzeile

SPA

/FlugDemo/flugbuchen/passagier

Optionen

Passagier-

Komponente

Flu

gB

uch

en

-Ko

mp

on

en

te

14

Konfiguration

Page 51

const APP_ROUTES: Routes = [{

path: '',component: HomeComponent

},{

path: 'flug-buchen',component: FlugBuchenComponent,children: [

{path: 'flug-suchen',component: FlugSuchenComponent

},[…]

]}

];

DEMO

Page 52

App

Home

Flug buchen

Flug suchen

Flug editieren

Passagier suchen

15

Übung

Betrachten Sie das gezeigte Beispiel und führen Sie es aus

Erweitern Sie analog dazu Ihr Beispiel um mehrere Routen (z. B. Home, PassagierSuchen, PassagierEdit)

Erweitern Sie analog dazu Ihr Beispiel hierarchisches Routing

Page 54

AUX-ROUTES

Page 55

16

Aux-Routes

Page 56

Logo + Menu

Men

u 2

Footer

SPAPlaceholder

Named Placeholder

Aux-Routes

Page 57

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Named Placeholder

/FlightApp/flights

17

Aux-Routes

Page 58

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Info-Component

/FlightApp/flights(aux:info)

Aux-Routes

Page 59

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Modal-Component

/FlightApp/flights(aux:info/modal)

18

Aux-Routes

Page 60

Logo + Menu

Men

u 2

Footer

SPAFlight-Edit-

Component

Modal-Component

/FlightApp/flights(aux:info/modal)/edit/17

Modal-Component

Platzhalter definieren

Page 61

<router-outlet></router-outlet>

<hr>

<router-outlet name="aux"></router-outlet>

Standard-Name: primary

19

Konfiguration

Page 62

export const ROUTE_CONFIG: Routes = [

{

path: 'home',

component: HomeComponent

},

{

path: 'info',

component: InfoComponent,

outlet: 'aux'

},

{

path: 'dashboard',

component: DashboardComponent,

outlet: 'aux'

},

Aux-Routes routen

Page 63

<a [routerLink]="[{outlets: { aux: 'info' }}]">Activate Info

</a>

<a [routerLink]="[{outlets: { aux: null }}]">Deactivate Info

</a>

20

Programmatisch routen

Page 64

export class AppComponent {

constructor(private router: Router) {}

activateInfo() {this.router.navigate([{outlets: { aux: 'info' }}]);

}

deactivateInfo() {this.router.navigate([{outlets: { aux: null }}]);

}}

DEMO

Page 65

21

GUARDS

Page 66

Was sind Guards?

Services

Werden beim Aktivieren bzw. Deaktivieren

einer Route aktiv

Können Aktivierung und Deaktivierung

verhindern

Page 67

22

Guards

CanActivate canActivate

CanActivateChild canActivateChild

CanDeactivate<T> canDeactivate

Rückgabewert: boolean | Observable<boolean> | Promise<boolean>

Guards in der Konfiguration

Page 70

const APP_ROUTES: Routes = [{

path: '/flug-buchen',component: FlugBuchenComponent,canActivate: [AuthGuard],children: [

{path: 'flug-edit/:id',component: FlugEditComponent,canDeactivate: [FlugEditGuard]

},[…]

]]

Token

23

Provider für Guards

Page 71

export const ROUTER_PROVIDERS = [{ provide: FlugEditGuard, useClass: FlugEditGuard }{ provide: AuthGuard, useClass: AuthGuard }

];

Provider für Guards

Page 72

export const ROUTER_PROVIDERS = [FlugEditGuard,AuthGuard

];

// app.module.ts@NgModule({

providers: [ROUTER_PROVIDERS

],[…]

})export class AppModule {}

24

DEMO

Page 73

LAZY LOADING

Page 74

25

Warum Lazy Loading?

Module erst bei Bedarf nachladen

Verbesserung der Start-Performance

Page 75

Eigene Routen für Feature Module

Page 76

const FLUG_ROUTES = [{

path: '',component: FlugBuchenComponent,[…]

},[…]

}

export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);

26

Feature Module

Page 77

@NgModule({

imports: [

[…],

FlugRouterModule,

[…]

],

declarations: [

FlugBuchenComponent,

[…]

],

[…]

})

export class FlugModule {

}

Root Module mit Lazy Loading

Page 80

const APP_ROUTE_CONFIG: Routes = [

{

path: '',

redirectTo: 'home',

pathMatch: 'full'

},

{

path: 'home',

component: HomeComponent

},

{

path: 'flights',

loadChildren:

'[…]flight-booking.module#FlightBookingModule'

}

];

27

Konfiguration von Webpack

angular2-router-loader

Page 81

DEMO

Page 82

28

PRELOADING

Page 83

Idee

Eventuell später benötigte Module werden mit

freien Ressourcen vorgeladen

Wird das Modul später tatsächlich benötigt,

steht es augenblicklich zur Verfügung

Page 84

29

Preloading aktivieren

Page 85

export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });

LAZY LOADING UND SHARED SERVICES

Page 86

30

Recap

Page 87

Mehrfache „globale“ Services

Page 88

31

Shared Module

Page 89

@NgModule({[…],providers: []

})export class SharedModule {}

Shared Module

Page 90

@NgModule({[…],providers: []

})export class SharedModule {

static forRoot(): ModuleWithProviders {return {

ngModule: SharedModule,providers: [AuthService, […]]

}}

}

32

Lösung

Page 91

DEMO

Page 92

33

[mail] manfred.steyer@SOFTWAREarchitekt.at

[web] SOFTWAREarchitekt.at

[twitter] ManfredSteyer

Kontakt

ManfredSteyer