17:22
Angular 22 Tutorial for Beginners | Routing in Angular | Create Routes | Default & WildCard Routes
LEARNING PARTNER
Overview
This tutorial introduces Angular routing for beginners, explaining how to navigate between different components in a single-page application. It covers setting up routes, using `routerLink` for navigation, and `router-outlet` as a placeholder for rendered components. The video also demonstrates how to implement a default route for the initial page load and a wildcard route to handle undefined paths, preventing application errors. Finally, it shows how to visually indicate the active route using the `routerLinkActive` directive.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Angular applications are single-page applications (SPAs), meaning they load a single HTML page and dynamically update content.
- Routing is essential in SPAs to simulate multi-page navigation by displaying different components based on the URL.
- Angular's routing module is included by default, requiring no separate installation.
- Bootstrap is installed and configured in `angular.json` to style the navigation bar and other UI elements.
Understanding routing is fundamental for creating interactive and user-friendly Angular applications that allow users to navigate between different views or sections of the application without full page reloads.
Installing Bootstrap via `npm install bootstrap` and adding its CSS path to the `angular.json` file's styles array.
- Routes are defined in the `app-routing.module.ts` file as an array of route objects.
- Each route object has a `path` property (the URL segment) and a `component` property (the component to render for that path).
- The `routerLink` directive is used in HTML templates instead of `href` to enable navigation between routes.
- The `router-outlet` directive acts as a placeholder in the main component's template where the routed component will be displayed.
This setup allows you to map specific URLs to specific components, enabling dynamic content rendering and user navigation within your Angular application.
Defining a route like `{ path: 'data-binding', component: DataBindingComponent }` and using `<a routerLink="/data-binding">Data Binding</a>` in the template, with `<router-outlet></router-outlet>` to display the `DataBindingComponent`.
- A default route is created by setting the `path` to an empty string (`''`) and using `redirectTo` to specify which component to load initially.
- The `pathMatch: 'full'` property is crucial for the default route to ensure it only matches when the URL is exactly empty.
- A wildcard route, defined with `path: '**'`, acts as a catch-all for any URL that doesn't match existing routes.
- Wildcard routes are typically used to display a 'Not Found' component, preventing application errors when users access invalid URLs.
Default routes provide a seamless user experience by loading a primary view upon application startup, while wildcard routes gracefully handle errors and unexpected navigation attempts.
Setting up a default route `{ path: '', redirectTo: '/data-binding', pathMatch: 'full' }` and a wildcard route `{ path: '**', component: NotFoundComponent }`.
- The `routerLinkActive` directive is used to add a CSS class to an element when its associated `routerLink` is active.
- This directive helps users visually identify the currently selected or active navigation item.
- You specify the CSS class name to be applied (e.g., 'active') as a value to the `routerLinkActive` directive.
- This class can then be styled in CSS to provide visual feedback, such as changing the background color or text style.
Visually indicating the active route enhances user experience by providing clear feedback on their current location within the application.
Adding `routerLinkActive="active"` to an anchor tag like `<a routerLink="/variables" routerLinkActive="active">Variables</a>`, where the 'active' class is defined in the CSS to highlight the link.
Key takeaways
- Routing in Angular enables navigation between components in an SPA by mapping URL paths to specific components.
- Use `routerLink` for navigation and `router-outlet` as the rendering point for routed components.
- Configure routes in the `app-routing.module.ts` file with `path` and `component` properties.
- Implement a default route (`path: ''`, `redirectTo`, `pathMatch: 'full'`) for the initial application view.
- Utilize wildcard routes (`path: '**'`) to handle undefined paths and display a 'Not Found' component.
- The `routerLinkActive` directive visually highlights the currently active navigation link by applying a specified CSS class.
Key terms
RoutingSingle Page Application (SPA)RoutePathComponentrouterLinkrouter-outletDefault RouteWildcard RouterouterLinkActive
Test your understanding
- What is the primary purpose of routing in an Angular single-page application?
- How does the `router-outlet` directive function within an Angular application's routing setup?
- What steps are necessary to define a default route that loads a specific component when the application first launches?
- Why is it important to implement a wildcard route in an Angular application, and how is it configured?
- How can you visually indicate to the user which navigation link corresponds to the currently displayed component using Angular directives?