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.
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.
- 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 email@example.com,12345678
- The User will navigate to the user dashboard if the username and password are firstname.lastname@example.org,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”