ngx-cachemanager

Líbrería Angular para la gestión de la cache implícita.

Con esta librería se pretende desacoplar la propia lógica de cache sobre el desarrollador, de tal manera que, le permite más control sobre ella sin necesidad de líneas de código solo de algunos Decorators.

Actualmente la comunidad en caso necesario, sulee delegar esta cache en un interceptor HTTP, lo cúal, no esta mal pero, para formatos de aplicación CRUD no suele ser válido además que implica saber que se realiza una llamada HTTP.

Con esta librería ignoraremos lo que hay por detras, ngx-cachemanager hace esto por ti, da igual si la petición es sincrona o no, Promise o Observable si el tipo está definido ngx-cachemanager sabrá que hacer.

En caso de que no se defina el tipo que devuelve la función ngx-cachemanager tomará esta cache como síncrona y puede llevar a errores en caso de que si lo séa.

Un ejemplo:

MAL (RETURN TYPE UNDEFINED async = false)

@Cache({map: 'tasks'})
private getTasks(range) {

    return this.projectService.getProject(
      this.clientId
    );
  }

BIEN (RETURN TYPE Observable async = true)

@Cache({map: 'tasks'})
private getTasks(range): Observable<ITaskDetail[]> {

    return this.projectService.getProject(
      this.clientId
    );
  }

Table of Contents

• Quick Start
• The Basics
• Working with a cache
• Configuration Options
• Using ngx-cachemanager with $http
• Using ngx-cachemanager with localStorage
• API Reference

Quick Start

bower install --save @grec0/ngx-cachemanager or npm install --save @grec0/ngx-cachemanager.

2 opciones para inicializar la configuración:
1) APP_INITIALIZER (recomendada carga en nivel superior) "loadGlobalConfig(config: ConfigCacheGlobal): Promise<boolean>;"

2) Root Module environment (carga en nivel inferior) NgxCachemanagerModule.forRoot(config);

1) APP_INITIALIZER app.module.ts

export function initializer(cacheConfig: CacheConfigService): () => Promise<any> {
	return (): Promise<any> => cacheConfig.loadGlobalConfig({});
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxCachemanagerModule
  ],
  providers: [
    {
			provide: APP_INITIALIZER,
			useFactory: initializer,
			deps: [CacheConfigService],
			multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2) Root Module environment app.module.ts

import{ environment } from '@environment'; // environment contiene el objeto de configuración de cache descrito mas abajo.



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgxCachemanagerModule.forRoot(environment)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The Basics

Primero extendemos nuestro servicio de la clase CacheableService y aplicamos el decorator encima del @injectable con la estrategia requerida:

@Cacheable({defaultStrategy:'memory', logger: true})
@Injectable({providedIn:'root'})
export class UserService extends CacheableService {

  @Cache({timeout: 10000, map: 'users-search'})
  getUsers(clientId: string): Observable<Array<User>> {
    return this.userHttpService.getUsers(clientId);
  }
}