Angular Advanced Routing

Advanced Routing
LAURENT DUVEAU
JUNE 7TH, 2018

© LDEX, 2015Angular Vancouver Meetup, June 2018
Laurent Duveau
@LaurentDuveau
I am based in Montreal, Qc
Founder of the Angular Academy
2-day Angular Classroom Training
111 classes in 2 years!
Montreal, Quebec, Toronto, Ottawa ,
Vancouver, Calgary, Winnipeg,
London, Copenhagen, Helsinki…

ADVANCED ROUTING
Agenda
Lazy Loading
Preloading Modules
Router events
Diagnostic with traces
Auxiliary routes
Routes Transitions (Animations)
Guards
Resolve

Requirement
I assume you already know the basics of
Angular Routing…
… do you ?
4

LAZY LOADING
Lazy Loading ?

LAZY LOADING
Lazy load the Products Module!
const routes: Routes = [
{path: '', redirectTo:'/home', pathMatch:'full'},
{path: 'products', loadChildren:'./products/products.module#ProductsModule'},
{path: 'home', component: HomeComponent},
{path: 'contact', component: ContactComponent},
];
app.routing.ts

LAZY LOADING
Make its routes relative to ‘products/’
{ path: 'products', component: ProductListComponent },
{ path: 'products/:id', component: ProductDetailComponent }
];
products.routing.ts
{ path: '', component: ProductListComponent },
{ path: ':id', component: ProductDetailComponent }
];
products.routing.ts

LAZY LOADING
Do not import lazy loaded modules!
@NgModule({
imports:[BrowserModule, HttpModule, ProductsModule]
})
export class AppModule { }
app.module.ts
@NgModule({
imports:[BrowserModule, HttpModule]
})
app.module.ts

DEMONSTRATION
10

ROUTING
Preloading Modules!
Preload lazy-loadable modules in the
background while the user is interacting with
your application
11

ROUTING
Preloading Modules!
12

ROUTING
Preloading Modules!
13

ROUTING
Preloading Modules!
14

ROUTING
Preloading Modules!
15

ROUTING
Preloading Modules!
One built-in preloading strategy: PreloadAllModules
Create your Custom Preloading Strategy!
Class that implements PreloadingStrategy
16
@NgModule({
imports: [RouterModule.forRoot(routes,
{ preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
})
export class AppRoutingModule { }

DEMONSTRATION
17

ROUTING
Router Events
Event Description
NavigationStart Navigation starts
RoutesRecognized Router parses the URL and the routes are
recognized
RouteConfigLoadStart Before the Router lazy loads a route configuration
RouteConfigLoadEnd After a route has been lazy loaded
NavigationEnd Navigation ends successfully
NavigationCancel Navigation is canceled. This is due to a Route
Guard returning false during navigation
NavigationError Navigation fails due to an unexpected error

ROUTING
Router Events
20
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('NavigationEnd:', event);
}
});
}
}

DEMONSTRATION
21

ROUTING
Activate traces
23
@NgModule({
imports: [RouterModule.forRoot(routes,
{ enableTracing: environment.production ? false : true }
)]
})
app.module.ts

DEMONSTRATION
24

ROUTING
Auxiliary Routes
Navigation happens in a
<router-outlet></router-outlet>
We can have more than one!
So we can navigate to several routes at the same
time

ROUTING
Auxiliary Routes
Create a named router-outlet
Add a route to target this outlet
Link to navigate to the outlet
27
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
{path:'contact', component:ContactComponent, outlet:'popup'}
<a [routerLink]="[{outlets: {popup:['contact']}}]">Contact</a>

DEMONSTRATION
28

Routes Transitions
(Animations)
29

ROUTING
Animations
Define animations files
30
import { trigger, animate, transition, style } from '@angular/animations';
export const fadeInAnimation =
// trigger name for attaching this animation to an element using the
[@triggerName] syntax
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('.5s', style({ opacity: 1 }))
]),
]);
fade-in.animation.ts

ROUTING
Animations
Import BrowserAnimationsModule
Use component decorator
31
@Component({
selector: 'app-product-list’,
animations: [fadeInAnimation],
host: { '[@fadeInAnimation]': ''}
})
export class MyComponent {
animation to use
attached to host to run
animation when
component is activated

DEMONSTRATION
32

ROUTING
Routes Guards
CanActivate CanDeactivate
NavigationNavigation
Component
Decides if a route can be activated
- User logged-in ?
Decides if a route can be deactivated
- Form saved ?

ROUTING
Routes Guards
35
export class LoginRouteGuard implements CanActivate {
constructor(
private loginService: LoginService,
private router: Router) {}
canActivate() {
if(!this.loginService.isLoggedIn()) {
this.router.navigateByUrl("/login");
return false;
}
return true;
}
}
login-route-guard.service.ts
{ path: 'admin', component: AdminComponent, canActivate: [LoginRouteGuard] },
app-routing.module.ts

DEMONSTRATION
36

ROUTING
Route Resolver
Pre-fetching component data before navigating
Avoid a blank component while waiting for the
data to be returned from the server
Pre-fetch data from the server so it's ready the
moment the route is activated!
Create a service and implement the Resolve
interface

DEMONSTRATION
39

ROUTING
40
https://vsavkin.com

ROUTING
41
https://leanpub.com/router

Amazing Angular Classroom Training!
42

Thank you!

Angular Advanced Routing

More Related Content

What's hot

Similar to Angular Advanced Routing

More from Laurent Duveau

Recently uploaded

Angular Advanced Routing