Chapter 5: Angular Services and Dependency Injection

In Angular, services play a crucial role in organizing and managing the application’s data and business logic. They are responsible for handling tasks such as data retrieval, manipulation, and communication between components. Services are created as single instances that can be shared across multiple components, promoting code reusability and maintainability.

1. Introduction to Services:
   Services in Angular are classes that encapsulate a specific functionality or feature of the application. They are used to separate concerns and provide a centralized place for handling business logic. Some common use cases for services include data fetching from APIs, handling authentication, and sharing data between components.
2. Creating and Using Services:
   To create a service in Angular, you can use the Angular CLI or manually create a new class with the @Injectable decorator. Services can be injected into components or other services using Angular’s dependency injection mechanism. This allows components to access the services and utilize their functionality.
3. Dependency Injection in Angular:
   Dependency injection (DI) is a key concept in Angular that facilitates the creation and management of objects and their dependencies. Angular’s DI framework provides a way to declare dependencies in a class’s constructor, and the framework takes care of injecting the appropriate instances when creating objects. This helps to decouple components from their dependencies and makes testing and reusability easier.
4. Sharing Data Between Components using Services:
   One of the primary purposes of services is to facilitate data sharing between components. By creating a shared service, components can communicate and share data without directly depending on each other. The service acts as a mediator, managing the data and ensuring consistent updates across components.

// Example of a service in Angular
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: string;

  constructor() {
    this.data = 'Initial data';
  }

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

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

In this example, we create a DataService class as an Angular service using the @Injectable decorator. The service has a private data property and two methods: getData() to retrieve the data and setData() to update the data. The service can be injected into components, and they can call these methods to interact with the shared data.

To use the service in a component, you need to import it and inject it into the component’s constructor:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-component',
  template: `
    <h1>Data: {{ data }}</h1>
    <button (click)="updateData()">Update Data</button>
  `
})
export class MyComponent {
  data: string;

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }

  updateData(): void {
    const newData = 'New data';
    this.dataService.setData(newData);
    this.data = newData;
  }
}

In this component, we inject the DataService into the constructor and assign the initial value of data by calling the getData() method. The component has a button that triggers the updateData() method, which updates the data in the service using the setData() method.

Chapter 5: Angular Services and Dependency Injection introduces you to the important concept of services in Angular, their creation, usage, and how they facilitate data sharing between components. By understanding and leveraging services and dependency injection, you can build modular and maintainable applications with Angular.