About me. Routing into the Sunset with Angular. Manfred Steyer SOFTWAREarchitekt.at Trainer & Consultant Focus: Angular Google Developer Expert (GDE)

Transcription

1 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

2 Contents Basics Child Routes Aux Routes Guards Lazy Loading Angular Router Page 4 2

3 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

4 Configuration const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flight-search', component: FlightSearchComponent }, { path: '**', redirectto: 'home' } ] Page 7 Configuration // imports: [ BrowserModule, HttpModule, FormsModule, RouterModule.forRoot(ROUTE_CONFIG) ], [ ] }) export class AppModule { For Root-Module } For Feature-Module: forchild Page 8 4

5 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

6 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

7 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

8 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

9 Aux Routes Aux-Routes Logo + Menu SPA Menu 2 Placeholder Named Placeholder Footer Page 23 9

10 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

11 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

12 Use Cases Partly autonomous parts of an application Norton Commander Style (CSS-based) Popups and Modals DEMO Page 29 12

13 Guards Page 30 What are Guard? Services Can prevent the Activation or Deactivation of a Route Page 31 13

14 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

15 Provider for Guards // providers: [ FlightEditGuard, AuthGuard ], [ ] }) export class AppModule { } Page 36 DEMO Page 37 15

16 Lazy Loading Module Structure AppModule SharedModule Root Module Feature Modules Shared Module Page 46 16

17 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

18 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

19 DEMO Preloading 19

20 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

21 DEMO Lazy Loading and Shared Modules Page 57 21

22 DEMO Page 58 Lazy Loading and Shared Modules AppModule AuthService SharedModule (lazy) FlightModule Page 59 22

23 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

24 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

25 Solution CoreModule AppModule (with Services) AuthModule (lazy) FlightModule (without Services) Page 66 Auth [ ], providers: [] }) export class AuthModule { } Page 67 25

26 Auth [ ], providers: [] }) export class AuthModule { static forroot(): ModuleWithProviders { return { ngmodule: AuthModule, providers: [AuthService, [ ]] } } } Page 68 DEMO Page 69 26

27 Conclusion Child Routes Guards Aux Routes Lazy Loading Downloads and Contact [mail] [blog] SOFTWAREarchitekt.at [twitter] 27