angular-async-cache

angular async cache

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

A simple utility to help with caching of promises and observables to enable an easy offline first approach in angular 2.0+ apps

Installation

Install through npm:

npm install --save angular-async-cache

Sample usage

import { NgModule, Component, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { AsyncCache, LocalStorageDriver, MemoryDriver, AsyncCacheModule, AsyncCacheOptions, CachedHttp } from 'angular-async-cache';

export function asyncCacheOptionsFactory(): AsyncCacheOptions {
  return new AsyncCacheOptions({
    driver: new LocalStorageDriver(), // default cache driver to use. Default in memory. You can also roll your own by implementing the CacheDriver interface
    fromCacheAndReplay: true // this is the special sauce - first emit the data from localstorage, then re-fetch the live data from the API and emit a second time. The async pipe will then re-render and update the UI
  });
}

// declare in your module
@NgModule({
  imports: [
    AsyncCacheModule.forRoot({
      provide: AsyncCacheOptions,
      useFactory: asyncCacheOptionsFactory
    })
  ]
})
class MyModule {}

// use in your service
@Injectable()
class CarService {

  constructor(
    private http: Http, 
    private asyncCache: AsyncCache, 
    private memoryDriver: MemoryDriver
  ) {}
  
  getCars(): Observable<Car[]> {
  
    const cars$: Observable<Car[]> = this.http.get('/cars').map(res => res.json());
    return asyncCache.wrap(cars$, '/cars', {
      driver: this.memoryDriver, // override the default and cache the data in memory
    });
  
  }

}

// finally use with the async pipe in your components template
@Component({
  template: `
    <div *ngFor="let car of cars | async">
      {{ car.model }}
    </div>
  `
})
class MyComponent {

  cars: Observable<Car[]>;

  constructor(carService: CarService) {
    this.cars = carService.getCars();
  }

}

// alternatively use the asyncCache pipe in your template, this way you also dont need to wrap the observable beforehand
@Component({
  template: `
    <div *ngFor="let car of cars | asyncCache:'/cars' | async">
      {{ car.model }}
    </div>
  `
})
class MyComponent {

  cars: Observable<Car[]>;

  constructor(http: Http) {
    this.cars = http.get('/cars').map(res => res.json());
  }

}

// there is also a simple wrapper around the http service for making cached requests
@Injectable()
class CarService {

  constructor(private cachedHttp: CachedHttp) {}

  getCars(): Observable<Car[]> {
    return this.cachedHttp.get('/cars'); // note how we don't do `.map(res => res.json())` as this is already handled by the cachedHttp service
  }

}

Development

Prepare your environment

• Install Node.js and NPM (should come with)
• Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

License

MIT

Changelog

0.3.0 (2016-11-06)

Bug Fixes

• throw a helpful error when a non promise returning function is passed (0e093db)

Features

• cachedHttp: add the cachedHttp service (375b0ed)

BREAKING CHANGES

• cachedHttp: @angular/http is now required to use this module

<a name="0.2.0"></a>