Services are basically designed to encapsulate business logic and data with different components of Angular. For reusability purpose also we used the services. It is basically a typescript class that has a well-defined purpose to do something like perform any specific task or do some operation etc.
Angular services are singleton objects that get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.
In simple words we can say that Service is a class that has the purpose of providing a service to a Component, Directive, or to another Service. The Service may be fetching data from the back end, running a business logic, etc
What is the need of service?
Service helps in dividing the web application into small, different logical units which can be reused. Services avoid rewriting of code. A service can be written once and injected into all the components that use that service. Below is some features of services due to that we prefer to use it in our application –
1. A service is a class
2. Decorated with @Injectable
3. It share the same piece of code
4. Hold the business logic
5. Interact with the backend
6. Share data among components
7. Services are singleton
8. Can registered on modules or components
How to create the service :
Angular CLI provides below command to create the service.
Or in short you can use –
After running this command two files will be created –
1. <service-name>.service.ts
2. <service-name>.service.spec.ts
So first file is used for write the business logics inside the service and second file is used to write the unit test case.
Lets see how <service-name>.service.ts looks like –
So once you will create any service , by default it looks like this. here import statement is there which is used to import the dependency. Then @Injectable with some metadata is there. @Injectable is the main thing which represent our class as a service. Then metadata providedIn sets the scope of this service.Basically here scope is root so it will accessible all over the application. When you provide the service at the root level, Angular creates a single, shared instance of service and injects it into any class that asks for it Then class is there , where we can write our actual logics.
Lets see one simple example of how to use the services-
In this example we will create one product.service.ts file, product.component.ts and product.component.html file. And we will load the product data into our component and that we will fetch that product data from product.service.ts file.
Lets add below code in product.component.ts file-
Here we have just injected the product service and called the getProducts() method of service. And holding the data in products variable.
Lets add below code in product.component.html file –
Here we are just iterating the products array by using *ngFor and binded the product data.
Lets add the below code product.service.ts file –
Here we have just created the sample products json and returning through getProducts() method.
After doing this all you can get the below output on browser-
Similarly you can do any kind of task using the services.
Conclusion: Services are the backbone of Angular Applications. Services are used to solve one big problem instead of repeating logic (write logic more than one time), they centralize our business logic. Services are very useful everywhere in angular applications because they can be easily injected via dependency injection.They are also very useful if you want to use the same instance of one class everywhere in your class.
After all, services are just classes. Other than components, services may only contain logic. They should be completely separated from the view part.
