The last reusable part of our apps that needs to be added is the service layer.
We have a backend application, so somewhere, we need to write a code responsible for HTTP calls.

Because of our component contracts, we need to map DTOs into something useful.

Let's start with generating the necessary libraries.
Since I'm not going to use any state management library in my applications,
I can use 

 as a space name for my services responsible for fetching and keeping data.

yarn nx g @nx/angular:lib libs/state/rooms --prefix state --buildable --publishable --importPath "state/rooms"
yarn nx g @nx/angular:lib libs/state/meetings --prefix state --buildable --publishable --importPath "state/meetings"

To implement a nice communication with the backend, I'm creating a few services:

import {InjectionToken} from "@angular/core";

export const RoomsBackendUrl = new InjectionToken('RoomsBackendUrl');

In the standard recommended approach, when you have an Angular CLI application,
you usually put the URL to the backend in 

 files.
Then, when you want to build an application with 

 flag,
and the environment file is replaced with the correct parameters.

When an application is divided into libraries, each library is buildable and publishable. Probably you don't want
to bake in the backend URL.
What we do instead is pass this data using dependency injection.
That's the main reason why I decided to have this injection token.

Ok, we know where is our backend URL. We can create 

import {inject, Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {RoomsBackendUrl} from "./rooms-backend-url";
import {Observable} from "rxjs";
import {RoomDto} from "shared/dtos";

@Injectable()
export class RoomsHttpClientService {

  private readonly httpClient = inject(HttpClient);
  private readonly backendUrl = inject(RoomsBackendUrl) + '/rooms';

  get(): Observable<Array<RoomDto>> {
    return this.httpClient.get<Array<RoomDto>>(this.backendUrl);
  }

  add(room: RoomDto): Observable<void> {
    return this.httpClient.post<void>(this.backendUrl, room);
  }

}

This service contains nothing you don't know already, so I won't focus on it.
The most important aspect to notice in this class is 

, and this library bridges the frontend and backend.

In previous lessons,
I described why we don't want to use DTOs in components and need to map them to something else.
To remind you. When you use DTOs in your components, and the backend will change something,
you'll end up with multiple places requiring changes.
If you map DTO to something else, the only place you need to change is the mapping.
Then, with a plan, you can refactor the rest of the places in a new commit.
In this approach, you can push changes in a shorter time without feeling like changing the whole application.

---
title: Constructing the application - Services
description: Constructing the services of the application
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.10-services?ref_type=heads
privateVideoUrl: https://stream.mux.com/TGQQANS819dHJiJMVW01RM6sr8tX8H9z29tEmcNNQyPs.m3u8
---

The last reusable part of our apps that needs to be added is the service layer.
We have a backend application, so somewhere, we need to write a code responsible for HTTP calls.

Because of our component contracts, we need to map DTOs into something useful.

Let's start with generating the necessary libraries.
Since I'm not going to use any state management library in my applications,
I can use `state` as a space name for my services responsible for fetching and keeping data.

```bash
yarn nx g @nx/angular:lib libs/state/rooms --prefix state --buildable --publishable --importPath "state/rooms"
yarn nx g @nx/angular:lib libs/state/meetings --prefix state --buildable --publishable --importPath "state/meetings"
```

## Rooms

To implement a nice communication with the backend, I'm creating a few services:

-   `rooms-backend-url.ts` - Injection token to store necessary backend URL string
-   `rooms-converter.service.ts` - Converter service converts `RoomDto` into `Room` and `Room` into `RoomDto`
-   `rooms-http-client.service.ts` - Service where we use `HttpClient` to make requests to the backend application
-   `rooms-state.service.ts` - Service where I keep fetched data
-   `rooms-state.module.ts` - Module for the whole solution

Let's start with `rooms-backend-url.ts`.

```typescript { actualFilename=../../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-backend-url.ts endChar=117 endLine=4 startChar=0 startLine=1 statedFilename=libs/state/rooms/src/lib/rooms-backend-url.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.10/.../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-backend-url.ts }
import {InjectionToken} from "@angular/core";

export const RoomsBackendUrl = new InjectionToken('RoomsBackendUrl');
```

In the standard recommended approach, when you have an Angular CLI application,
you usually put the URL to the backend in `environment.ts` files.
Then, when you want to build an application with `--configuration` flag,
and the environment file is replaced with the correct parameters.

When an application is divided into libraries, each library is buildable and publishable. Probably you don't want
to bake in the backend URL.
What we do instead is pass this data using dependency injection.
That's the main reason why I decided to have this injection token.

Ok, we know where is our backend URL. We can create `rooms-http-client.service.ts`.

```typescript { actualFilename=../../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-http-client.service.ts endChar=615 endLine=22 startChar=0 startLine=1 statedFilename=libs/state/rooms/src/lib/rooms-http-client.service.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.10/.../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-http-client.service.ts }
import {inject, Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {RoomsBackendUrl} from "./rooms-backend-url";
import {Observable} from "rxjs";
import {RoomDto} from "shared/dtos";

@Injectable()
export class RoomsHttpClientService {

  private readonly httpClient = inject(HttpClient);
  private readonly backendUrl = inject(RoomsBackendUrl) + '/rooms';

  get(): Observable<Array<RoomDto>> {
    return this.httpClient.get<Array<RoomDto>>(this.backendUrl);
  }

  add(room: RoomDto): Observable<void> {
    return this.httpClient.post<void>(this.backendUrl, room);
  }

}
```

This service contains nothing you don't know already, so I won't focus on it.
The most important aspect to notice in this class is `RoomDto`.
It's imported from `shared/dtos`, and this library bridges the frontend and backend.

In previous lessons,
I described why we don't want to use DTOs in components and need to map them to something else.
To remind you. When you use DTOs in your components, and the backend will change something,
you'll end up with multiple places requiring changes.
If you map DTO to something else, the only place you need to change is the mapping.
Then, with a plan, you can refactor the rest of the places in a new commit.
In this approach, you can push changes in a shorter time without feeling like changing the whole application.

My mapping is in `rooms-converter.service.ts` class.

```typescript { actualFilename=../../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-converter.service.ts endChar=524 endLine=30 startChar=0 startLine=1 statedFilename=libs/state/rooms/src/lib/rooms-converter.service.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.10/.../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-converter.service.ts }
import {Injectable} from "@angular/core";
import {RoomDto} from "shared/dtos";

import {Room} from "./room";

@Injectable()
export class RoomsConverterService {
  fromDto(dto: RoomDto): Room {
    return {
      getName(): string {
        return dto.name;
      },
      getId(): string {
        return dto.id;
      },
      getImg(): string {
        return dto.img;
      }
    }
  }

  toDto(room: Room): RoomDto {
    return {
      img: room.getImg(),
      name: room.getName(),
      id: room.getId()
    };
  }
}
```

I'm mapping `RoomDto` into `Room`. It's an interface with getters for every field.
This approach gives me freedom of implementation, and I can be very flexible when needed. 

```typescript { actualFilename=../../../manuscript/code/04.10-services/libs/state/rooms/src/lib/room.ts endChar=86 endLine=6 startChar=0 startLine=1 statedFilename=libs/state/rooms/src/lib/room.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.10/.../../manuscript/code/04.10-services/libs/state/rooms/src/lib/room.ts }
export interface Room {
  getId(): string;
  getName(): string;
  getImg(): string;
}
```

The last service I need to connect all previous classes is `rooms-state.service.ts`.
In this service, I'm keeping and exposing the fetched and converted data.
The main reason why I decided it like that is that I want to prevent unnecessary HTTP calls.

```typescript { actualFilename=../../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-state.service.ts endChar=919 endLine=36 startChar=0 startLine=1 statedFilename=libs/state/rooms/src/lib/rooms-state.service.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.10/.../../manuscript/code/04.10-services/libs/state/rooms/src/lib/rooms-state.service.ts }
import {inject, Injectable} from "@angular/core";
import {BehaviorSubject, map, Observable} from "rxjs";
import {RoomsHttpClientService} from "./rooms-http-client.service";
import {RoomsConverterService} from "./rooms-converter.service";
import {Room} from "./room";

galczo5

Constructing the services of the application

Constructing the application - Services

In this lesson, we are going to implement all necessary injectable services

use in room front-end application and admin front-end application. Let's start

So I'm going to execute command-yard-nx-generate for library leaps-state-rooms

And the second library called leaps-state-meetings.

So we have two new libraries, one for meetings, second one for rooms. And we

to do HTTP calls, to fetch all necessary data, and so on. So let's start with

I'm going to create five files inside of that library. First one, room-backend-

will contain injection token to start necessary back-end-url string. Then I'm

room-converter-service that will be used to convert room-dt-url into room, and

The next one is rooms-http-client-service that will be used to make HTTP calls

The next one, room-state-service is the main state-service, so we are going to

fetch data there. It's going to be a public API for applications. And the last

module that will be ng-module that contains all these necessary services. I'm

to generate a clear and easy-to-use API for applications. So give me a few

I will prepare all the files and I will show you the code that is inside them.

So I have the code, let's start with room-converter-service. As you can see, I

dt-url and to dt-url, and I'm basically converting room-dt-url that we have

libraries that we extracted from back-end application, and I'm converting it

room-interface that is simple interface with free methods, get ID, get name,

So it's nothing complicated, and let's continue to the next service. The next

So this service is using HTTP-client and back-end-url, which is an injection

I'm using this token to get the base-url of my back-end application, and then I

to get all the data or to add a new room using a post-method. I want to avoid

back-end-url because this library may be used in different applications. You

migrate to your back-end to AWS Lambda or something else, so it would be great

URLs. It's a good practice and I can recommend doing that. Once we have room-h

we can move to room-state-service. So first of all, we have a behavior-subject

array of rooms that we fetched. So you want to avoid fetching rooms every time

enter a page or you change navigation or something. So we want to store all fet

behavior-subject. Then I'm using HTTP-client-service that you have just seen in

and then I'm using converter-service. So I have three methods. First one is

When you call this method, it's calling get-method-on-http-client-service to

and store it in the state, which is a behavior-subject. The rest two methods

is returning an observable with array of rooms. So when you want to use rooms,

to this get method and add, of course, is adding a new room. So I'm using fetch

some kind of unidirectional data flow. So reading the data and writing data is

It's a bit similar to NGRX or other state management libraries that you may

the whole puzzle is rooms-state-module. To make it working, you have to provide

backend-url-injection-doggen. And I'm using pattern for root. In my case, it's

to create a module that contains all the providers. So it contains HTTP-client-

And then I'm using static-for-back-end-url, where you can define that I'm going

library with this URL. That's the way of providing backend-url to the whole

And of course, we have to go to index.ts and expose all necessary interfaces

as public API. All right, so let's switch to the second library called meetings

prepare the code. And once again, I will show you everything that you need to

Meeting's library is very similar to rooms library, which means that most of

look the same. I'm going to use the same approach. So let's start with

two metals from DTO and 2DTO. Of course, DTO as previously comes from shared D

And then I have meeting implementation here. It's a simple class that

interface. As you can see, I decided to create a constructor that gets DTO to

cleaner in the constructor. So we can create a meeting implementation using

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript