Angular Injeção de dependências e Services!

Vamos falar um pouco sobre o que é Services, podemos pensar nele como uma function. Podemos pegar uma seção do código que usamos mais de uma vez em nosso projeto e envolvemos ela em uma função. Sendo assim, podemos usar ela mais de uma vez sem precisar reescrever o código.

Services são a mesma coisa, eles fornecem um serviço ou funcionalidade a vários componentes.

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

O que é Injeção de Dependência?

Podemos pensar de forma simples, ele provê tudo que precisamos para um componente funcionar corretamente.

Vamos pensar da seguinte forma, nós definimos uma function em um arquivo separado que se chama “function-generica”, e queremos usar essa function em uma outra section do nosso projeto.

Não podemos simplesmente usar ela, o Angular não sabe o que é e onde encontrar, dessa forma precisamos importar o código da function para nossa “página” desejada.

Mas pensa comigo e se essa function só funcione se tiver um import de outro local? Então aí entra a injeção de dependência, ela cuida de tudo isso para nós.

Como criar um Service

Um Service é apenas uma classe do TypeScript com o decorator “@Injectable” nele, é bem simples criar manualmente isso.

Porém também temos a opção de usar o CLI e a palavra reservada “service” para isso e sabemos que ele cuida de algumas coisas para nós.

ng generate service nome_service

Vamos criar um service com o nome de “mensagem”.

ng generate service mensagem

Vamos pensar que ele pode cuidar das mensagens que aparecem para o usuário ao adicionar itens ao carrinho de compras, por exemplo.

Assim como as diretivas, são gerados dois arquivos o “mensagem.spec.ts” e o “mensagem.service.ts”.

Ao abrir o “mensagem.service.ts”, temos o seguinte:

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

Como usamos o CLI para gerar o arquivo, ele já fez algumas coisas para nós.

• O @Injectable já foi adicionado e importado;
• Foi especificado o provider como “root” e iremos corrigir isso em algum momento;
• E como sempre falamos, ele já coloca a palavra Service pelas boas práticas.

Agora nós precisamos adicionar o service em nosso “app.module.ts”. O service precisa ser adicionado manualmente.

Duas coisas que precisamos fazer.

1. Importar a classe MessageService do “message.service.ts”;
2. Adicione a classe MessageService no array de providers.

Agora tudo pronto para usar nosso service.

ProvidedIn “root”

Podemos fazer isso de algumas formas, a maneira mais fácil e recomendada é a seguinte.

@Injectable({
  providedIn: Type<any> | 'root'
})

• Especificamos o valor como “root”, isso significa que toda a nossa aplicação tem acesso a ele;
• O “Type<any>” nos permite especificar um @NgModule, se tivermos mais de um. Um exemplo é o UserModule.

É recomendado usar o “@Injectable” para fazer o registro do provider.

O Angular automaticamente remove os services que não estão sendo usados, assim deixando o nosso compilador mais otimizado.

Usando um Service

Até o momento o nosso service não está fazendo absolutamente nada.

Vamos fazer da maneira mais simples e retornar uma mensagem.

import { Injectable } from '@angular/core';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';
 
@Injectable({
  providedIn: 'root'
})
export class MensagemService {
  constructor() { }
  public printMensagem() {
    return 'Isso é um service';
  }
}

Agora podemos usar ele em nossos componentes e para isso será usado a injeção de dependências, como no post de Diretivas customizadas.

Vamos usar em nosso componente padrão.

import { Component } from '@angular/core';
import { MensagemService } from './message.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  constructor(private msgService: MensagemService) { }
}

No exemplo estamos fazendo a injeção do service.

1. Nós importamos o service no topo;
2. Atribuímos a classe service ao objeto msgService no construtor.

Agora podemos acessar o printMensagem() pelo msgService.

import { Component } from '@angular/core';
import { MensagemService} from './message.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  constructor(private msgService: MensagemService) { }
 
  public getMensagem() {
    return this.msgService.printMensagem();
  }
}

Esse método simplesmente retorna a mensagem do “printMensagem()”.

E finalmente vamos usar a interpolation para mostrar a mensagem em tela.

<p>{{ getMensagem() }}</p>

Ao rodar no browser a mensagem será mostrada em tela. Agora nós podemos usar qualquer mensagem em qualquer página para o usuário.