What Are Angular Services – Creating and Using with Examples and Best Practices

Angular Services:

• Angular services are singleton objects that get instantiated only once during the lifetime of an application.
• They are used to encapsulate and share logic across different components.

Creating a Service:

ng generate service service-name

• Services are typically created using the ng generate service command or manually created by defining a TypeScript class.

// sample.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root', // providedIn specifies the scope of the service
})
export class SampleService {
  // Service logic goes here
}

Injecting a Service:

• Services need to be injected into components or other services where they are required.
• Injection is typically done in the constructor.

// sample.component.ts
import { Component } from '@angular/core';
import { SampleService } from './sample.service';

@Component({
  selector: 'app-sample',
  template: '<p>{{ data }}</p>',
})
export class SampleComponent {
  data: string;

  constructor(private sampleService: SampleService) {
    this.data = sampleService.getData();
  }
}

Service Methods:

• Services contain methods that perform specific tasks.

// sample.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SampleService {
  private sampleData: string = 'Hello from the service!';

  getData(): string {
    return this.sampleData;
  }
}

Sharing Data Between Components using a Service:

• Services act as a bridge to share data between components.

// sample.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SampleService {
  private dataSubject = new BehaviorSubject<string>('Initial data');
  data$ = this.dataSubject.asObservable();

  updateData(newData: string): void {
    this.dataSubject.next(newData);
  }
}

// component-a.component.ts
import { Component } from '@angular/core';
import { SampleService } from './sample.service';

@Component({
  selector: 'app-component-a',
  template: '<p>{{ data }}</p>',
})
export class ComponentAComponent {
  data: string;

  constructor(private sampleService: SampleService) {
    this.sampleService.data$.subscribe((newData) => {
      this.data = newData;
    });
  }
}

// component-b.component.ts
import { Component } from '@angular/core';
import { SampleService } from './sample.service';

@Component({
  selector: 'app-component-b',
  template: '<input [(ngModel)]="newData" /><button (click)="updateData()">Update Data</button>',
})
export class ComponentBComponent {
  newData: string = '';

  constructor(private sampleService: SampleService) {}

  updateData(): void {
    this.sampleService.updateData(this.newData);
  }
}

HTTP Service Example:

• Angular services are commonly used for making HTTP requests.

// http.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class HttpService {
  private apiUrl = 'https://api.example.com';

  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

// component-with-http.component.ts
import { Component } from '@angular/core';
import { HttpService } from './http.service';

@Component({
  selector: 'app-component-with-http',
  template: '<button (click)="getData()">Get Data</button>',
})
export class ComponentWithHttpComponent {
  constructor(private httpService: HttpService) {}

  getData(): void {
    this.httpService.fetchData().subscribe((data) => {
      console.log(data);
    });
  }
}

Best Practices:

1. Follow the Single Responsibility Principle:
   • Aim for components, services, and modules that have a single responsibility.
   • Divide your application into small, focused pieces to enhance maintainability.
2. Use Reactive Programming with RxJS:
   • Leverage Observables from RxJS for handling asynchronous operations.
   • Utilize operators like map, filter, and switchMap for efficient data manipulation.
3. Optimize Change Detection:
   • Be mindful of performance by avoiding unnecessary change detection cycles.
   • Use OnPush change detection strategy for components whenever possible.
4. Dependency Injection:
   • Utilize Angular’s dependency injection system to manage and inject dependencies.
   • Use providedIn in services to optimize and provide them at the root level.
5. Code Consistency and Style:
   • Adhere to a consistent coding style and naming conventions.
   • Use tools like TSLint or ESLint to enforce coding standards.

Services Question and Answers:

1. What is an Angular service?
   • Answer: An Angular service is a reusable, injectable object that encapsulates business logic or data-sharing functionality. Services are a key building block in Angular applications, providing a way to share code and state between different components.
2. How do I create an Angular service?
   • Answer: You can create an Angular service using the CLI command ng generate service service-name. This command generates a service file and registers it in the root injector by default, making it accessible throughout the application.
3. Why use services in Angular?
   • Answer: Services in Angular promote code reusability and maintainability. They allow you to centralize and share logic or data between components, helping to avoid code duplication. Services also support a modular and scalable application architecture.
4. How do I inject a service into a component?
   • Answer: To inject a service into a component, you include the service as a parameter in the component’s constructor. Angular’s dependency injection system takes care of providing the instance of the service to the component. For example: constructor(private myService: MyService) { }.
5. What is the purpose of providedIn in the @Injectable decorator?
   • Answer: The providedIn property in the @Injectable decorator specifies the scope of the service. When set to 'root', the service is a singleton and is available throughout the application. This helps in optimizing resource usage and ensures that there is only one instance of the service in the application.

Mastering Angular Services: A Comprehensive Guide
Angular Service Best Practices for Efficient Development
Demystifying Angular Dependency Injection in Services
Reusable Code: Building Angular Services with Confidence
Angular Services: Unlocking the Power of Code Sharing and Logic Separation