- author: procademy
How to Create and Use a Service in Angular
In the previous lecture, we learned about services in Angular and their purpose. Now, in this lecture, we will explore how to create a service and how to use it in our Angular application.
Setting up the Angular Project
To begin, let's open Visual Studio Code (VS Code) and create a new Angular project. In the project's source folder, you will find four components: Home, JavaScript, Angular, and React. The app component HTML file includes these four components using links. Each link has a click event bound to it. Upon clicking a link, the menu
property in the app component is updated accordingly, and the corresponding component is displayed on the webpage.
Displaying Alert Messages
Currently, when we click the "Subscribe" button in each component, nothing happens. In order to display an alert window with a custom message when the button is clicked for each respective component, we can implement an alert in the respective component class.
In the JavaScript component, we can bind the click event to the onSubscribe
method, which will display the message "You are subscribed to JavaScript course" using the alert
function. We can follow a similar approach for the Angular and React components.
Duplicated Code Issue
However, upon inspecting the component class files, we can see that we are repeating the same logic in each of the components. This violates the DRY (Don't Repeat Yourself) principle. For instance, the JavaScript component class has the same method with a different message, and the same is true for the Angular and React component classes.
Introducing a Service
To address this issue and adhere to the DRY principle, we can create a service to hold the common logic. By doing so, we can reuse the service method in multiple components.
In the app
folder, we will create a new folder called services
. Inside this folder, we will create a subscribe.service.ts
file. It is a convention to include "service" in the file name when creating a service in Angular.
Creating the Service Class
In the subscribe.service.ts
file, we will create and export a TypeScript class called SubscribeService
. Similar to components and directives, services do not require any decorators.
Inside the service class, we will create a method called onSubscribeClicked
that takes a title
parameter of type string. This method will display an alert message using the title
parameter passed in.
Using the Service in Components
Next, we will modify the JavaScript, Angular, and React component classes to utilize the SubscribeService
.
In the JavaScript component, we will import the SubscribeService
and create an instance of it. Then we can bind the onSubscribeClicked
method from the service to the button's click event.
We will follow a similar approach for the Angular and React components.
Reusability Achieved
By creating and using a service, we have eliminated the repetitive code in each component. The service class holds the common logic for displaying the alert messages, and we can easily reuse it in multiple components.
Conclusion: Services play a crucial role in Angular applications by providing a way to share data and functionality between different components. By creating services, we can adhere to the DRY principle and write cleaner, more maintainable code. In the next lecture, we will further explore advanced topics related to services in Angular. Stay tuned!
Using Services in JavaScript, Angular, and React Components
In this section, we will explore how to use a service called SubscribeService
in JavaScript, Angular, and React components.
Using the Service in a JavaScript Component
To begin, let's focus on implementing the SubscribeService
in a JavaScript component. Follow the steps below:
Open the JavaScript component file and locate the
onSubscribe
method.Instead of directly displaying an alert message, create an instance of the
SubscribeService
class within theunsubscribe
method.
letsubService=newSubscribeService();
Import the
SubscribeService
class from thesubscribe.service.js
file.Now, call the
onSubscribeClick
method on thesubService
instance and pass a parameter. For example, let's create acourseName
property as a string with the value "JavaScript" and pass it as an argument to theonSubscribeClick
method.
subService.onSubscribeClick(this.courseName);
- By making this change, the alert message will be displayed using the
onSubscribeClick
method instead of directly in theunsubscribe
method.
Incorporating the Service in an Angular Component
Next, let's see how the SubscribeService
can be utilized in an Angular component. Follow these steps:
Open the Angular component file and locate the
onSubscribe
method.Similar to the JavaScript component, replace the call to
alert
with the creation of an instance of theSubscribeService
class.
letsubService=newSubscribeService();
Import the
SubscribeService
class from thesubscribe.service.ts
file.Invoke the
onSubscribeClick
method on thesubService
instance and pass the desired argument. For instance, let's use thecourseName
property with the value "Angular" as the argument.
subService.onSubscribeClick(this.courseName);
- This modification allows the alert window to be displayed through the
onSubscribeClick
method in theSubscribeService
class.
Using the Service in a React Component
Lastly, let's explore how the SubscribeService
can be implemented in a React component. Follow these steps:
Locate the
onSubscribe
method in the React component file.Instead of directly calling the
alert
function, create an instance of theSubscribeService
class.
letsubService=newSubscribeService();
Import the
SubscribeService
class from thesubscribe.service.js
file.Invoke the
onSubscribeClick
method on thesubService
instance and pass the desired argument, such as thecourseName
property with the value "React".
subService.onSubscribeClick(this.courseName);
- By making this adjustment, the alert window will be displayed using the
SubscribeService
class in the React component.
Advantages of Using a Service
Utilizing a service offers multiple benefits when working with component classes. Rather than writing extensive code in the component class, a service enables us to encapsulate complex logic in a separate location. For instance, a service may contain additional functionality such as sending subscription emails or updating user profiles. By applying the principles of reusable code, we write the logic only once in the service class and call it in multiple components. This approach eliminates code repetition and enhances maintainability.
In conclusion, this section provided an overview of how to incorporate the SubscribeService
in JavaScript, Angular, and React components. By utilizing services, we can enhance code reuse and maintainability throughout our application. In the next section, we will delve into dependency injection, which allows Angular to automatically inject service instances into components, eliminating the need for manual instantiation.