Angular Advanced Routing

Level : Beginner
Mentor: Shailendra Chauhan
Type : GuidedLab
Points : 10
Duration : 1:15:00

Lab Details


In this guide, you will learn that how to work with the routing mechanism while implementing a real-time Angular application that follows the advanced routing configuration while having the module-based routing approach such as admin and user modules.

Lab Objective

Upon completion of this lab, you will be able to:

  •  How to create the component and models
  •  How does the routing work in Angular
  •  Configuration of advanced routing configuration
  •  Work with the Angular services


You should have a basic understanding of components and a knowledge of TypeScript fundamentals such as class, object, and constructor along with the basic knowledge of routing.

Lab Requirements

  •  Create an Empty Angular app.
  •  Create a Login Page for Login as User and Admin
  •  After providing login details (username and password)
  •  The admin will navigate to the admin dashboard if the username and password are,12345678
  •  The User will navigate to the user dashboard if the username and password are,12345678
  •  Create three modules Public, Admin, and User.
  •  Use lazy loading to define the routes for modules.
  •  Both modules (admin and user) will have two pages – dashboard and profile pages.
  •  Create a separate layout for each module.
  •  Add the Logout link and upon clicking redirect to the logout page and show the message: “You have logout successfully”
Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 200+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF

To get full access to all courses

Still have some questions? Let's discuss.
Accept cookies & close this