Routing into the Sunset with Angular Manfred Steyer SOFTWAREarchitekt.at About me Manfred Steyer SOFTWAREarchitekt.at Trainer & Consultant Focus: Angular Google Developer Expert (GDE) Manfred Steyer Page 2 1
Contents Basics Child Routes Aux Routes Guards Lazy Loading Angular Router Page 4 2
Routing in Angular Logo + Menu SPA Menu 2 Placeholder Footer Page 5 Routing in Angular /FlightApp/passenger Logo + Menu SPA Menu 2 Passenger- Component Footer Page 6 3
Configuration const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flight-search', component: FlightSearchComponent }, { path: '**', redirectto: 'home' } ] Page 7 Configuration // app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, RouterModule.forRoot(ROUTE_CONFIG) ], [ ] }) export class AppModule { For Root-Module } For Feature-Module: forchild Page 8 4
AppComponent <a routerlink="/home">home</a> <a routerlink="/flight-search">flight Search</a> <div> <router-outlet></router-outlet> </div> Page 9 Hierarchical Routing Page 15 5
Hierarchical Routing Logo + Menu SPA Menu 2 Placeholder 1 Footer Page 16 Hierarchical Routing /FlightDemo/flight-booking Logo + Menu SPA Menu 2 Footer FlightBookingComponent Page 17 6
Hierarchical Routing /FlightDemo/flight-booking Logo + Menu SPA Menu 2 Options Placeholder Footer FlightBookingComponent Page 18 Hierarchical Routing /FlightDemo/flight-booking/passenger Logo + Menu SPA Menu 2 Optionen Passenger Component Footer FlightBookingComponent Page 19 7
Configuration const APP_ROUTES: Routes = [ { path: '', component: HomeComponent }, { path: 'flight-booking', component: FlightBookingComponent, children: [ { path: 'flight-search', component: FlightSearchComponent }, [ ] ] } ]; Page 20 DEMO App Home Flight Booking Other Stuff Flight Search Flight Edit Passenger Search Page 21 8
Aux Routes Aux-Routes Logo + Menu SPA Menu 2 Placeholder Named Placeholder Footer Page 23 9
Aux-Routes /FlightApp/flights Logo + Menu SPA Menu 2 Flight- Component Named Placeholder Footer Page 24 Aux-Routes /FlightApp/flights(aux:info) Logo + Menu SPA Menu 2 Flight- Component Info-Component Footer Page 25 10
Aux-Routes /FlightApp/flights(aux:info/modal) Logo + Menu SPA Menu 2 Flight- Component Modal-Component Footer Page 26 Aux-Routes /FlightApp/flights(aux:info/modal)/edit/17 Logo + Menu SPA Menu 2 Flight-Edit- Component Modal-Component Footer Page 27 11
Use Cases Partly autonomous parts of an application Norton Commander Style (CSS-based) Popups and Modals DEMO Page 29 12
Guards Page 30 What are Guard? Services Can prevent the Activation or Deactivation of a Route Page 31 13
Guards CanActivate canactivate CanActivateChild canactivatechild CanLoad canload CanDeactivate<T> candeactivate Result: boolean Observable<boolean> Promise<boolean> Guards and the Router Configuration const APP_ROUTES: Routes = [ { path: '/flight-booking', component: FlightBookingComponent, canactivate: [AuthGuard], children: [ { path: 'flight-edit/:id', component: FlightEditComponent, candeactivate: [FlightEditGuard] }, [ ] ] ] Page 34 14
Provider for Guards // app.module.ts @NgModule({ providers: [ FlightEditGuard, AuthGuard ], [ ] }) export class AppModule { } Page 36 DEMO Page 37 15
Lazy Loading Module Structure AppModule SharedModule Root Module Feature Modules Shared Module Page 46 16
Lazy Loading AppModule SharedModule Root Module Feature Modules Shared Module Page 47 Root Module with Lazy Loading const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadchildren: './[ ]flight-booking.module#flightbookingmodule' } ]; Page 48 17
Routes for Feature Module const FLIGHT_ROUTES = [ { path: '', component: FlightBookingComponent, [ ] }, [ ] } Page 49 Routes for Feature Module const FLIGHT_ROUTES = [ { path: '/bookings', component: FlightBookingComponent, [ ] }, [ ] } Url: /flights/bookings Page 50 Triggers Lazy Loading 18
DEMO Preloading 19
Idea Modules that might be needed later are loaded after (!) the start of the application When the module is actually needed, it is available immediately Page 54 Activating Preloading const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingstrategy: PreloadAllModules }); Page 55 20
DEMO Lazy Loading and Shared Modules Page 57 21
DEMO Page 58 Lazy Loading and Shared Modules AppModule AuthService SharedModule (lazy) FlightModule Page 59 22
Lazy Loading and Shared Modules AppModule AuthService SharedModule (lazy) FlightModule AuthService Page 60 Lazy Loading and Shared Modules AppModule AuthService SharedModule (lazy) FlightModule AuthService Page 61 23
Solution Global Providers like AuthService & Shell CoreModule AppModule SharedModule (lazy) FlightModule Only import CoreModule into AppModule! Page 62 Solution CoreModule AppModule AuthModule (lazy) FlightModule Page 65 24
Solution CoreModule AppModule (with Services) AuthModule (lazy) FlightModule (without Services) Page 66 Auth Module @NgModule({ [ ], providers: [] }) export class AuthModule { } Page 67 25
Auth Module @NgModule({ [ ], providers: [] }) export class AuthModule { static forroot(): ModuleWithProviders { return { ngmodule: AuthModule, providers: [AuthService, [ ]] } } } Page 68 DEMO Page 69 26
Conclusion Child Routes Guards Aux Routes Lazy Loading Downloads and Contact [mail] manfred.steyer@softwarearchitekt.at [blog] SOFTWAREarchitekt.at [twitter] 27