Angular Creating And Using Services Complete Guide

1. Understanding Angular Services

Services in Angular are typically responsible for providing certain functionalities like fetching data, processing it, and storing it. They act as the middle layer between your components and the backend or other modules. By encapsulating these functionalities within services, you can ensure they’re available to any component that needs them without duplicating code.

2. Generating a Service

You create services using the Angular CLI. This generates boilerplate code which includes the service class and metadata (such as @Injectable).

ng generate service myService
# or shorthand:
ng g s myService

Running this command will create two files:

• my-service.service.ts: The TypeScript file where your service logic lives.
• my-service.service.spec.ts: Unit test related to your service.

3. @Injectable Decorator

The @Injectable() decorator marks the class as an injectable service and allows Angular’s dependency injection system to manage its lifecycle and dependencies.

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

@Injectable({
  providedIn: 'root' // Registers the service globally
})
export class MyServiceService {

  constructor() {
    console.log('MyServiceService was created!');
  }

  getHelloMessage(): string {
    return 'Hello from myService!';
  }
}

• providedIn: 'root': Ensures the service is provided at the root injector, making it globally accessible throughout the app.

4. Providing the Service

There are multiple ways to provide a service in Angular:

• Globally (recommended): Use the providedIn: 'root' as shown in step 3.

• Locally: Provide the service in the providers array of a particular component or module.

import { NgModule } from '@angular/core';
import { MyComponent } from './my-component/my-component.component';
import { MyServiceService } from './my-service/my-service.service';

@NgModule({
  declarations: [MyComponent],
  providers: [MyServiceService] // Provide service locally
})
export class MyModule {}

5. Injecting a Service into a Component

Once you’ve created and provided the service, you can inject it into your components via the constructor.

import { Component, OnInit } from '@angular/core';
import { MyServiceService } from '../my-service/my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
  message: string;

  constructor(private myService: MyServiceService) { }

  ngOnInit(): void {
    this.message = this.myService.getHelloMessage();
  }
}

• Dependency Injection (DI): Here, myService is injected through Angular’s DI mechanism.

6. Sharing Data Between Components

A common use case for services is to share data between components. Let's see how we can achieve this.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any[] = [];

  constructor() {}

  addData(dataObject: any): void {
    this.data.push(dataObject);
  }

  getData(): any[] {
    return this.data;
  }
}

You can then consume this service in multiple components.

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

@Component({
  selector: 'app-first',
  template: '<button (click)="addData()">Add Data</button>'
})
export class FirstComponent {
  constructor(private dataService: DataService) {}

  addData() {
    this.dataService.addData({ id: 1, name: 'John Doe' });
  }
}

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

@Component({
  selector: 'app-second',
  template: '<div *ngFor="let item of data">{{ item.name }}</div>'
})
export class SecondComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.data = this.dataService.getData();
  }
}

Here, FirstComponent can add data to the shared service instance, and SecondComponent will be able to access that same data because it’s managed by the same service instance.

7. Using HttpClient for HTTP Requests

Often, services are used to handle HTTP requests to fetch data from an API. Angular provides HttpClient for this purpose.

ng generate service api
# or shorthand:
ng g s api

Then, provide HttpClientModule in your AppModule or a feature module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // Import HttpClientModule
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Next, use HttpClient in your service to make API calls.

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

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

  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

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

Finally, inject ApiService into a component and subscribe to the observable returned by getPosts().

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api/api.service';

@Component({
  selector: 'app-posts',
  template: `
    <ul>
      <li *ngFor="let post of posts">
        {{ post.title }}
      </li>
    </ul>`
})
export class PostsComponent implements OnInit {
  posts: any[] = [];

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

8. Organizing Services in Modules

As your application grows, it’s good practice to organize services into feature-specific modules.

ng generate module users
# or shorthand:
ng g m users

Then, declare and provide the service within the feature module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserService } from './user.service'; // Import service

@NgModule({
  imports: [CommonModule],
  providers: [UserService] // Provide service within this module
})
export class UsersModule {}

Now, any component in the UsersModule can inject the UserService.

9. Lifecycle Hooks in Services

Unlike components, services don't have lifecycle hooks such as ngOnInit. However, you can use constructors to initialize necessary operations or subscriptions when the service is instantiated.

10. Testing Services

Unit testing services in Angular is straightforward. You can use Jasmine/Karma as testing frameworks.

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

describe('DataService', () => {
  let service: DataService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(DataService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should add and get data correctly', () => {
    const testData = { id: 1, name: 'John' };
    
    service.addData(testData);
    const result = service.getData();
    
    expect(result.length).toBe(1);
    expect(result[0].name).toBe('John');
  });
});

• TestBed: Used to configure testing modules.
• TestBed.inject(): Retrieves a service from the testing injector.

11. Important Patterns and Practices

• Singleton Pattern: By default, services in Angular act as singletons, meaning one instance is created and reused across the application unless otherwise specified.

• RxJS Observables: Use RxJS observables for handling asynchronous operations. Observables provide powerful tools to manipulate data streams and handle side effects.

• Injection Tokens: Sometimes, more complex scenarios might require the use of injection tokens instead of directly injecting class instances.

• Providers Array: Ensure that each service is properly provided in the appropriate module or component. Misconfiguration here can lead to issues like services being instantiated multiple times or not being available at all.

12. Conclusion:

Using services in Angular is key to building maintainable and scalable applications by separating concerns and reusing code across different parts of the app. By leveraging Angular’s dependency injection and adhering to best practices, you can efficiently manage data flow and operations in your application.