Aula 5

Angular

Serviços e Uso de requisições HTTP

Serviços

Serviços são classes que centralizam lógicas reutilizáveis, como comunicação com APIs, compartilhamento de dados e regras de negócio. São injetados nos componentes por meio da injeção de dependência do Angular.

Exemplo 1 – Serviço de Mensagens

// message.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

Usando o Serviço em um Componente

// app.component.ts
import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="sendMessage()">Enviar Mensagem</button>
    <div *ngFor="let msg of messageService.messages">{{ msg }}</div>
  `
})
export class AppComponent {
  constructor(public messageService: MessageService) {}

  sendMessage() {
    this.messageService.add('Nova mensagem em ' + new Date());
  }
}

Uso de Requisições HTTP

O Angular possui o módulo HttpClient para realizar requisições HTTP como GET, POST, PUT e DELETE. Esse módulo permite comunicação com APIs REST de forma reativa usando Observables. Para usá-lo, é necessário importar o HttpClientModule no módulo principal da aplicação. 

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [/* seus componentes */],
  bootstrap: [/* componente principal */]
})
export class AppModule {}

Exemplo 2 – Serviço com Requisição HTTP

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

Usando o Serviço no Componente

// user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => this.users = data);
  }
}

Exemplo 3 – Serviço para Compartilhamento de Estado

// counter.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterService {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

Usando o Serviço em Dois Componentes

// counter-display.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter-display',
  template: `<p>Contador: {{ counterService.count }}</p>`
})
export class CounterDisplayComponent {
  constructor(public counterService: CounterService) {}
}

// counter-controls.component.ts
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter-controls',
  template: `
    <button (click)="counterService.increment()">+</button>
    <button (click)="counterService.decrement()">-</button>
  `
})
export class CounterControlsComponent {
  constructor(public counterService: CounterService) {}
}