Angular Advanced Routing

Description

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

Prerequisites

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 admin@gmail.com,12345678
•  The User will navigate to the user dashboard if the username and password are user@gmail.com,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”