Why I Chose My Journey To Angular

Angular Services and Dependency Injection

Episode 4

Component communicates with its templates. What do we have to do where the need of data shared across components?. Welcome back. We are going to talk about services and dependency injection.

What is a service exactly?

A service is a class with a focused purpose. It has features which are independent from any particular component. Through service Angular can share data or logic across components. It encapsulate external interactions.

There are two ways an angular component can work with a service.

  1. Component can create an instance of the service class and use it.
  2. Register the service with Angular injector.

The first method only create the instance local to the component. So, we can’t share the data and also it is difficult to do service testing. The second method is more appreciable, here angular will create the single instance of the service class called singleton. By registering the services with angular injector, it will maintains a container of created service instances.

So, What is Dependency injection?

Dependency injection is one of the design pattern where if object ‘A’ depends on object ‘B’, object ‘B’ will be injected from the operational environment(Angular injector). Angular provides a mechanism which helps with registering and instantiating component dependencies. In angular we register objects for dependency injection by specifying providers. The provider provides the instruction to the Angular about how to create an instance of an object for future injection into a target component.

Each component can have an Injector instance which can able to inject an object into component or service. There is a root injector in angular application which is available to all of its modules or we can have injector for each component . This injector will inject what is specified in the provider into the constructor of the component when the component class is instantiated. Through this dependency injection we can share data and it is easy to mock the service for testing.

To create a service, we create a service class, define the metadata with a decorator and define the features and logic we need to share across the components. Here in the service class @Injectable decorator metadata is added. we import the Injectable decorator from ‘@angular/core’.

After creating the service, we have to register the service with Angular injector. If we register the service with root application injector we can inject that service to any component or service in the application. If a service registered with a specific component will only available to that component and its child components. But in common, we register the service with root application injector. We pass an object into the Injectable decorator and set the ‘providedIn’ property as ‘root’ in the created service class.

Register Service

In the above stated method, ‘providedIn’ feature is new to Angular and it is more recommended. The below stated image shows the old method where the service is registered in Appmodule in ‘providers’ array in NgModule. This is also still an accepted way.

Register service in Appmodule.

As I said before, we can inject the instance of a service in a component through the constructor. We add private accessor keyword to constructor parameter and set instance of the injected service.

Injection of Service in Constructor

In my next episode I will play you Angular Routing. See you!!!

--

--

--

Undergraduate @ Faculty of Information Technology, University of Moratuwa

Love podcasts or audiobooks? Learn on the go with our new app.

How to manipulate arrays in JS like a pro

JavaScript Frameworks and Libraries to make a career in 2022

javascript frameworks and libraries

🚨 How to hack your Node.js application (which uses TypeORM)?

Custom colors in React-Native

How concurrency is handled in JavaScript?

Mock Intl and Date global in Jest (with this one simple trick!)

Solving JS Algorithm Problem: Birthday Cake Candles

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tharmi Vijayakumaran

Tharmi Vijayakumaran

Undergraduate @ Faculty of Information Technology, University of Moratuwa

More from Medium

How to set up Jest in Angular App

Jest Integration with Angular 12

Ways to find the angular version

Unit Testing in Angular