Como criar cache com Angular

Conteúdo

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
xxxxxxxxxx
 
0
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() {}
}
xxxxxxxxxx
 
0
import { Injectable } from '@angular/core';
1
 
2
@Injectable({
3
   providedIn: 'root'
4
})
5
export class ContentService {
6
   constructor() {}
7
}

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"
    }
  }
}
xxxxxxxxxx
 
0
{
1
  "pages": {
2
    "home": {
3
      "title": "Home",
4
      "name": "Company name"
5
    },
6
    "sobre": {
7
      "title": "Sobre",
8
      "author": "Dener Troquatte"
9
    }
10
  }
11
}

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&lt;any&gt; = new BehaviorSubject(null);
   constructor() {}
}
xxxxxxxxxx
 
0
import { Injectable } from '@angular/core';
1
import { BehaviorSubject } from 'rxjs';
2
import content from '../dictionary/ principal.dictionary.json';
3
4
@Injectable({
5
   providedIn: 'root'
6
})
7
export class ContentService {
8
  private cache: BehaviorSubject&lt;any&gt; = new BehaviorSubject(null);
9
   constructor() {}
10
}

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&lt;any&gt; = new BehaviorSubject(null);
  constructor() {}

  public content(): Observable&lt;any&gt; {
    if (this.cache.getValue() !== null) {
      return new Observable&lt;any&gt;((observer) =&gt; {
        observer.next(this.cache.getValue());
      });
    }
  }
}
xxxxxxxxxx
 
0
import { Injectable } from '@angular/core';
1
import { BehaviorSubject } from 'rxjs';
2
3
@Injectable({
4
   providedIn: 'root'
5
})
6
export class ContentService {
7
  private cache: BehaviorSubject&lt;any&gt; = new BehaviorSubject(null);
8
  constructor() {}
9
10
  public content(): Observable&lt;any&gt; {
11
    if (this.cache.getValue() !== null) {
12
      return new Observable&lt;any&gt;((observer) =&gt; {
13
        observer.next(this.cache.getValue());
14
      });
15
    }
16
  }
17
}

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&lt;any&gt; = new BehaviorSubject(null);

  constructor(private http: HttpClient) {}

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

    return this.http.get('./assets/content.json').pipe(
      map((res) =&gt; {
        this.cache.next(res);
        return this.cache.getValue();
      })
    );
  }
}
xxxxxxxxxx
 
0
import { Injectable } from '@angular/core';
1
import { HttpClient } from '@angular/common/http';
2
3
import { BehaviorSubject, Observable } from 'rxjs';
4
import { map } from 'rxjs/operators';
5
6
@Injectable({
7
  providedIn: 'root',
8
})
9
export class ContentService {
10
  private cache: BehaviorSubject&lt;any&gt; = new BehaviorSubject(null);
11
12
  constructor(private http: HttpClient) {}
13
14
  public content(): Observable&lt;any&gt; {
15
    if (this.cache.getValue() !== null) {
16
      return new Observable&lt;any&gt;((observer) =&gt; {
17
        observer.next(this.cache.getValue());
18
      });
19
    }
20
21
    return this.http.get('./assets/content.json').pipe(
22
      map((res) =&gt; {
23
        this.cache.next(res);
24
        return this.cache.getValue();
25
      })
26
    );
27
  }
28
}

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) {}
}
xxxxxxxxxx
 
0
import { Component } from '@angular/core';
1
 
2
@Component({
3
    selector: 'homepage',
4
    templateUrl: './homepage.component.html',
5
    styleUrls: ['./homepage.component.scss']
6
})
7
export class HomepageComponent {
8
    constructor(private contentService: ContentService) {}
9
}

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)
   }
}
xxxxxxxxxx
 
0
import { Component } from '@angular/core';
1
import { ContentService } from '../service/cache';
2
3
@Component({
4
    selector: 'homepage',
5
    templateUrl: './homepage.component.html',
6
    styleUrls: ['./homepage.component.scss']
7
})
8
export class HomepageComponent {
9
    public content: any = null
10
    constructor(private contentService: ContentService) {
11
        this.content = this.contentService.content()
12
        console.log('content:', content)
13
   }
14
}

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'}}
xxxxxxxxxx
 
0
{{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.

Como criar cache com Angular

Como criar cache com Angular

Criando um Cache Service em Angular

Criando um arquivo dictionary .JSON

Preparando o conteúdo de Service para reusabilidade

Usando o Content Service

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Como criar cache com Angular

Como criar cache com Angular

Criando um Cache Service em Angular

Criando um arquivo dictionary .JSON

Preparando o conteúdo de Service para reusabilidade

Usando o Content Service

Conclusão

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Tenha uma carreira
Front-end de Sucesso!