SlideShare a Scribd company logo
1 of 43
Download to read offline
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…
© LDEX, 2015Angular Vancouver Meetup, June 2018
ADVANCED ROUTING
Agenda
Lazy Loading
Preloading Modules
Router events
Diagnostic with traces
Auxiliary routes
Routes Transitions (Animations)
Guards
Resolve
© LDEX, 2015Angular Vancouver Meetup, June 2018
Requirement
I assume you already know the basics of
Angular Routing…
… do you ?
4
Lazy Loading
5
© LDEX, 2015Angular Vancouver Meetup, June 2018
LAZY LOADING
Lazy Loading ?
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
LAZY LOADING
Make its routes relative to ‘products/’
const routes: Routes = [
{ path: 'products', component: ProductListComponent },
{ path: 'products/:id', component: ProductDetailComponent }
];
products.routing.ts
const routes: Routes = [
{ path: '', component: ProductListComponent },
{ path: ':id', component: ProductDetailComponent }
];
products.routing.ts
© LDEX, 2015Angular Vancouver Meetup, June 2018
LAZY LOADING
Do not import lazy loaded modules!
@NgModule({
imports:[BrowserModule, HttpModule, ProductsModule]
})
export class AppModule { }
app.module.ts
@NgModule({
imports:[BrowserModule, HttpModule]
})
export class AppModule { }
app.module.ts
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
10
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Preloading Modules!
Preload lazy-loadable modules in the
background while the user is interacting with
your application
11
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Preloading Modules!
12
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Preloading Modules!
13
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Preloading Modules!
14
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Preloading Modules!
15
© LDEX, 2015Angular Vancouver Meetup, June 2018
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 { }
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
17
Router Events
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
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);
}
});
}
}
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
21
Diagnostic with traces
22
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
Activate traces
23
@NgModule({
imports: [RouterModule.forRoot(routes,
{ enableTracing: environment.production ? false : true }
)]
})
export class AppModule { }
app.module.ts
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
24
Auxiliary Routes
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
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>
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
28
Routes Transitions
(Animations)
29
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
32
Guards
© LDEX, 2015Angular Vancouver Meetup, June 2018
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 ?
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
36
Route Resolver
37
© LDEX, 2015Angular Vancouver Meetup, June 2018
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
© LDEX, 2015Angular Vancouver Meetup, June 2018
DEMONSTRATION
39
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
40
https://vsavkin.com
© LDEX, 2015Angular Vancouver Meetup, June 2018
ROUTING
41
https://leanpub.com/router
© LDEX, 2015Angular Vancouver Meetup, June 2018
Amazing Angular Classroom Training!
42
© LDEX, 2015Angular Vancouver Meetup, June 2018
Thank you!

More Related Content

What's hot

Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariSurekha Gadkari
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack IntroductionAnjali Chawla
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectJadson Santos
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Edureka!
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of AngularKnoldus Inc.
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming WebStackAcademy
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questionsGoa App
 
Angular 8
Angular 8 Angular 8
Angular 8 Sunil OS
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University
 
Introduction to Spring Boot!
Introduction to Spring Boot!Introduction to Spring Boot!
Introduction to Spring Boot!Jakub Kubrynski
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Eyal Vardi
 
Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of SignalsCoding Academy
 

What's hot (20)

Angular
AngularAngular
Angular
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
Angular from Scratch
Angular from ScratchAngular from Scratch
Angular from Scratch
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
 
Building blocks of Angular
Building blocks of AngularBuilding blocks of Angular
Building blocks of Angular
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
Angular interview questions
Angular interview questionsAngular interview questions
Angular interview questions
 
Angular
AngularAngular
Angular
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
Angular Lifecycle Hooks
Angular Lifecycle HooksAngular Lifecycle Hooks
Angular Lifecycle Hooks
 
Angular Directives
Angular DirectivesAngular Directives
Angular Directives
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Introduction to Spring Boot!
Introduction to Spring Boot!Introduction to Spring Boot!
Introduction to Spring Boot!
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
Angular
AngularAngular
Angular
 
Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
 

Similar to Advanced Angular Routing Techniques

Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJSLaurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!Laurent Duveau
 
Introduction to Angular2
Introduction to Angular2Introduction to Angular2
Introduction to Angular2Ivan Matiishyn
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6William Marques
 
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018Matt Raible
 
Edpuzzle - Migrating to React progressively but painlessly
Edpuzzle - Migrating to React progressively but painlesslyEdpuzzle - Migrating to React progressively but painlessly
Edpuzzle - Migrating to React progressively but painlesslySantiago Herrero Bajo
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developersMikhail Kuznetcov
 
Angular js 2
Angular js 2Angular js 2
Angular js 2Ran Wahle
 
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...LogeekNightUkraine
 
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubhamAngular2RoutingSetupByShubham
Angular2RoutingSetupByShubhamShubham Verma
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Naveen Pete
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Frost
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework Yakov Fain
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationThibault Even
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JSBipin
 
To Microservices and Beyond
To Microservices and BeyondTo Microservices and Beyond
To Microservices and BeyondMatt Stine
 
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreBeyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreAri Lerner
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2codeandyou forums
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMrbl002
 

Similar to Advanced Angular Routing Techniques (20)

Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
 
What is your money doing?
What is your money doing?What is your money doing?
What is your money doing?
 
Introduction to Angular2
Introduction to Angular2Introduction to Angular2
Introduction to Angular2
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
 
Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018Bootiful Development with Spring Boot and Angular - RWX 2018
Bootiful Development with Spring Boot and Angular - RWX 2018
 
Edpuzzle - Migrating to React progressively but painlessly
Edpuzzle - Migrating to React progressively but painlesslyEdpuzzle - Migrating to React progressively but painlessly
Edpuzzle - Migrating to React progressively but painlessly
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
 
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...
Pavlo Zhdanov "Java and Swift: How to Create Applications for Automotive Head...
 
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubhamAngular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
Meetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son applicationMeetup SkillValue - Angular 6 : Bien démarrer son application
Meetup SkillValue - Angular 6 : Bien démarrer son application
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
 
To Microservices and Beyond
To Microservices and BeyondTo Microservices and Beyond
To Microservices and Beyond
 
Beyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and moreBeyond AngularJS: Best practices and more
Beyond AngularJS: Best practices and more
 
Understand routing in angular 2
Understand routing in angular 2Understand routing in angular 2
Understand routing in angular 2
 
Bridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEMBridging the Gap: Single-Page Apps and AEM
Bridging the Gap: Single-Page Apps and AEM
 

More from Laurent Duveau

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Laurent Duveau
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Laurent Duveau
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular AppLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersLaurent Duveau
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersLaurent Duveau
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??Laurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]Laurent Duveau
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Laurent Duveau
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Laurent Duveau
 

More from Laurent Duveau (20)

Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
 
Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014Back from Xamarin Evolve 2014
Back from Xamarin Evolve 2014
 
Windows App Studio
Windows App StudioWindows App Studio
Windows App Studio
 
Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]Windows 8: Live tiles, badges et notifications toasts [french]
Windows 8: Live tiles, badges et notifications toasts [french]
 

Recently uploaded

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 

Recently uploaded (20)

Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.How Tech Giants Cut Corners to Harvest Data for A.I.
How Tech Giants Cut Corners to Harvest Data for A.I.
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 

Advanced Angular Routing Techniques

  • 2. © 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…
  • 3. © LDEX, 2015Angular Vancouver Meetup, June 2018 ADVANCED ROUTING Agenda Lazy Loading Preloading Modules Router events Diagnostic with traces Auxiliary routes Routes Transitions (Animations) Guards Resolve
  • 4. © LDEX, 2015Angular Vancouver Meetup, June 2018 Requirement I assume you already know the basics of Angular Routing… … do you ? 4
  • 6. © LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Lazy Loading ?
  • 7. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 8. © LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Make its routes relative to ‘products/’ const routes: Routes = [ { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent } ]; products.routing.ts const routes: Routes = [ { path: '', component: ProductListComponent }, { path: ':id', component: ProductDetailComponent } ]; products.routing.ts
  • 9. © LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Do not import lazy loaded modules! @NgModule({ imports:[BrowserModule, HttpModule, ProductsModule] }) export class AppModule { } app.module.ts @NgModule({ imports:[BrowserModule, HttpModule] }) export class AppModule { } app.module.ts
  • 10. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 10
  • 11. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! Preload lazy-loadable modules in the background while the user is interacting with your application 11
  • 12. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! 12
  • 13. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! 13
  • 14. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! 14
  • 15. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! 15
  • 16. © LDEX, 2015Angular Vancouver Meetup, June 2018 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 { }
  • 17. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 17
  • 19. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 20. © LDEX, 2015Angular Vancouver Meetup, June 2018 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); } }); } }
  • 21. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 21
  • 23. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Activate traces 23 @NgModule({ imports: [RouterModule.forRoot(routes, { enableTracing: environment.production ? false : true } )] }) export class AppModule { } app.module.ts
  • 24. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 24
  • 26. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 27. © LDEX, 2015Angular Vancouver Meetup, June 2018 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>
  • 28. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 28
  • 30. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 31. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 32. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 32
  • 34. © LDEX, 2015Angular Vancouver Meetup, June 2018 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 ?
  • 35. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 36. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 36
  • 38. © LDEX, 2015Angular Vancouver Meetup, June 2018 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
  • 39. © LDEX, 2015Angular Vancouver Meetup, June 2018 DEMONSTRATION 39
  • 40. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING 40 https://vsavkin.com
  • 41. © LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING 41 https://leanpub.com/router
  • 42. © LDEX, 2015Angular Vancouver Meetup, June 2018 Amazing Angular Classroom Training! 42
  • 43. © LDEX, 2015Angular Vancouver Meetup, June 2018 Thank you!