Introduction
Look at you! Our lecture today is on **Service** and **Dependency Injection**. We’ll implement these concepts together in *Up-mostly Angular*. I’ve combined these two topics in the same lecture, so let’s dive in.
Prerequisites
Before we proceed, there are some prerequisites. Like
- Classes and Objects
- Constructor
- Functions / Methods
- Angular Component
This article in Angular is about **Services** and **Dependency Injection**. Before understanding this, you should be familiar with the concept of injection. When studying the concepts of **classes** and **objects**, the concept of a **constructor** should be clear. Functions and methods should be well understood. Additionally, in Angular, we’ve used the concept of **components** in our previous article, so it’s important to have a strong grasp of that too. Understanding what Angular components are, their workflow, and how they’re implemented in an Angular application is crucial for grasping the concepts in this lecture.
Angular Components Overview
Now, let’s talk about an Angular application. The new concept of **components** in Angular means that the user interface (UI) of our Angular application is divided into multiple components. Using these multiple components, we create a complete UI for our Angular application. For instance, you might see an image here, some text there, and so on.
Like navbar, for example—it’s a separate component. It might contain the website’s name, its logo, etc. You might also use in some area with a picture and some text. There’s a heading, a few paragraphs—this too can be a separate component. Essentially, an Angular application is built using multiple components, each representing different parts of your UI. This is why your Angular application’s UI is made up of several components.
The Need for Services
Sometimes, these components perform common tasks, like displaying images in a view or accessing data. What happens is that the same task might be performed in multiple components—Component 1, Component 2, Component 3, and so on.
For instance, displaying an image might be needed in multiple components. However, performing the same task across multiple components can lead to a lot of code duplication, where you have to repeatedly copy and paste the same code.
To avoid this repetition, we use the concept of **Angular Services**. Services help us avoid writing the same code over and over again. By utilizing services, we can inject these common functionalities into our components, rather than duplicating the code.
Introduction to Service and Dependency Injection
Now, let’s discuss **Service and Dependency Injection**. The services we use in an Angular application can be injected into multiple components, making them dependencies of those components.
For example, if I have some data stored within a service—whether it’s a single value, data from a database, hard-coded data, a function, or a variable—this data can be injected into the components as needed.
What I have to do is inject it inside my component. Whenever we inject our service data into our component, we use the concept of dependency injection. But what is a service? A service is what I mentioned as the dependency, and this dependency is required by our component. So, when we call our service, essentially, what we’re doing is calling its object within our component class.
Why Combine Service and Dependency Injection?
When we inject a service inside, we use the concept of Dependency Injection. I decided to cover both Service and Dependency Injection in the same lecture because, if you watch other videos on YouTube, you’ll see that Service is often taught separately from Dependency Injection. However, these two concepts are interconnected in Angular.
Practical Example of Dependency Injection
Now, consider this example: I have a service that provides us with some data. This service is not limited to a single component; I can inject it into multiple components as well. For example, I have injected the same service into Component One, Component Two, and Component Three.
When you inject your service into multiple components, which concept do we use for that? We use Dependency Injection. This is the advantage of using a service. When we didn’t use services, we often had to duplicate code. One of our programming principles is DRY (Don’t Repeat Yourself). By using services, we can adhere to this principle.
Key Points About Angular Services
Now, let’s talk about Angular services. There are some key points about Angular services that we will discuss:
– **Purpose of a Service**: A service has a specific purpose. A service is nothing more than a class that has its own specific purposes and reasons. This ties into another programming principle: the Single Responsibility Principle. An Angular service is basically a class with a specific purpose, and that specific purpose will only be found within that class.
– **Features of a Service**: Services offer key features, including:
- **Data Sharing**: By using a service, we can share our data across multiple components. This means that the service now contains the data we need in our multiple components, allowing that data to be shared efficiently.
- **Application Logic**: You can write your application logic inside the service, which can then be used across multiple components. When the service provides us with some data, there will likely be some logic applied to that data.
- **External Interaction**: Services can be used for external interactions, such as connecting with our database. If we want to access it using our services, this is possible.
Objectives of Angular Services
Now, let’s look at the main objective of a service: organizing and sharing business logic, models, data, and functions across different components in an Angular application. The main purpose of an Angular service is to organize and share business logic when we implement it inside our application. If we have data, functions, or models that need to be shared across multiple components, we use a service to do so.
How Services Work
Services are pieces of code that are used to perform specific tasks. A service can contain values, functions, or a combination of both. This aligns with the Single Responsibility Principle, as each service has a specific task to perform.
In Angular, services can store themselves and the data they manage, which we then provide to our components through dependency injection. This approach prevents us from writing the same code multiple times across different sections of the application.
If you want to see from official documentation, click here “Angular Official Documentation“.
The Benefits of Using Services
As I mentioned earlier, services help avoid the need to repeatedly copy and paste code by centralisation logic that can be reused. You build your services once and then inject them into the necessary components. This is much better than duplicating code because it allows us to write services and inject them wherever needed within the application, specifically in the components that require them.
Dependency Injection in Angular
Now, an important point: services in Angular are widely implemented through dependency injection. This means when we implement services inside our components, we do so with the help of dependency injection. This concept should be very clear.
Naming Conventions for Services
Next, let’s talk about the naming convention for services. Like components, services also have a naming convention. For example, when you create a service file, it follows the pattern `filename.service.ts`. Just as you name component files with `.component.ts` and `.component.html`, service files have a similar structure.
Here’s an example: if you have a file named `filename`, the service file would be `filename.service.ts`.
Now, let’s move on to creating a service within an Angular application. First, navigate to `app.component.html`. Previously, we created two components: one for a student list and another for student data.
