Ahmed @Techiediaries

Follow

27 de Janeiro, 2020 – 3 min leia-se

Vamos aprender o que é um serviço Angular e depois vamos criar um exemplo com a última versão do Angular 9.

Um serviço Angular é um singleton que pode ser ligado com componentes ou outros serviços via Dependency Injection.

> ✋✋ Junte-se ao nosso grupo do Facebook 👈 para discutir qualquer coisa relacionada com o desenvolvimento Angular.

Segundo a Wikipedia:

Em engenharia de software, injeção de dependência é uma técnica pela qual um objeto fornece as dependências de outro objeto.

Não se intimide com este termo, significa simplesmente que Angular (ou uma parte de Angular, o injetor) se encarrega de instanciar os serviços e fornece a instância ao componente solicitante.

> ✋✋ Também verifique Angular 9/8 Serviços & Injecção de dependência via providedIn, root & qualquer Tutorial 👈

Segundo os documentos Angular:

DI é ligado à estrutura Angular e usado em todos os lugares para fornecer novos componentes com os serviços ou outras coisas que eles precisam. Os componentes consomem serviços; ou seja, você pode injetar um serviço em um componente, dando ao componente acesso a essa classe de serviço.

Você pode usar os serviços para organizar e compartilhar código através do seu aplicativo

Como definir um serviço angular?

Para definir uma classe como um serviço em Angular, use o decorador @Injectable() para fornecer os metadados que permitem a Angular injetá-lo em um componente como uma dependência.

Você precisa fornecer um serviço antes que ele possa estar disponível. Isto pode ser feito de três maneiras:

• Via os metadados do serviço passados ao decorador @Injectable() (O serviço estará disponível em qualquer lugar),
• Via a array dos provedores, em um módulo específico (O serviço está disponível apenas para os componentes e serviços do módulo),
• Via a array dos provedores em um componente específico (O serviço está disponível apenas para o componente).

Angular 9 Service by Example

Vamos agora criar um serviço por exemplo.

Certifique-se de ter um projeto Angular criado e Angular CLI v9 instalado.

Chegue à sua interface de linha de comando e navegue até à pasta do seu projecto:

$ cd your-angular-project

Próximo, gere um novo serviço executando o seguinte comando:

$ ng generate service my-example

Abra o src/app/my-example.service.ts file:

@Injectable({
providedIn: 'root'
})
export class MyExampleService { 
}

Abrir a propriedade providedIn, você não precisa fazer mais nada para começar a usar este serviço, exceto para implementar a funcionalidade que precisa fornecer. o valor raiz refere-se ao módulo de aplicação raiz.

Você também pode injetar outros serviços no seu novo serviço – por exemplo, o serviço HttpClient embutido – via seu construtor:

import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}

Após implementar seus métodos de serviço, você pode importar e injetar em outros componentes e chamar os métodos públicos do seu serviço no seu componente.

Segundo os documentos Angulares:

Tipicamente, o trabalho de um componente é habilitar a experiência do usuário e nada mais. Um componente deve apresentar propriedades e métodos de ligação de dados, a fim de mediar entre a visualização (renderizada pelo template) e a lógica da aplicação.

Um componente pode delegar certas tarefas aos serviços, tais como buscar dados do servidor, validar a entrada do usuário, ou fazer log diretamente no console.

Ao definir tais tarefas de processamento em uma classe de serviço injetável, você torna essas tarefas disponíveis para qualquer componente.