Angular Services

What is a service in Angular?

A service in Angular is a class that contains reusable logic that can be shared across different components. Services are used to perform tasks such as data fetching, business logic, and other operations that don't belong in the component itself. They are typically provided to components using Angular's dependency injection system.

How do you create a service in Angular?

You can create a service in Angular using the Angular CLI command ng generate service. This command creates a service class with a default @Injectable decorator, making the service available for dependency injection.

Example of creating a service:

ng generate service example

This will generate a service file:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }

  getData() {
    return 'Hello from Example Service!';
  }
}

In this example, the ExampleService class provides a getData method, and it is provided in the root injector by default using @Injectable({ providedIn: 'root' }).

What is dependency injection in Angular, and how does it relate to services?

Dependency injection (DI) in Angular is a design pattern that allows classes (like components) to request dependencies (such as services) from an external source rather than creating them directly. Angular's DI system manages the creation and injection of services into components or other services, promoting reusability and maintainability.

Example of using dependency injection:

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  message: string;

  constructor(private exampleService: ExampleService) {
    this.message = this.exampleService.getData();
  }
}

In this example, the ExampleService is injected into the ExampleComponent via the constructor. The component can now use the service's getData method.

How do you provide a service in Angular?

There are two common ways to provide a service in Angular:

• At the root level: By adding providedIn: 'root' in the @Injectable decorator. This makes the service a singleton and available throughout the application.
• At the module or component level: By adding the service to the providers array in a module or component. This creates a new instance of the service for each module or component that injects it.

Example of providing a service at the root level:

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }
}

Example of providing a service at the component level:

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  providers: [ExampleService]
})
export class ExampleComponent {
  constructor(private exampleService: ExampleService) { }
}

In this example, the service is provided only at the component level, so a new instance is created each time the component is instantiated.

What is the @Injectable decorator, and why is it used in Angular services?

The @Injectable decorator in Angular marks a class as available for dependency injection. It tells Angular's DI system that the class can be injected as a service into components or other services. By default, services provided at the root level using providedIn: 'root' are singletons, meaning only one instance of the service is created and shared across the entire application.

Example of using @Injectable:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor() { }
}

In this example, the ExampleService is decorated with @Injectable, making it available for injection across the application.

What is a singleton service in Angular?

A singleton service in Angular is a service that has only one instance throughout the lifetime of the application. When a service is provided at the root level using providedIn: 'root', it becomes a singleton. This means that the same instance of the service is shared across all components and modules that inject it.

Example of a singleton service:

@Injectable({
  providedIn: 'root'
})
export class SingletonService {
  counter = 0;
}

In this example, the SingletonService will maintain the same instance across the entire application, so changes to the service's counter property will be reflected in all components that inject the service.

How do you handle HTTP requests using services in Angular?

In Angular, HTTP requests are typically handled using the HttpClient service provided by the HttpClientModule. You can use an Angular service to encapsulate the logic for making HTTP requests and reuse it across different components.

Example of handling HTTP requests in a service:

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

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

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

In this example, the DataService uses the HttpClient to make a GET request to an API and return an observable that can be subscribed to by a component.

How do you inject one service into another in Angular?

In Angular, services can be injected into other services using the same dependency injection system that is used for components. You simply include the service you want to inject in the constructor of the service that depends on it.

Example of injecting one service into another:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private loggerService: LoggerService) {}

  fetchData() {
    this.loggerService.log('Data fetched successfully');
  }
}

In this example, the LoggerService is injected into the DataService, allowing the data service to log messages using the logger service.

How do you mock services for unit testing in Angular?

In Angular, services can be mocked for unit testing by creating a mock class or object that mimics the behavior of the real service. This allows you to test components without relying on actual service logic or HTTP requests.

Example of mocking a service in a unit test:

import { TestBed } from '@angular/core/testing';
import { ExampleComponent } from './example.component';
import { ExampleService } from './example.service';

class MockExampleService {
  getData() {
    return 'Mocked data';
  }
}

describe('ExampleComponent', () => {
  let component: ExampleComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        ExampleComponent,
        { provide: ExampleService, useClass: MockExampleService }
      ]
    });

    component = TestBed.inject(ExampleComponent);
  });

  it('should use the mocked service', () => {
    expect(component.exampleService.getData()).toBe('Mocked data');
  });
});

In this example, a mock class MockExampleService is created to replace the real ExampleService during unit testing. The mock class is injected into the component using the TestBed configuration.

What are the common use cases for services in Angular?

Services in Angular are commonly used for:

• Data fetching: Services can fetch data from APIs using HttpClient and provide the data to components.
• Shared logic: Services encapsulate business logic that can be shared across multiple components, avoiding code duplication.
• State management: Services can manage application-wide state (e.g., user authentication status) and provide methods to update and retrieve state.
• Communication between components: Services can act as intermediaries for communication between components that do not have a direct parent-child relationship.

How do you share data between components using services?

Services can be used to share data between components by storing shared data in the service and providing methods to get and set that data. Components that inject the service can then access the shared data and communicate indirectly with each other.

Example of sharing data between components using a service:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private data = '';

  setData(newData: string) {
    this.data = newData;
  }

  getData() {
    return this.data;
  }
}

In the component:

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private sharedService: SharedService) {}

  updateData() {
    this.sharedService.setData('Updated data');
  }

  retrieveData() {
    console.log(this.sharedService.getData());
  }
}

In this example, the SharedService is used to share data between components. One component can update the shared data, and another can retrieve it.