In the previous post, we have discussed basics of a service in Angular. In this post, we will focus on building the service and use it. Here are the steps to use a service.
- Create the service class.
- Define the metadata with a decorator.
- Import what we need
These are the same steps we follow to create a normal component in Angular. Here is a simple example of a simple service.
Here DataService class is exported so the service can be used from any other parts of the application. There is only one method called getData(). This method returns an array of data. Then we add decorator for this service metadata. When building services we use the Injectable() decorator. This decorator only really required here if the service itself has injected dependency. However, it’s recommended that every service class use the injectable decorator for clarity and consistency. At last, we import what we need. Here the ‘Injectable’.
It is recommended to build service classes in a separate folder for clarity.
For this example, we use IData[] interface to strongly type the return value. So we need to import this interface.
In the next post, we will discuss how to retrieve data using HTTP. For now, we will use hard code data in the service class.
Now we created the service class. But how do we use it? To use a service we must register for the service. To do that we should register the provider. A provider is a code that can create or return a service. Typically the service class itself. To do that we define in a component or angular module metadata. If we register in a component, the service is injectable to that component and its children. If we register in the Angular module, the service is injectable is everywhere in the applications. So we should take care to register the provider at the appropriate level of the application component tree. For this example, we will register the provider in the Angular module.
To register a provider that create our service, we add the Providers Property to the angular module. The Providers property is an array. So we could register multiple providers. To register a provider for our data service we specify DataService and import as in the figure below.
Now we have to define the service as a dependency. So the injector will provide the instance in the classes that needed. Below figure shows how to do dependency injection in Typescript. In Typescript, we use the constructor for this task. Every class has a constructor that is executed when an instance of the class is created.
Here the _dataService instance can be public or private.
Now the question is where we should put the code to call the service. One way is put them in the constructor. But ultimately our service will go out to a backend server to get the data. Therefore we don’t want all of that executed in the constructor. For this example, we will use Angular lifecycle hooks. So we will use the OnInit lifecycle hook. Because the OnInit lifecycle hook provides a place to perform any component initialization. And it is a great place to retrieve the data for the template. Let’s use this life cycle hook.
In the next post, we will discuss how to retrieve data using HTTP.
techstanis.wordpress.com 