Navigation in Angular

Navigation is the fifth chapter of the free Angular tutorial. Real applications have many screens: a product list, a product page, a cart, a settings area. The Angular Router gives each screen its own URL, so users can bookmark pages, share links and use the browser's Back button, while the app swaps screens without reloading.

What the lesson covers:

• Routing: What routing is and why apps need it, setting up provideRouter(), route configuration, <router-outlet />, routerLink, navigating from code with the Router service, redirect routes, route parameters such as /products/:id, query parameters such as ?category=audio, child routes for nested layouts, wildcard routes for "page not found", and lazy-loaded routes that download a page only when it is opened.

Every practice block runs a real Angular app with the router in your browser, in TypeScript or JavaScript. Click the links in the output to navigate between pages. The exercises check the page that appears after your change, so any correct answer passes.

Lessons in this section

1. Routing

   Mapping URLs to components with the Angular Router: route configuration, router-outlet, routerLink, programmatic navigation, redirects, route and query parameters, child, wildcard and lazy-loaded routes.