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:

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

O Service vai ficar assim:

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:

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:

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.

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:

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.

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

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.

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.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

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

Share This