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.
- Component can create an instance of the service class and use it.
- 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.
Build a Service
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’.
Register a Service
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.
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.
Inject a Service
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.
In my next episode I will play you Angular Routing. See you!!!
