Best Practices for Creating and Returning Observables in Angular 2 Services

Introduction

In Angular 2 applications, the service layer is responsible for fetching data from databases or other sources and providing it to components via Observables. Observables are core concepts in the RxJS library, enabling asynchronous data stream handling. However, directly returning HTTP responses to components can lead to code redundancy and maintenance issues. Based on best practices, this article explores how to create and return Observables containing model arrays in services to improve code clarity and reusability.

Fundamentals of Observables and Subjects

An Observable is an object that represents a data stream and can be subscribed to receive data. A Subject is a special type of Observable that allows pushing values to multiple observers. In Angular 2, services typically use the HTTP client to send requests and return Observables. For example, initial code might look like:

this.people = http.get('api/people.json').map(res => res.json());

Here, http.get returns an Observable, and the map operator transforms the response into a JSON object. But when components subscribe, they must handle data transformation manually, which may not be optimal.

Implementing Data Caching with ReplaySubject

ReplaySubject is a type of Subject that caches recent values and immediately emits them to new subscribers. This is useful for ensuring components receive the latest data upon subscription. For instance, in a service, we can define a ReplaySubject to store project data:

let project = new ReplaySubject(1);

// Subscribe to the data stream
project.subscribe(result => console.log('Subscription Streaming:', result));

// Send an HTTP request and push the result
http.get('path/to/whatever/projects/1234').subscribe(result => {
    project.next(result);
    // Delay subscription to demonstrate ReplaySubject behavior
    setTimeout(() => project.subscribe(result => console.log('Delayed Stream:', result)), 3000);
});

The output shows that both initial and delayed subscriptions receive the same data, proving ReplaySubject's caching capability. In an Angular service, this can be encapsulated as:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { ReplaySubject } from 'rxjs';

@Injectable()
export class ProjectService {
    public activeProject: ReplaySubject<any> = new ReplaySubject(1);

    constructor(private http: Http) {}

    public load(projectId: string) {
        this.http.get('/projects/' + projectId).subscribe(res => this.activeProject.next(res));
        return this.activeProject;
    }
}

Components can subscribe to activeProject to get data without worrying about subscription timing.

Handling One-Time Operations with AsyncSubject

If data needs to be loaded only once and you want to close the stream after all subscribers are done, use AsyncSubject. AsyncSubject emits only the last value when the stream completes. Example code:

let project = new AsyncSubject();

project.subscribe(
    result => console.log('Subscription Streaming:', result),
    err => console.log(err),
    () => console.log('Completed')
);

http.get('path/to/whatever/projects/1234').subscribe(result => {
    project.next(result);
    project.complete();
    setTimeout(() => project.subscribe(project => console.log('Delayed Sub:', project)), 2000);
});

The output shows that even after completion, delayed subscriptions still get the last value. This is suitable for scenarios not requiring continuous updates.

Data Transformation and Nested Operations

In services, HTTP responses often need transformation, such as mapping JSON data to model arrays. The map operator facilitates this:

public call = http.get(whatever).map(res => res.json());

For nested HTTP calls, avoid multiple nested subscriptions and use the flatMap (or mergeMap) operator to flatten the stream. Example:

var myThing = http.get('path').flatMap(result1 => 
    http.get('other/' + result1).flatMap(response2 => 
        http.get('another/' + response2)));

This simplifies code and maintains the Observable chain structure.

Complete Service Implementation Example

Combining the above concepts, a complete Angular service might look like:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ReplaySubject } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class PeopleService {
    private peopleSubject: ReplaySubject<any[]> = new ReplaySubject(1);

    constructor(private http: Http) {}

    getPeople(): ReplaySubject<any[]> {
        this.http.get('api/people.json')
            .map((res: Response) => res.json())
            .subscribe(data => {
                // Assume transforming data to model array
                const peopleArray = data.map((item: any) => ({
                    id: item.id,
                    name: item.name,
                    age: item.age
                }));
                this.peopleSubject.next(peopleArray);
            });
        return this.peopleSubject;
    }
}

In a component, it can be used as follows:

import { Component, OnInit } from '@angular/core';
import { PeopleService } from './people.service';

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

    constructor(private peopleService: PeopleService) {}

    ngOnInit() {
        this.peopleService.getPeople().subscribe(people => this.people = people);
    }
}

This approach ensures the service handles data transformation, and components only need to subscribe.

Avoiding Common Pitfalls

When using Observables, be cautious of memory leaks. For example, if a Subject in a service is not properly cleaned up, it may accumulate subscriptions. It is recommended to unsubscribe when components are destroyed:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({...})
export class PeopleComponent implements OnInit, OnDestroy {
    private subscription: Subscription;

    ngOnInit() {
        this.subscription = this.peopleService.getPeople().subscribe(people => this.people = people);
    }

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}

Additionally, avoid storing data in global variables in services; instead, rely on Observable streams to manage state.

Conclusion

In Angular 2 services, using RxJS tools like ReplaySubject, AsyncSubject, and flatMap enables efficient creation and return of Observables, facilitating data transformation and stream management. By encapsulating business logic in the service layer, component code becomes cleaner and more maintainable. The examples and best practices provided in this article help developers build robust Angular applications, reducing errors and improving performance when handling asynchronous data streams. Always remember to test and optimize subscription logic to ensure application scalability.