Services in Angular

Introducion to Angular Service

A service is a piece of code that may be reused and has a specified purpose.. A piece of code that will be used in numerous parts of your application.

Our components require data access. You can write data access code in each Component, but that is wasteful and violates the single responsibility principle. The focus of the component should be on presenting data to the user.

Another class should be in charge of receiving data from the back-end server.Because it offers the data that each Component requires, a class is termed a service class.

What is the purpose of Angular Services?

For example, logging services are features that are not reliant on other components.

1. Between components, logic or data can be transferred.

2. Interactions with the outside world, such as data access, should be contained.

3. It is simpler to test services.

4. They are less difficult to debug.

5. We can reuse the service in a variety of situations.

How to create a Service in Angular

An Angular service is nothing more than a JavaScript function. We simply need to construct a class and add methods and attributes to it. Then, in our Component, we can make an instance of this class and call its methods.

One of the most effective applications of services is to obtain data from a data source. Let's make a basic service that takes product data and passes it along to our Component.

Product Model

Please create a new file called product.ts in the src/app folder.

product.ts

export class Product {   
 constructor(productID:number,    name: string ,   price:number) {  
        this.productID=productID;  
        this.name=name;  
        this.price=price;  
    }  
    productID:number ;  
    name: string ;  
    price:number;  
}  

Product Angular Service

After that, we develop an Angular service that returns a product list.

Please create a new file called product.service.ts.product.service.ts in the src/app folder.

import {Product} from './product'  
export class ProductService{   
   public  getProducts() {   
       let products:Product[];   
       products=[  
           new Product(1,'Memory Card',500),  
           new Product(1,'Pen Drive',750),  
           new Product(1,'Power Bank',100)  
       ]   
       return products;                 
   }  

Then, develop and export a ProductService class. We need to export it so that other service classes and components can import and use it.

A collection of items is returned by the Get Products method. We've hardcoded the products in this example. In real life, you'd use an HTTP GET request to get the data service ready from your back end API.

It's worth noting that the preceding class is merely a JavaScript function. It isn't angular in the slightest.

Invoking the ProductService

The next step is to use the Component to call the ProductService. Add the following code to the app.componet.ts file.

app.component.ts

 import { Component } from '@angular/core';  
import { ProductService } from './product.service';  
import { Product } from './product';  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
})  
export class AppComponent  
{   
   products:Product[];  
   productService;   
   constructor(){  
     this.productService=new ProductService();  
   }   
   getProducts() {       
     this.products=this.productService.getProducts();  
   }    
}   

Conclusion

Angular is a fantastic multi-functional framework that helps you develop faster. It is a strong software development environment that includes dependency injection and deep linking.