In this tutorial, we’ll learn about the Angular Router by building an Angular 11 example and will teach you everything you need to start using routing to build Single Page Applications with navigation, guards, resolvers, and animations.

We’ll learn how to use multiple outlets, redirect users from the empty path, use wild-card paths to implement 404 error pages and lazy load modules using the loadChildren() method.

Note: This tutorial works with all Angular 6, 7, 8, 9, 10 and the new Angular 11 version.

Learn Navigation and Routing Using the Angular 11 Router With Example

You’ll learn about:

• How to import the necessary Angular built-in APIs to implement component routing and navigation,
• How to create the routing module and import it in the main application module,
• How to add routes to components,
• How to use single and multiple router outlets,
• How and when to use wild card routes,
• How to use routerLink for navigation,
• How to  use nested and child routes,
• How to get route parameters,
• How to protect routes with guards,
• How to use resolvers.
• How to add animations,
• How to lazy-load modules using the loadChildren() method, etc.

These are the steps of first section:

• Step 1: Creating an Angular 11 Project
• Step 2: Understanding what the CLI Automatically Did For You
• Step 2.1: Adding <base href>
• Step 2.2: Creating a Routing Module
• Step 2.2: Importing the Router and Setting up Routing
• Step 2.3: Adding the Router-Outlet
• Step 2.4: Importing the Routing Module in the Main Application Module
• Step 3: Setting up a Service for Getting Data
• Step 4: Creating a Model
• Step 5: Creating Components
• Step 6: Implementing The Product List Component
• Step 7: Implementing the Product Details Component
• Step 8: Defining the Routes
• Step 10: Adding Navigation Links

Now let’s get started with Angular routing. In this section, we’ll learn the basic concepts behind routing in Angular 11. We’ll introduce the Angular Router and then we’ll proceed to create a simple single page application with Angular 11 that demonstrates the commonly used features of the router.

In more details, you’ll learn about:

• How to create Angular projects using Angular CLI v11,
• How to choose to have routing automatically setup and also how to manually add it in your project,
• How to create Angular services and emulate a backend server that you can use to fetch data using HttpClient,
• How to create Angular components,
• How to add component routing in your application using the router.

#angular #angular 11