Angular 4: Usando decorators para injetar as Environments

Na nossa story de hoje vamos ver como podemos fazer uso dos Decorators do Typescript para injetar os valores das váriaveis do arquivo de environment. Isso possibilitará concentrarmos a importação do arquivo environments.json em um ponto único do nosso projeto e quando precisarmos usar algum valor dele na aplicação poderemos usar a anotação @Environment('urlService') em algum atributo das nossas classes.

Conhecendo o TypeScript Decorator

Os decorators oferecem a possibilidade de adicionar metadados e comportamentos a declaração de classes, métodos e propriedades. Segundo a documentação, é um recurso experimental no TypeScript e pode ter mudanças em releases futuras.

Por padrão os decorators usam a sintaxe @decoratorName onde decoratorName é uma função que deve ser invocada em tempo de execução.

• target - Onde estará sendo aplicado o decorator.
• propertyKey - Nome do método, propriedade ou classe que receberá o decorator. (String ou Simbol).
• descriptor - instância da insterface TypedPropertyDescriptor.

Criando Nossa Aplicação Angular

Para criar nosso projeto de teste vamos utilizar o Angular CLI (Command line interface for Angular) com ele será possível criar nosso projeto apenas digitando algumas linhas de comando.

Antes será necessário estar com o NodeJS instalado e configurado, pois faremos uso do NPM (gerenciador de pacotes do Node). Após instalado e configurado vamos criar nosso projeto Angular, para facilitar vamos seguir os passos descritos no GitHub do Angular CLI.

Primeiro vamos instalar o CLI rodando npm install -g @angular/cli, após finalizar a instalação vá até um diretório de sua preferência e digite ng new test-decorator após a instalação teremos a seguinte estrutura:

Alguns arquivos podem ser específicos da sua IDE

Como sabemos, dentro da pasta src/environments ficam os arquivos que colocamos as variáveis de ambiente da aplicação. Como estamos criando um projeto novo são eles que vamos utilizar para este exemplo.

Antes vamos fazer uma alteração para saber se nosso projeto está Ok. Abra o arquivo src/app/app.component.html e modifique seu conteúdo para:

Na raiz do seu projeto, por command line, execute o comando ng serve, após finalizar o build da aplicação abra seu navegador e digite o seguinte endereço http://localhost:4200/. A seguinte tela será apresentada:

Usando Decorators para Injetar as Variáveis Environments

Abrindo o arquivosrc/app/app.component.ts vemos que o atributo titleestá recebendo a atribuição da string app vamos mover essa string para o arquivo environments, acesse o arquivo src/environments/environments.ts e altere seu conteúdo para:

Criaremos uma pasta com o nome decorators dentro de src/app

dentro dessa nova pasta vamos criar um arquivo environment.decorators.ts que conterá nossa função.

Agora, dentro do novo arquivo vamos colocar o conteúdo da nossa função.

modificaremos o arquivo src/app/app.component.ts para que ele passe a utilizar o decorator no atributo title.

Na raiz do projeto, execute novamente o comando ng serve para subir o projeto ou se ja estiver em pé utilize Ctrl + C para parar e execute ng serve para subir novamente. Após o fim do build abra novamente o navegador no endereço http://localhost:4200/.

Vemos que funcionou perfeitamente. Bom, é isso. Aprendemos nessa story uma feature interessante do TypeScript e uma maneira de utilizarmos para deixar nosso código menos verboso.

Repositórios do Projeto

Projeto: https://github.com/diegosilva13/test-decorator

Referências

https://www.typescriptlang.org/docs/handbook/decorators.html