Angular services and dependency injection: what its really all about?

Things you need to know to follow this article

• You should be familiar with TypeScript (or JavaScript).
• You should be familiar with Angular, Angular CLI and its project structure.
• You should have a basic understanding of Angular components.
• A little familiarity with CSS would be helpful but definitely not necessary.

What are Angular services?

angular.io defines "services" as

Service is a broad category encompassing any value, function, or feature that an application needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.

Now, if this definition seems a little confusing (and perhaps intimidating too) then I'll try to make this concept easier for you.

Okay first things first.

• Angular services are just TypeScript classes, nothing fancy.
• These classes are used with the @Injectable decorator.

Why do we need services?

Components require business logic and more often than not, we need the same functionality in multiple components. In this scenario, if you re-write the entire business logic in all of those components then you will have multiple copies of the same code. Which essentially means that you have to maintain all of them and thus your application fails to achieve modularity.
Here comes services to the rescue. Services are TypeScript classes that has some reusable piece of code (variables, objects, methods etc.) that you can use inside multiple components in your project.

✔ Let's see how you can get started with creating a service and use it in your project.

Head over to your preferred CLI and create a new Angular project by typing

ng new angular-services

Even if you do not wish to create a new project, that's okay too. Just make sure you get the gist of it.

This is how the bare-bones of a new Angular project should look like. I am assuming you are already familiar with it.

Some cleanup and configuration:

(Necessary step) navigate to the app.component.html file and delete its entire content since its just boilerplate code for every Angular project and we do not need it.
(Optional step) navigate to your styles.css file and add some global styling. Here I am using the Roboto Mono font the entire project.

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

body {
  font-family: "Roboto Mono", monospace;
}

Next, run the project by typing ng serve

creating the service

Head over to your CLI to create a service and type

ng g s demoservice

Where demoservice is the name of the service.
This command will generate two files in the root of your project

1. demoservice.service.ts
2. demoservice.service.spec.ts

The first file will contain the TypeScript class (i.e. the service).
The second file is for unit testing and since we are not doing unit testing here, you may delete this file if you wish to.

Open up your demoservice.service.ts and this is how the file should look like

The @Injectable decorator makes the class a service and allows it to be injected (read: used) into other components.

This class will contain all the common variables, objects and methods that we can use inside any other component.

So let's create an object here

We will use this employee object inside the app.component.ts file which should look like this

In order to use the employee object here, we need to make some modifications such as

Next you can simply come to your app.component.html file and use the employee object like this

<p><strong>Employee id: </strong>{{ employee.id }}</p>
<p><strong>Employee name: </strong>{{ employee.name }}</p>
<p><strong>Employee designation: </strong>{{ employee.designation }}</p>
<p><strong>Employee likes: </strong>{{ employee.likes }}</p>
<p><strong>Employee dislikes: </strong>{{ employee.dislikes }}</p>

🌟 Result

That's a wrap for this one, hope you found this article to be helpful.