Overview of Services in Angular

What is an Angular service?

Features of an Angular service

Some of the features of Angular services include the following:

• Data sharing: Data from a single service can be shared across different components in the Angular application, which ultimately leads to writing less code and defining business logic.

• Separation of concern: Angular services help separate the user interface design logic from data distribution logic, leading to writing readable and efficient code.

• REST API consumption: Angular services make communication with back-end resources possible through the HttpClientModule module. This module enables an Angular service to make requests and easily manipulate them and their responses.

• Testability: Testing an Angular service is easy because its logic is separate from the component logic, which means Angular services will need to be tested just once instead of across different components.

A sample of an Angular service

To create a sample of an Angular service, we’ll follow the steps below:

Step 1: Create a new Angular project

Here, we create a new project in our terminal by running the command below:

ng new test --routing=false --style=css

Step 2: Generate and configure a new service file

To generate a new service, we run the command below:

ng generate service test

Once the service is generated, we can configure it using a free public REST API resource called JSONPlaceholder, which will serve as a backend. We can see this from the code below:

The steps below summarize what we’ve done in the code above:

1. The first thing we do after the service is generated is head over to the app directory and open the app.module.ts file. Inside this file, we import the HttpClientModule in line 3 and then inject it in line 9.

2. Next, we head over to our test.service.ts file. Here, the logic for our service is defined. First, we import the HttpClient in line 2. In line 8, we define the variable for our free REST API resource, which comes from JSONPlaceholder.

3. Finally, we inject the HttpClient in our constructor in line 10. We then create the service for our method called getData(). This method can be accessed anywhere in our application component, making it possible to display it in the UI.

Step 3: Accessing the data in our Service

To access the method that holds the data in our service, we’ll use our app.component.ts file. Inside this file, we’ll log the data in the console as seen in the code below:

Note: To view the data, click the “RUN” button to compile the application. Next, click on the link beside the text that reads “Your app can be found at.” A new tab will then open in the browser. Then, press “Control + Shift + J” (on Windows) or “Option + ⌘ + J” (on macOS) to open the browser console. The data can be viewed from there.

Below is a summary of the code above:

1. In the app.component.ts file, we start by importing the TestService file, seen in line 2.

2. Next, we inject the service inside our component using the constructor in line 12.

3. Finally, inside the constructor in line 13, we access the getData() method we created earlier in our service file, subscribe to the method, and log the data coming from JSONPlaceholder into the console.