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:

1. Open the JavaScript component file and locate the onSubscribe method.

2. Instead of directly displaying an alert message, create an instance of the SubscribeService class within the unsubscribe method.

letsubService=newSubscribeService();

3. Import the SubscribeService class from the subscribe.service.js file.

4. Now, call the onSubscribeClick method on the subService instance and pass a parameter. For example, let's create a courseName property as a string with the value "JavaScript" and pass it as an argument to the onSubscribeClick method.

subService.onSubscribeClick(this.courseName);

5. By making this change, the alert message will be displayed using the onSubscribeClick method instead of directly in the unsubscribe 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:

1. Open the Angular component file and locate the onSubscribe method.

2. Similar to the JavaScript component, replace the call to alert with the creation of an instance of the SubscribeService class.

letsubService=newSubscribeService();

3. Import the SubscribeService class from the subscribe.service.ts file.

4. Invoke the onSubscribeClick method on the subService instance and pass the desired argument. For instance, let's use the courseName property with the value "Angular" as the argument.

subService.onSubscribeClick(this.courseName);

5. This modification allows the alert window to be displayed through the onSubscribeClick method in the SubscribeService 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:

1. Locate the onSubscribe method in the React component file.

2. Instead of directly calling the alert function, create an instance of the SubscribeService class.

letsubService=newSubscribeService();

3. Import the SubscribeService class from the subscribe.service.js file.

4. Invoke the onSubscribeClick method on the subService instance and pass the desired argument, such as the courseName property with the value "React".

subService.onSubscribeClick(this.courseName);

5. 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.