ngx-http-request-cache v0.0.1

ngx-http-request-cache

Configurable caching of HTTP requests in Angular.

Table of contents

• ngx-http-request-cache
  • Table of contents
  • Demo
  • Installation
    • NPM
  • Getting started
    • Options
      • Behavior
  • Customisation
  • TODO

Demo

For a demo, download the repository, install NPM packages, then run the following commands:

npm run start:api
npm run watch:lib
npm start

The first command will start a fake API that is used to make HTTP calls to, the second will compile ngx-http-request-cache, the third command will open a demo site that shows this working.

Installation

Install ngx-http-request-cache via NPM, using the command below.

NPM

npm install --save ngx-http-request-cache

Getting started

Import the NgxHttpRequestModule in your root application module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxHttpRequestModule } from 'ngx-http-request-cache';

@NgModule({
  //...
  imports: [
    //...
    NgxHttpRequestModule.forRoot()
  ],
  //...
})
export class AppModule { }

You can either pass a personalised config into forRoot or leave the method call empty to use the defaults. Options listed below.

Options

Behavior

1. None - This means that no requests will be cached
2. All - This means that all requests will be cached
3. PageLevel - This means that all requests will be cached until the URL changes.

Customisation

You can also customise the behavior per request.

...

let headers = new HttpHeaders();

// Change the behavior for this request specifically
// Can choose from any of the available behaviors
headers = headers.append(NgxHttpRequestHeaders.Cache, NgxHttpRequestBehavior);

// State that the result for this particular should be stored in local storage
headers = headers.append(NgxHttpRequestHeaders.LocalStorage, 'true');

// If this header is provided then this means that any existing cached value will be replaced
headers = headers.append(NgxHttpRequestHeaders.Replace, '');

this.http.get<any[]>('http://localhost:3000/users', { headers: headers });

...

TODO

1. Add timed caching
2. If cache exists for a lower/higher level make it configurable to use it.