1

The new Component Router for Angular 2 (and 1.x)

Manfred Steyer

ManfredSteyer

About me …

Manfred Steyer

SOFTWAREarchitekt.at

Trainer & Consultant

Angular

Server-Side .NET

Page 2

2

Contents

(Quick) Overview of Concepts and Scenarios

DEMO with Angular 2

Guards

DEMO

Aux-Routes

DEMO

Page 4

OVERVIEW

Page 5

3

What is the Component Router?

Page 6

New Router-Solution

Angular 2 and 1.x

ActivatingComponents

LazyLoading

HierarchicalRouting

Guards

Replacement for Lifecycle-Hooks

Short History

Page 7

• Core: Stable

• Moving Parts beyond the core

• New Router/ Component Router

• Breaking Changes: Almost find/replace

• Also back-ported to Angular 1.x

Angular 2 BETA: Dezember 2015

• Newest Router

Angular 2 RC 1: May 2016

• Newest New Router (Version 3)

• Back-porting to Angular 1.x planend

Angular 2 RC 2: June 2016

4

Routing

Page 8

Logo + Menu

Men

u 2

Footer

SPAPlaceholder

Routing with History API

Page 10

Logo + Menü

Men

ü 2

Fußzeile

SPAFlight

-Component

/FlightApp/flights

5

Routing with Parameter

Page 11

Logo + Menü

Men

ü 2

Fußzeile

SPAFlight-Edit-

Component

for Flight #17

/FlightApp/flights/17

Hierarchical Routing

Page 13

Logo + Menu

Men

u 2

Footer

SPA

Placeholder

6

Hierarchical Routing

Page 14

Logo + Menu

Men

u 2

Footer

SPA

/FlightApp/flight-bookingF

ligh

tBo

okin

g-C

om

po

ne

nt

Hierarchical Routing

Page 15

Logo + Menu

Men

u 2

Footer

SPA

/FlightApp/flight-booking

Options

Placeholder

Flig

htB

oo

kin

g-C

om

po

ne

nt

+ Child-Router

7

Hierarchical Routing

Page 16

Logo + Menu

Men

u 2

Fußzeile

SPA

/FlightApp/flight-booking/flights

Optionen

Flight-

Component

Flig

htB

oo

kin

g-C

om

po

ne

nt

DEMO

Page 17

8

GUARDS

Page 18

What are Guards?

Services

Can get other services via DI

Router triggers Guards before activating/

deactivating Components

Can prevent activation/ deactivation

Page 19

9

Guards

CanActivate canActivate

CanDeactivate<T> canDeactivate

Result: boolean | Observable<boolean>

Configuring Guards

Page 21

const APP_ROUTES: RouterConfig = [{

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

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

},[…]

]]

Token

10

Provider for Guards

Page 22

export const APP_ROUTER_PROVIDER = [provideRouter(APP_ROUTES),FlugEditGuard,AuthGuard

];

DEMO

Page 30

App

Home

Flight Booking

Passenger Search

Flight Search

Flight Edit

id

11

Übung

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

Erweitern Sie ihr Beispiel analog zum gezeigten Beispiel um Routing

Page 31

App

Home

FlightSearch

PassengerSearch

PassengerEdit

id

AUX-ROUTES

Page 33

12

Aux-Routes

Page 34

Logo + Menu

Men

u 2

Footer

SPAPlaceholder

Named Placeholder

Aux-Routes

Page 35

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Named Placeholder

/FlightApp/flights

13

Aux-Routes

Page 36

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Info-Component

/FlightApp/flights(aux:info)

Aux-Routes

Page 37

Logo + Menu

Men

u 2

Footer

SPAFlight-

Component

Modal-Component

/FlightApp/flights(aux:info/modal)

14

Aux-Routes

Page 38

Logo + Menu

Men

u 2

Footer

SPAFlight-Edit-

Component

Modal-Component

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

DEMO

Page 39

15

Summary

Component Router: New Routing-Solution for Angular

2 and AngularJS 1.x

Lazy Loading

Hierarchical Routing

Guards

Aux Routes

Page 40

manfred.steyer@SOFTWAREarchitekt.at

SOFTWAREarchitekt.at

ManfredSteyer

Contact