10. Angular Routing

This angular chapter will “highlight” (cover) the core or important routing concepts starting from the basic as follows: Router Imports In Angular, the Router is an optional feature or a service that represents a particular component (section) view for the given URL. For example, the URL localhost:4200/dashboard will represent the DashboardComponent. However it is not a part of the Angular core, but it has its own […]

What is Custom Route Matches? In Angular, the custom route matches allow you to define a “specific condition” under which certain routes are matched. This is useful while controlling the application navigation when the URLs are more complicated. Creating Custom Route Matches The router in Angular supports a powerful matching strategy that you can use to help users navigate various sections […]

What is Single-Page Application? A single-page Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. The routing features in Angular allow developers to develop and design a single-page application. Create a Sample Application Let’s create a sample Angular application with two different […]

What is Navigation? Navigation in web applications refers to the process of moving (navigating) through different pages or views within an application. It allows users to interact with various components, access different sections, and use application features. Let’s consider a simple login page in an application. On this login page, users can see links for Sign Up and Forgot […]

Nested Routes in Angular In Angular, nested routes are used to define hierarchical routes for components. This technique allows you to load a specific child component only when its parent component is loaded. For example, if you want to load all the items within the ItemsComponent, you can use a route like /items/item-lists/, where the “item-list” is nested within the […]

Wildcard Routes in Angular In Angular, wildcard routes are used to match any path, whether it is valid or not. If the user navigates to an “invalid” or “undefined URL”, you can use a wildcard route to catch that URL and navigate to a specified fallback component, such as Home, Login, or PageNotFound, depending on your application’s needs. Wildcard routes are defined using […]

Dynamic Routes in Angular In Angular, dynamic routes are used to load a specific data or entity within a component based on the route parameters. For example, in a streaming platform having multiple videos, the application could use dynamic routes to load each video within the VideosComponent by passing the video ID as a route parameter. This way, each time a […]

What is Routing? In web development, routing is a technique for navigating between different views or pages in a an application. It allows the application to determine which page to display based on the URL requested by the user. Routing in Angular In Angular, routing is used to develop a single-page applications (SPAs). Although, an SPA does not support […]