Angular Services

Ketan Tiwari
Jul 22, 2017 · 2 min read

By definition on angular.io

"Service is a broad category encompassing any value, function, or feature that your application needs."

If you didn’t get it ….. Basically the Service contains the business logic of the application. Keeping our component/controller lean is considered as a good practice in almost all the architectures. To make the component as lean as possible we should delegate more and more responsibilities to the services. I have also observed that the services are the only channel for communication between the components if the components are not in a direct relationship.

Before jumping into the examples I would like to explain my understanding of when, where and how the services gets involved into the angular application.

Where ?

Angular Architecture Overview | Source — angular.io

The Injector block on bottom left corner is known as the service container. Which is basically the providers array of the module or component.

@NgModule({ providers: [ SampleService ] })

OR

@Component({ providers: [ SampleService ] })

When ?

As soon as the component or module is created it prepares an instance of the service and holds into the injector so that it can be available to other child components.

How ?

Now to use this service inside our component there are two things we need to do

Import the ServiceClass

import { SampleService } from './sample.service';

Inject it into the constructor

constructor(private sampleService:SampleService) {}

This approach will provide the global instance of the service which can be modified by other components also. Don't need a global instance? Lets discuss about the scope....

Note: Even if you have imported the service at a higher level module or component you still need to import it and inject it wherever you want to use the service.

Scope of the Service

This is the most important thing to understand because the scope has confused me at so many places. So the key thing to remember is that if you want a single instance of a service then you will only mention the ServiceClass in providers at a single place in you whole application. Because a soon as you mention it in providers array it will always create a new instance in that context.

Now if you need a local instance then you should mention it in the providers array of that component or module.

Note: To make a service global it is not necessary to inject it at root module level (higher level). Just mention it in provider array of any of the module or component of the bootstrapped application and export it to use it anywhere across the app even in different modules.

Hope this helps!

)

Ketan Tiwari

Written by

Software Engineer | Hacktivist

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade