4/12/2018

1

ManfredSteyer

Routing into the Sunset with Angular

Manfred Steyer

SOFTWAREarchitekt.at

ManfredSteyer

About me…

• Manfred Steyer

• SOFTWAREarchitekt.at

• Trainer & Consultant

• Focus: Angular

• Google Developer Expert (GDE)

Page ▪ 2

Manfred Steyer

4/12/2018

2

ManfredSteyer

Contents

• Basics

• Child Routes

• Aux Routes

• Guards

• Lazy Loading

ManfredSteyer

Angular Router

Page ▪ 4

4/12/2018

3

ManfredSteyer

Routing in Angular

Page ▪ 5

Logo + Menu

Menu 2

Footer

SPAPlaceholder

ManfredSteyer

Routing in Angular

Page ▪ 6

Logo + Menu

Menu 2

Footer

SPA Passenger-Component

/FlightApp/passenger

4/12/2018

4

ManfredSteyer

Configuration

Page ▪ 7

const APP_ROUTES: Routes = [{

path: 'home',component: HomeComponent

},{

path: 'flight-search',component: FlightSearchComponent

},{

path: '**',redirectTo: 'home'

}]

ManfredSteyer

Configuration

Page ▪ 8

// app.module.ts@NgModule({

imports: [BrowserModule,HttpModule,FormsModule,RouterModule.forRoot(ROUTE_CONFIG)

],[…]

})export class AppModule {}

For Root-Module

For Feature-Module: forChild

4/12/2018

5

ManfredSteyer

AppComponent

Page ▪ 9

<a routerLink="/home">Home</a><a routerLink="/flight-search">Flight Search</a>

<div><router-outlet></router-outlet>

</div>

ManfredSteyer

Hierarchical Routing

Page ▪ 15

4/12/2018

6

ManfredSteyer

Hierarchical Routing

Page ▪ 16

Logo + Menu

Menu 2

Footer

SPA

Placeholder 1

ManfredSteyerPage ▪ 17

Logo + Menu

Menu 2

Footer

SPA

/FlightDemo/flight-booking

FlightBookingC

omponent

Hierarchical Routing

4/12/2018

7

ManfredSteyerPage ▪ 18

Logo + Menu

Menu 2

Footer

SPA

Options

Placeholder

FlightBookingC

omponent

/FlightDemo/flight-booking

Hierarchical Routing

ManfredSteyerPage ▪ 19

Logo + Menu

Menu 2

Footer

SPA

Optionen

PassengerComponent

FlightBookingC

omponent

/FlightDemo/flight-booking/passenger

Hierarchical Routing

4/12/2018

8

ManfredSteyer

Configuration

Page ▪ 20

const APP_ROUTES: Routes = [{

path: '',component: HomeComponent

},{

path: 'flight-booking',component: FlightBookingComponent,children: [

{path: 'flight-search',component: FlightSearchComponent

},[…]

]}

];

ManfredSteyer

DEMO

Page ▪ 21

App

Home

Flight Booking

Flight Search

Flight Edit

Passenger Search

Other Stuff

4/12/2018

9

ManfredSteyer

Aux Routes

ManfredSteyer

Aux-Routes

Page ▪ 23

Logo + Menu

Menu 2

Footer

SPAPlaceholder

Named Placeholder

4/12/2018

10

ManfredSteyerPage ▪ 24

Logo + Menu

Menu 2

Footer

SPA Flight-Component

Named Placeholder

/FlightApp/flightsAux-Routes

ManfredSteyerPage ▪ 25

Logo + Menu

Menu 2

Footer

SPA Flight-Component

Info-Component

/FlightApp/flights(aux:info)Aux-Routes

4/12/2018

11

ManfredSteyerPage ▪ 26

Logo + Menu

Menu 2

Footer

SPA Flight-Component

Modal-Component

/FlightApp/flights(aux:info/modal)Aux-Routes

ManfredSteyerPage ▪ 27

Logo + Menu

Menu 2

Footer

SPA Flight-Edit-Component

Modal-Component

/FlightApp/flights(aux:info/modal)/edit/17Aux-Routes

4/12/2018

12

ManfredSteyer

Use Cases

• Partly autonomous parts of an application

• „Norton Commander Style“

• (CSS-based) Popups and Modals

ManfredSteyer

DEMO

Page ▪ 29

4/12/2018

13

ManfredSteyer

Guards

Page ▪ 30

ManfredSteyer

What are Guard?

• Services

• Can prevent the Activation or Deactivation of a Route

Page ▪ 31

4/12/2018

14

ManfredSteyer

Guards

Result: boolean | Observable<boolean> | Promise<boolean>

CanActivate canActivate

CanActivateChild canActivateChild

CanLoad canLoad

CanDeactivate<T> canDeactivate

ManfredSteyer

Guards and the Router Configuration

Page ▪ 34

const APP_ROUTES: Routes = [{

path: '/flight-booking',component: FlightBookingComponent,canActivate: [AuthGuard],children: [

{path: 'flight-edit/:id',component: FlightEditComponent,canDeactivate: [FlightEditGuard]

},[…]

]]

4/12/2018

15

ManfredSteyer

Provider for Guards

Page ▪ 36

// app.module.ts@NgModule({

providers: [FlightEditGuard,AuthGuard

],[…]

})export class AppModule {}

ManfredSteyer

DEMO

Page ▪ 37

4/12/2018

16

ManfredSteyer

Lazy Loading

ManfredSteyer

Module Structure

Page ▪ 46

AppModule

…

…

…

SharedModule

Root Module Feature Modules Shared Module

4/12/2018

17

ManfredSteyer

Lazy Loading

Page ▪ 47

AppModule

…

…

…

SharedModule

Root Module Feature Modules Shared Module

ManfredSteyer

Root Module with Lazy Loading

Page ▪ 48

const APP_ROUTE_CONFIG: Routes = [{

path: 'home',component: HomeComponent

},{

path: 'flights',loadChildren:

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

];

4/12/2018

18

ManfredSteyer

Routes for Feature Module

Page ▪ 49

const FLIGHT_ROUTES = [{

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

},[…]

}

ManfredSteyer

Routes for Feature Module

Page ▪ 50

const FLIGHT_ROUTES = [{

path: '/bookings',component: FlightBookingComponent,[…]

},[…]

}

Url: /flights/bookings

Triggers Lazy Loading

4/12/2018

19

ManfredSteyer

DEMO

ManfredSteyer

Preloading

4/12/2018

20

ManfredSteyer

Idea

• Modules that might be needed later are loaded after (!) thestart of the application

• When the module is actually needed, it is availableimmediately

Page ▪ 54

ManfredSteyer

Activating Preloading

Page ▪ 55

const AppRoutesModule = RouterModule.forRoot(

ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });

4/12/2018

21

ManfredSteyer

DEMO

ManfredSteyer

Lazy Loading and Shared Modules

Page ▪ 57

4/12/2018

22

ManfredSteyer

DEMO

Page ▪ 58

ManfredSteyer

Lazy Loading and Shared Modules

Page ▪ 59

AppModule

FlightModule

SharedModuleincludes

includes (lazy)

includes

AuthService

4/12/2018

23

ManfredSteyer

Lazy Loading and Shared Modules

Page ▪ 60

AppModule

FlightModule

SharedModuleincludes

includes(lazy)

includes

AuthService

AuthService

ManfredSteyer

Lazy Loading and Shared Modules

Page ▪ 61

AppModule

FlightModule

SharedModuleincludes

includes(lazy)

includes

AuthService

AuthService

4/12/2018

24

ManfredSteyer

Solution

Page ▪ 62

AppModule

FlightModule

SharedModule

includes (lazy)

includes CoreModule

includes

includes

Only import CoreModule into AppModule!

Global Providers like AuthService & Shell

ManfredSteyer

Solution

Page ▪ 65

AppModule

FlightModule

AuthModule

includes (lazy)

CoreModule

4/12/2018

25

ManfredSteyer

Solution

Page ▪ 66

AppModule

FlightModule

AuthModule

includes (lazy)

includes (with Services)

CoreModule

includes

includes(without Services)

ManfredSteyer

Auth Module

Page ▪ 67

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

})export class AuthModule {}

4/12/2018

26

ManfredSteyer

Auth Module

Page ▪ 68

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

})export class AuthModule {

static forRoot(): ModuleWithProviders {return {

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

}}

}

ManfredSteyer

DEMO

Page ▪ 69

4/12/2018

27

ManfredSteyer

Conclusion

Child Routes

AuxRoutes

GuardsLazy

Loading

ManfredSteyer

Downloads and Contact

[mail] manfred.steyer@SOFTWAREarchitekt.at

[blog] SOFTWAREarchitekt.at

[twitter] ManfredSteyer