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