O Angular é um framework de aplicativos da web desenvolvido pela Google que permite a criação de aplicativos web de uma maneira mais rápida e fácil. Ele utiliza o padrão de projeto Model-View-Controller (MVC) e foi criado com base no TypeScript, um superconjunto de JavaScript que adiciona tipagem estática e outras funcionalidades avançadas.
O RxJS é uma biblioteca JavaScript para criação de programas assíncronos baseados em eventos. Ele fornece uma série de operações para trabalhar com sequências de valores que podem chegar ao longo do tempo, como eventos de mouse, mensagens de rede, ou uma stream de dados.
No Angular, o RxJS é amplamente utilizado para gerenciamento de estado e comunicação entre componentes. Por exemplo, você pode usar o RxJS para fazer uma solicitação HTTP e retornar os dados para o componente quando a resposta chegar. Isso é chamado de programação reativa, e é uma maneira de lidar com a natureza assíncrona do JavaScript de uma maneira mais simples e precisa.
Em resumo, o Angular e o RxJS são duas tecnologias poderosas que são muitas vezes usadas juntas para criar aplicativos web de alto desempenho e escaláveis.
Aqui está um exemplo de como você poderia usar o Angular e o RxJS para criar um CRUD (Create, Read, Update, Delete) simples usando uma API REST: Primeiro, você precisaria criar um componente Angular para exibir os dados e gerenciar as operações de CRUD. Aqui está o template HTML para o componente: <h1>Lista de Produtos</h1>
<button (click)="create()">Criar Produto</button>
<table>
<tr *ngFor="let product of products">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>
<button (click)="update(product)">Editar</button>
<button (click)="delete(product)">Deletar</button>
</td>
</tr>
</table>
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
products: any[];
constructor(private http: HttpClient) {
this.getProducts().subscribe(data => this.products = data);
}
getProducts(): Observable<any[]> {
return this.http.get<any[]>('/api/products');
}
create() {
// Abre uma caixa de diálogo para criar um novo produto
}
update(product: any) {
// Abre uma caixa de diálogo para editar o produto
}
delete(product: any) {
this.http.delete(`/api/products/${product.id}`).subscribe(() => {
this.getProducts().subscribe(data => this.products = data);
});
}
}
Neste exemplo, estamos usando o HttpClient do Angular para fazer solicitações HTTP para a API REST. O método getProducts() faz uma solicitação GET para recuperar a lista de produtos da API, enquanto os métodos create(), update() e delete() fazem solicitações POST, PUT e DELETE, respectivamente, para criar, atualizar e excluir produtos na API.
Os operadores do RxJS são funções que podem ser usadas para transformar, filtrar, agrupar e combinar sequências de valores que chegam ao longo do tempo. Eles são amplamente utilizados no Angular para trabalhar com eventos, solicitações HTTP e outras fontes de dados assíncronos.
Para usar operadores do RxJS no Angular, basta importá-los da biblioteca RxJS e chamá-los no Observable. Por exemplo, aqui está como você poderia usar o operador map() para transformar os dados de uma solicitação HTTP:
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
export class MyService {
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get('/api/data').pipe(
map(data => data.result)
);
}
}
import { HttpClient } from '@angular/common/http';
import { map, filter } from 'rxjs/operators';
export class MyService {
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get('/api/data').pipe(
map(data => data.result),
filter(result => result % 2 === 0)
);
}
}
Neste caso, estamos usando o operador map() para transformar os dados da mesma maneira que no exemplo anterior, mas também estamos usando o operador filter() para filtrar os resultados, retornando apenas os resultados pares.
Aqui está mais um exemplo de como você poderia usar vários operadores do RxJS em conjunto para fazer uma solicitação HTTP e processar os dados retornados:
import { HttpClient } from '@angular/common/http';
import { map, filter, tap, switchMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
export class MyService {
constructor(private http: HttpClient) {}
getData(): Observable<any> {
return this.http.get('/api/data').pipe(
map(data => data.result), // Transforma os dados
filter(result => result % 2 === 0), // Filtra os resultados pares
tap(result => console.log(result)), // Executa uma ação para cada valor emitido
switchMap(result => this.http.get(`/api/data/${result}`)), // Faz uma nova solicitação com base nos resultados anteriores
catchError(error => of([])) // Trata o erro, retornando um Observable vazio em vez de lançar uma exceção
);
}
}
Neste outro exemplo, estamos fazendo uma solicitação HTTP com o HttpClient do Angular e usando vários operadores do RxJS para transformar, filtrar e processar os dados retornados. O operador map() é usado para transformar os dados, o operador filter() é usado para filtrar os resultados pares, o operador tap() é usado para executar uma ação para cada valor emitido, o operador switchMap() é usado para fazer uma nova solicitação com base nos resultados anteriores e o operador catchError() é usado para tratar o erro, retornando um Observable vazio em vez de lançar uma exceção.
Quais são os operadores do RxJS?
Fizemos uma listinha com uma explicação bacana:
Aqui estão alguns dos operadores do RxJS mais comuns:
- map(): Aplica uma transformação a cada valor emitido pelo Observable e retorna um novo Observable com os valores transformados.
- filter(): Filtra os valores emitidos pelo Observable baseado em uma condição e retorna um novo Observable com os valores que atendem à condição.
- tap(): Executa uma ação para cada valor emitido pelo Observable, mas não altera o valor em si.
- switchMap(): Mapeia cada valor emitido para um novo Observable, cancela qualquer Observable anterior e retorna apenas os valores emitidos pelo Observable mais recente.
- mergeMap(): Mapeia cada valor emitido para um novo Observable e combina todos os Observables resultantes em um único Observable.
- concatMap(): Mapeia cada valor emitido para um novo Observable e concatena todos os Observables resultantes em um único Observable, emitindo os valores na ordem original.
- exhaustMap(): Mapeia cada valor emitido para um no
- catchError(): Trata erros emitidos pelo Observable, retornando um Observable alternativo em vez de lançar uma exceção.
- delay(): Adiciona um atraso antes de emitir cada valor do Observable.
- debounceTime(): Suprime valores emitidos rapidamente pelo Observable, emitindo apenas o último valor emitido dentro de um período de tempo especificado.
- distinctUntilChanged(): Suprime valores consecutivos iguais emitidos pelo Observable.
- take(): Emite apenas os primeiros n valores emitidos pelo Observable e, em seguida, completa.
- takeUntil(): Emite valores até que um Observable alternativo complete ou emita um valor.
- last(): Emite apenas o último valor emitido pelo Observable.
- single(): Emite um erro se o Observable emite mais de um valor ou se completa sem emitir nenhum valor.
- combineLatest(): Combina os últimos valores emitidos por dois ou mais Observables em uma única emissão.
- withLatestFrom(): Utiliza o último valor emitido por um Observable alternativo para combinar com cada valor emitido pelo Observable principal.
- zip(): Combina os valores emitidos por dois ou mais Observables em uma única emissão, aguardando que cada Observable emita um valor antes de emitir o próximo.
- forkJoin(): Aguarda que todos os Observables especificados completem e, em seguida, emite os últimos valores emitidos por cada um.
- race(): Emite o primeiro valor emitido pelo Observable que completar primeiro.
- startWith(): Insere um valor inicial no início da sequência de valores emitidos pelo Observable.
- defaultIfEmpty(): Emite um valor padrão se o Observable completar sem emitir nenhum valor.
- iif(): Cria um Observable que emite um valor ou conjunto de valores baseado em uma condição.
Existem muitos outros operadores do RxJS disponíveis, cada um com sua própria finalidade e uso. Você pode ler mais sobre eles na documentação do RxJS.
