Olá Francisco, tudo bem?
Agradecemos o feedback e estamos trabalhando para incluir melhorias nos próximos cursos, a fim de atender expectativas como as que você comentou.
Vou tentar esclarecer um pouco os conceitos, tá?
Services, em Angular, são classes responsáveis por guardar lógica de negócios, funções e dados úteis, por buscar dados do servidor e enviar dados ao servidor. Isso ajuda a separar responsabilidades.
Como consta na documentação:
Um componente pode delegar determinadas tarefas aos serviços, como buscar dados do servidor, validar a entrada do usuário ou fazer login.
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.
Ao definir essas tarefas de processamento em uma classe de serviço injetável, você disponibiliza essas tarefas para qualquer componente, aumenta a modularidade e a reutilização.
Para definir uma classe como service , você precisa utilizar o decorator @Injectable(), assim o Angular vai saber que é uma classe injetável
transferencia.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Transferencia } from '../models/transferencia.model';
@Injectable({
providedIn: 'root',
})
export class TransferenciaService {
private listaTransferencia: any[];
private url = 'http://localhost:3000/transferencias/';
constructor(private httpClient: HttpClient) {
this.listaTransferencia = [];
}
todas() {
return this.httpClient.get<Transferencia[]>(this.url);
}
//outros métodos da classe
}
Já as dependências são serviços ou objetos que uma classe precisa para desempenhar sua função. Injeção de dependência, ou DI, é um padrão de design no qual uma classe solicita dependências de fontes externas em vez de criá-las. Por exemplo, se a classe A tem dependência na classe B, então nós instanciamos a classe B e injetamos a instância na classe A para que ela possa utilizar.
Para injetar uma dependência em um componente, nós fornecemos um argumento no construtor com o tipo de dependência.
extrato.component.ts
import { Component } from '@angular/core';
import { TransferenciaService } from '../services/transferencia.service';
@Component({
selector: 'app-extrato',
templateUrl: './extrato.component.html',
styleUrls: ['./extrato.component.scss'],
})
export class ExtratoComponent implements OnInit {
//código anterior
constructor(private service: TransferenciaService) {}
ngOnInit(): void {
this.service.todas().subscribe((x) => (this.transferencias = x));
}
}
O professor criou um serviço (transferencia.service.ts) e utilizou a injeção de dependência, para injetar esse serviço no componente (extrato.component.ts) para, assim, o componente ter acesso aos métodos da classe injetada (nesse caso, ele utilizou o método todas()).
Espero ter ajudado, bons estudos!