Presentation for Angular Hack Day 2019 in Melbourne for Angular routing, presented by Jernej Kavka (JK). GitHub URL: https://github.com/jernejk/AngularServices-Routing

1. Enterprise Software Development
Join the Conversation #AngularHackDay @jernej_kavka

2. Melbourne - Angular Hack Day 2019
An introduction to
Routing in Angular
Join the Conversation #AngularHackDay @jernej_kavka

3. Senior Software Architect at SSW
Jernej Kavka (JK)
@Jernej_kavka
https://github.com/jernejk
https://jkdev.me
https://opencollective.com/jernej-kavka
Focusing on .NET Core, Cognitive Services and ML.NET
Join the Conversation #AngularHackDay @jernej_kavka

4. Get started
Navigate with arguments
Navigate to a new page
Table of
Contents

5. Get started
• Create Angular application with routing
• Use ng new
• Angular CLI will ask you if you want routing
Join the Conversation #AngularHackDay @jernej_kavka

6. Add app-routing.module.ts in src folder
Manually enabling routing
Join the Conversation #AngularHackDay @jernej_kavka

7. Manually enabling routing
In app.module.ts, update as follows
Join the Conversation #AngularHackDay @jernej_kavka

8. Manually enabling routing
Lastly, in app.module.html, update as follows
Join the Conversation #AngularHackDay @jernej_kavka

9. Navigate to a new page
• Create new component
ng generate component Democracy
• Add a route in app-routing.module.ts
{ path: 'democracy', component: DemocracyComponent }
• Add a link in the menu in app.component.html
<a [routerLink]="'democracy'">Who will sit on Iron Throne?</a>
Join the Conversation #AngularHackDay @jernej_kavka

10. The Game of Thrones
Join the Conversation #AngularHackDay @jernej_kavka
?

11. Navigate with arguments
• Add routing to Iron Throne page
• { path: 'iron-throne/:id', component: IronThroneComponent }
• Add a link to Irone Throne page
• <a [routerLink]="['/iron-throne', character.id]">
• Get the character ID
• In constructor: private route: ActivatedRoute
• const id = this.route.snapshot.paramMap.get('id');
• Display the character as the rightful ruler
Join the Conversation #AngularHackDay @jernej_kavka

12. Other ways to navigate
• In HTML:
• <a [routerLink]="['/iron-throne', character.id]">
• In Code:
• In constructor: private router: Router
• this.router.navigate(['/iron-throne’, character.id]);
Join the Conversation #AngularHackDay @jernej_kavka

13. Learn more about Routing:
angular.io/guide/router

14. Thank you!
info@ssw.com.au
www.ssw.com.au
Sydney | Melbourne | Brisbane