Ahora que todo está instalado en su sistema, vamos a saltar a un simple código de ejemplo.
Paso 1: Iniciar un nuevo proyecto
Dado que el Angular es un marco, necesitamos seguir algunos estándares del marco.
Vamos a crear un nuevo proyecto en RxJS; he llamado a mi proyecto como RxJS_observable .
1ng nuevo RxJS_observable
Shell
Paso 2: Crear nuestra primera aplicación angular 7 para el proceso asíncrono RxJS
Configuración del cliente Http
El primer paso es importar el HttpClientModule en src/app/app.module.ts.
123456789importar{HttpClientModule}de$0027@angular/common/http$0027;@NgModule({ declaraciones:[AppComponent],importa:[BrowserModule,HttpClientModule],bootstrap:[AppComponent]})exportclassAppModule{}tipografía
A continuación, vamos a crear un modelo de clase. He nombrado el nombre de mi clase como país .
1ng generar clase país
Shell
Después de que se genere la clase, vamos a añadir algunos objetos:
12345exportclassCountry{ id:número; nombre:cadena; mayúscula:cadena;}tipografía
Para las solicitudes, necesitamos llamar a la API para el archivo de servicio que necesitamos en Angular. He llamado al nombre de la clase apicall .
1ng generar servicio apicall
Shell
Después de haber generado apicall.service.ts, importa el cliente HTTP e inicializa en el constructor, como se muestra a continuación.
1import{HttpClient}de$0027@angular/common/http$0027;tipografía
En Constructor:
1constructor(httpCliente privado:HttpCliente){}tipografía
Importar RxJS en Servicios
En los servicios, debemos importar RxJS, como se indica a continuación, para los procesos asíncronos.
12import*asRxde "rxjs/Rx";import{from,Observable}de$0027rxjs$0027;tipografía
Puedes usar el siguiente comando para correr por Angular.
1ng serve
Shell
Paso 3: Nuestras primeras peticiones para buscar el capital por nombre
Una aplicación que trabaja en un conjunto de solicitudes utilizando métodos de solicitud indica la acción que se desea realizar para un recurso determinado.
Para solicitar que se busquen las mayúsculas por nombre, siga los siguientes pasos de código:
apicall.service.ts
123456789101112131415161718192021222324252627282930import{Injectable}de$0027@angular/núcleo$0027;import{HttpCliente}de$0027@angular/común/http$0027; importar*comoRxde$0027rxjs/Rx$0027;importar{de,Observable, lanzarError }de$0027rxjs$0027;importar{mapa, atraparError }de$0027rxjs/operadores$0027;@Injectable({ providedIn: $0027root$0027})exportclassApicallService{constructor(private httpClient:HttpClient){}buscarPaísPorNombre(name:string):Observable<País[]³;{let headers_HttpHeaders=newHttpHeaders(); headers = cabeceras. append($0027Aceptar$0027,$0027aplicación/json$0027); headers = headers.append($0027X-RapidAPI-Key$0027,$00271108554cc1mshf11c17c4fea2b3dp179054jsn2446fb7a8965$0027);returnthis.httpClient.get(`https://restcountries-v1. p.rapidapi.com/capital/`+ nombre,{cabezas: cabeceras}).pipe(map((data:País[])=[;{devolución datos;}),catchError(error={[};{devolucióntirarError($0027¡Capital no encontrado!$0027);}))}tipografía
En el código anterior, creamos el método searchCountryByName() para llamar a la API. Llamamos al método HTTP GET para obtener una lista de todos los datos en mayúsculas. Solicitamos la URL de la API, https://restcountries-v1.p.rapidapi.com/capital/name , al tiempo que pasamos nombre para obtener un mapa de respuesta a la clase Country utilizando la clave map . Devolverá una respuesta y un mapa al objeto. Si la mayúscula no se encuentra, entonces arrojará una excepción no encontrada, lo cual arrojará un error, » Mayúscula no encontrada! «. En el encabezado añadimos la clave API y el tipo de contenido.
componente.de.la.aplicación
1234567891011121314151617exportclassAppComponent{constructor(público http:HttpClient,privado apiService:ApicallService){}ngOnInit(){} name:string;searchCapital(){esto. apiService.searchCountryByName(this.name).subscribe((data:Country[])={{{console.log(data);this.countries= data;});}}tipografía
En el código anterior, creamos el método searchCapital(). Es un método de acción, que funciona con el botón de clic, y comienza a buscar las capitales por nombre. Aquí llamamos al método searchCountryByName() de ApiCallservice, que suscribe la clase de país para recoger los datos.
app.component.html
1234567891011121314151617181920<form;³³³;label;³³³[nombre]³[nombre]³[etiqueta]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³[nombre]³]"; /botón</formulario="tabla<tr&tqr="nombre</thqr="salario</thqr=;/tr&tqr=;tqr=;tqr*ngFor="dejar país de países"{{{país}. nombre}}</td;td;};{{{capital del país}}</td;};html
En el código anterior, creamos el campo de texto (Input) donde introducimos un nombre en mayúsculas para buscar y creamos un botón de búsqueda donde llamamos al método searchCapital() que está presente en app.component.ts. La tabla está diseñada para mostrar la lista de datos encontrados.