Introduction to Angular Routing
We are going to start with the concept of Angular Routing. Look, routing is a very important concept in Angular. Whenever we create an Angular application—especially a professional one—the concept of routing is integral. If I say that routing is used in 99% of Angular applications, it wouldn’t be an exaggeration. It is the most important concept, and in this lecture, we will cover the introduction to routing.
Importance of Routing
We are going to explore a lot of aspects related to routing in upcoming lectures. Since this is not a small topic, but a significant one, it will be covered in this.
Let’s start our lecture. So, read the “Introduction to Angular Routing.” Let me explain the concept of routing with a simple example.
Understanding Routing with Examples
If you enter a website, you’ll notice the fact that there are numerous navigation links, such as the main screen, about page, gallery, services, and contact page. For instance, if you click the “About” link, the About page will appear. When you click the “Contact” link, a contact page appears. But have you ever wondered why, when you click the “About” link, the contact page does not open? You’ve not observed that happen, right? When you click the “About” link, only the About page is displayed, not the contact page. Similarly, clicking on the “Services” page opens the services page rather than the About page.
This is because navigation is done in the back. It ensures that once you click on the “About” link, the URL changes, and the About page loads. Similarly, when you click the “Contact” link, the contact page opens. This capability is achieved by routing.
Learn Web Front-end Framework “AngularJs”
Routing Across Different Frameworks
the concept of routing is not only in Angular; it’s also present in many other frameworks like React, Laravel, ASP.NET, and more. So, before diving into Angular routing, it’s essential to understand the general concept of routing. Once you grasp this, understanding Angular routing will be much easier.
Detailed Explanation of Routing
Now, let’s clarify the concept of routing with some examples. Then, we will move on to Angular Routing. So, what is routing? When you click on a link, a URL is generated. You must have seen the URL displayed in the address bar of your browser. Whenever you click on a link or button, the URL changes. When the URL changes or parameters are added to the URL, a corresponding page, view, or component is displayed.
HTTP Methods and Routing
This means that when you enter a URL into your browser’s URL bar, the routing defines both the code to run and the component or page to display. You may have encountered HTTP methods like GET, POST, and PUT. These methods are used within routing as well. For example, if we need to submit data, we use a POST request. These HTTP methods work with the URL to determine which code to execute and which component to display. This concept of routing is not only in Angular routing but also in many other frameworks and languages.
Example URL and Routing Behaviour
Now, let’s take a look at an example URL: example.com. Before the slash, you might see `index.html` written there. I want to request a page, specifically the index page. So, what happens? Whenever you see a URL like `index.html`, no page, view, or component is immediately displayed.
Instead, the code associated with that URL is executed, which results in displaying the page specified by the URL. For instance, if you request the index page by typing `index.html` in the URL, the routing code executes to handle this request and displays the index page.
In routing, we define what happens when a particular URL is accessed. For example, if the URL contains `index.html`, our routing code will direct the application to display the index page. Similarly, if the URL is `about.html`, the routing code will ensure that the about page is displayed.
Angular Routing Mechanism
The routing mechanism in Angular allows us to map URLs to specific components or views. If a URL with `index.html` is requested, the routing code will display the index page. If `about.html` is requested, it will display the about page. This functionality prevents scenarios where both the index and about pages are displayed simultaneously for a single request, which would not make sense.
Angular Routing Features
In Angular, components contain HTML templates. To navigate from one component to another, you use Angular routing. This routing makes sure that movement between components does not force the full page to reload, as opposed to standard HTML/CSS web pages, where clicking a link reloads the page before moving on to the next page.
One-Page Applications
Angular is used to create apps with one page (SPAs) in which the page does not reload during navigation. Instead, Angular’s routing system navigates between modules without reloading the page. The Angular Router component is implemented in Angular applications to implement routing functionality.
Angular Router Overview
When you use the ‘ng new’ method to build a new Angular application, you are asked whether you want to use routing. If you choose “yes,” the necessary routing classes and configuration are automatically set up for you. We haven’t used routing in any of our previous projects because it was unnecessary. However, once we begin working with routing, we must guarantee that all routing components are introduced to our project.
Features of Angular Routing
Angular Routing is an essential part of the Angular platform. It enables developers to create applications with one page (SPAs) with various states and views by utilizing routes and components. This module allows client-side navigation and routing across components, allowing you to switch between them without having to reload the entire page.
Here’s what Angular Router offers:
– **Single-Page Applications:** Angular Routing enables the creation of SPAs where the page doesn’t reload when navigating between different views or components.
– **Multiple States and Views:** You can define various states and views within your application and navigate between them.
– **Client-Side Navigation:** Angular Router handles navigation on the client side, making the application more responsive.
If you want to see from official documentation, click here “Angular Official Documentation“.
Upcoming Features
The Angular Router module is maintained and built by the same team behind Angular development. It provides several key features that we’ll cover in upcoming videos:
- **Components and Routes:** You’ll use components and define routes with URL paths. For example, if a URL is clicked, the Angular Router will display the corresponding component, such as the about component for `/about` or the index component for `/index`.
- **Router Outlet:** This is a placeholder in the template where routed components are displayed.
- **Route Matching Strategies:** Angular Router uses various strategies to match routes to components.
- **Route Parameters:** When creating routes, you can include parameters.
- **Query Parameters:** These are additional URL parameters that can serve a variety of purposes.
- **Route Guards:** These are used to protect routes and control access based on conditions.
- **Route Resolvers:** These are used to fetch data before a route is activated.
- **Router Links:** These work similarly to traditional HTML `href` attributes but are used within Angular templates to navigate between routes.
Hope you enjoy the article.
