Como criar cache com Angular

Fala stackers!

Hoje vamos aprender a construir um Cache Service em Angular sem usar qualquer pacote externo, sendo assim deixando ele mais leve, rápido e fácil de dar manutenção.

Em uma aplicação comum de Angular, usamos sempre muitos titles, labels e headers.

Porém ao surgir a necessidade de colocar essas informações em outros locais, temos assim o conceito de dictionary, que basicamente vai guardar essas informações para nós.

Agora vamos ver como montar tudo isso de maneira rápida e tranquila.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Criando um Cache Service em Angular

Usamos o CLI do Angular para criar um Service de maneira ágil e simples. Segue a linha:

ng g s services/content

Esse comando gera um Service do Angular ( dependendo da versão é automaticamente exportado para o app.module.ts ).

O Service vai ficar assim:

import { Injectable } from '@angular/core';
 
@Injectable({
   providedIn: 'root'
})
export class ContentService {
   constructor() {}
}

Criando um arquivo dictionary .JSON

Vamos criar o arquivo de dictionary que irá conter todas as informações dos titles, lables e etc. Lembrando iremos usar o arquivo apenas para consumir os dados vindo de fora.

A minha recomendação é criar uma pasta com o nome de dictionary e criar um arquivo como principal.dictionary.json, mas você pode criar com o nome que melhor lhe agrade ou mesmo criar outros arquivos e deixar ele mais separado caso a aplicação necessite disso é claro.

O arquivo deve ficar mais ou menos assim:

{
  "pages": {
    "home": {
      "title": "Home",
      "name": "Company name"
    },
    "sobre": {
      "title": "Sobre",
      "author": "Dener Troquatte"
    }
  }
}

Preparando o conteúdo de Service para reusabilidade

Começando com a criação de uma property privada que será nomeada como cache. Fazemos isso pois podemos sobrescrever o BehaviorSubject e ao atualizar um item ele será replicado em toda a aplicação. E vamos importar também o dictionary:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import content from '../dictionary/ principal.dictionary.json';

@Injectable({
   providedIn: 'root'
})
export class ContentService {
  private cache: BehaviorSubject<any> = new BehaviorSubject(null);
   constructor() {}
}

Criaremos um metódo chamado content no service e devemos ter a certeza que o BehaviorSubject é null, para assim adicionar o conteudo de content no cache.

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

@Injectable({
   providedIn: 'root'
})
export class ContentService {
  private cache: BehaviorSubject<any> = new BehaviorSubject(null);
  constructor() {}

  public content(): Observable<any> {
    if (this.cache.getValue() !== null) {
      return new Observable<any>((observer) => {
        observer.next(this.cache.getValue());
      });
    }
  }
}

Agora para expor o BehaviorSubject, devemos retornar o cache. Deixamos o retorno como any pois não tem muita necessidade de tipar o dictionary. Mas fique à vontade para fazê-lo.

E deixamos tudo pronto dentro do nosso Service. O código completo deve ser assim:

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

import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ContentService {
  private cache: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor(private http: HttpClient) {}

  public content(): Observable<any> {
    if (this.cache.getValue() !== null) {
      return new Observable<any>((observer) => {
        observer.next(this.cache.getValue());
      });
    }

    return this.http.get('./assets/content.json').pipe(
      map((res) => {
        this.cache.next(res);
        return this.cache.getValue();
      })
    );
  }
}

Usando o Content Service

A grande maioria dos programadores Front-End sabem criar um componente no Angular com o CLI, que é à minha maneira preferida. Vamos gerar uma HomepageComponent.

import { Component } from '@angular/core';
 
@Component({
    selector: 'homepage',
    templateUrl: './homepage.component.html',
    styleUrls: ['./homepage.component.scss']
})
export class HomepageComponent {
    constructor(private contentService: ContentService) {}
}

Usaremos o ContentService dentro do HTML, vamos criar uma propriedade content e vamos adicionar o valor.

import { Component } from '@angular/core';
import { ContentService } from '../service/cache';

@Component({
    selector: 'homepage',
    templateUrl: './homepage.component.html',
    styleUrls: ['./homepage.component.scss']
})
export class HomepageComponent {
    public content: any = null
    constructor(private contentService: ContentService) {
        this.content = this.contentService.content()
        console.log('content:', content)
   }
}

Via console.log(), nós podemos testar e ver se tudo está funcionando como esperado.
Agora vamos para o HTML e usaremos a expression nullish collision para adicionar os conteúdos do dictionary a nossa página.

{{content?.pages?.home?.title ?? 'title'}}

Nullish collision previne que fique um erro na tela, caso aja um ele simplesmente ira mostra “title” ao invés do erro. Mas caso de tudo certo ele simplesmente mostra o valor do dictionary.

Conclusão

Agora nós criamos um Cache Service no Angular, sem usar qualquer pacote externo. Ele é mais leve e rápido, e isso é a melhor parte.

Diversas vezes, nós tomamos o caminho mais complicado para resolver alguma coisa, e tudo pode ser mais simples.

Espero que isso lhe ajude a montar uma aplicação Angular mais fácil de manter.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.