#nested routing

When you are going through any website, have you ever wondered why and how you are redirected to the Home page and not the About Us page while clicking the home link? The whole mechanism that decides what should be displayed when the user takes action is termed routing. You might be familiar with the jargon if you have already worked with any front-end frameworks. Even if you haven’t, then that’s completely fine; because this blog will help you with steps to implement Angular routing and a Github repo also to come out of your ‘beginner zone.’  

Let’s get started with How Routing Works in Angular 11.

Table of Index

1. Goal

2. Github Repository for Angular routing example

3. Install Angular CLI

4. Create and configure the Angular project

5. Implement Basic Angular Routing in Angular Version 11

6. Nested Angular Routing and Angular Routing with Params in Angular v11

7. Conclusion

Goal

Before knowing how to build, let’s know what to build. Here’s the video of demo which we would be developing in this blog-

Github Repository for Angular v11 Routing Example

Click here to visit the Github Repository OR Open Terminal and run this command to clone the repositorygit clone https://github.com/architanayak/angular-routing.git

Okay, so now you’re aware of what are we developing, and as a bonus, you have a github repository to clone and play around with the demo. Let’s start the steps from installing the Angular project to implement the Angular routing in Angular version 11.

Install Angular CLI

Use the below-mentioned command to install the latest version of Angular CLI in your system. Globally-npm install -g @angular/cli Locally-npm install @angular/cli To verify the installation, run the following command-ng --version

The command will show you the version of Angular that you’ve just installed. You will see something like this on your terminal.

Create and Configure Angular project

After the installation is done, we will create a brand new Angular project and configure it accordingly.

⦿ Create an Angular project.

ng new demo-app

NOTE- You can name it whatever you want instead of demo-app Answer the series of questions, and you will successfully create your project. Make sure that you choose YES for – Would you like to add Angular routing?

Need support for routing and navigation in Angular 11?

Hire Angular developers from us to keep your Angular project up-to-date, implementing latest features to the stable release.

⦿ Configure your project

Project structure-  Generate components for Home, Marvel movies, and DC movies using these commands, respectively.ng g c home ng g c marvel-movies ng g c dc-movies

After running the commands, check your src/app. The project structure will look like this- src/app  NOTE- The project structure can vary according to demo.