Angular 6 – Routing and Navigation (with Child Routes & Route Auth Guards)

Learn to code routing and navigation in angular 6, which covers pretty much everything about routes, child routes and route auth guard.

Source Code:
https://github.com/codewithsrini/Angular-6-Routing-and-Navigation-with-Real-World-Sample

Time Stamp:
1:26 – Importing Router Modules (for Routing and Navigation)
2:02 – RouterModule.forRoot()
2:54 – Creating a Project Management Application
3:28 – Creating Components and Modules
4:44 – Changing routes variable to appRoutes
4:58 – Configuring routes and URL to a path
6:55 – Wildcard characters for page not found
7:03 – Creating 404 Error page Component
7:20 – Order of the Route
8:17 – Router Outlet Directive
8:45 – Setting the Router Links in our app component template
9:04 – Setting the Router Link
9:10 – Setting the routerLinkActive
9:34 – Adding bootstrap 4 in our application
9:57 – Creating navigation menu in Bootstrap 4
10:33 – Router State – ActivatedRouter
10:40 – Designing the Dashboard page in Bootstrap 4
12:33 – Why have a app-routing.module.ts (Routing Module)?
13:31 – Creating Project and Project List Component
14:11 – Configuring child routes for Project module
15:29 – Creating Project Details Component
16:17 – Exporting project module for lazy loading
16:48 – Routes loadChildren for Lazy Loading
17:45 – Lazy Loading our Project Module
19:04 – Creating Service for your Project
19:36 – Data Model for our projects
20:30 – Adding methods to Project Service
22:15 – Styling Project List
29:40 – Creating Auth Module for Route Auth Guards
33:20 – Creating an Authentication (i.e, login)
39:25 – Implementing and Generating Route Auth Guards
44:50 – How to add optional parameters in route
49:08 – Summary

ALSO READ  Angular 6: Components (Angular Building Blocks)