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. Para crear un nuevo proyecto en Angular, usa el comando ng new project_name . He nombrado mi proyecto ResponseData_Binding .
1ng nuevo ResponseData_Binding
Shell
Paso 2: Crear nuestra primera solicitud de solicitud y respuesta de Angular 7
Configuración del HttpClient 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. Usaremos el comando y generaremos el nombre de la clase . He nombrado a los usuarios de mi nombre de clase .
1ng generar usuarios de clase
Shell
Después de que se genere la clase, tendrás que añadir objetos:
123456exportclassUsers{ id:número; email:cadena; nombre:cadena; apellido:cadena;}tipografía
Para las solicitudes, necesitamos llamar a la API para el archivo de servicio que necesitamos en Angular. Utiliza el comando ng generate service_name . He llamado al nombre de la clase apicall .
1ng generar servicio apicall
Shell
Después de haber generado apicall.service.ts, importar el cliente HTTP, e inicializar en el constructor, como se indica a continuación.
1import{HttpClient}de$0027@angular/common/http$0027;tipografía
En Constructor,
1constructor(httpCliente privado:HttpCliente){}tipografía
Puedes usar el siguiente comando para ejecutar un Angular,.
1ng serve
Shell
Paso 3(a): Nuestras primeras peticiones para conseguir la lista de todos y unirse a la mesa
El angular define un conjunto de solicitudes que utilizan métodos de solicitud para indicar la acción deseada que debe realizarse para un recurso determinado.
Para solicitar la lista de todos los usuarios, siga los siguientes pasos de código:
apicall.service.ts
12345678910111213141516171819202122import{Injectable}de$0027@angular/core$0027;import{HttpClient}de$0027@angular/common/http$0027;import{Users}de$0027. /usuarios$0027;importar*comoRxdesde$0027rxjs/Rx$0027;importar{desde,Observable, lanzarError }desde$0027rxjs$0027;importar{mapa, atraparError }desde$0027rxjs/operadores$0027;@Injectable({ providedIn:$0027root$0027})exportclassApicallService{constructor(httpClient:HttpClient privado){} {}getUsers(){regresar esto. httpClient.get(`https://reqres.in/api/users`).pipe(map((data:Users[])=[[return data;}],catchError(error=https://reqres.in/api/users`),{returnthrowError($0027¡Algo salió mal!$0027);})}tipografía
En el código anterior, creamos el método getUsers() para llamar a la API. Estamos llamando al método HTTP GET para obtener una lista de todos los usuarios. Solicitamos la URL de la API, https://reqres.in/api/users , para obtener un mapa de respuesta a la clase Users usando la clave de mapa . Devolverá una respuesta y un mapa al objeto. Si hay alguna excepción, entonces arrojará un error, » ¡Algo salió mal! «.
app.component.ts
12345678910111213141516171819exportclassAppComponent{ usuarios :Usuarios[];constructor(public http:HttpClient,private apiService:ApicallService){}ngOnInit(){esto. getUserList();}getUserList(){this.apiService.getUsers().subscribe((data:any)=>{console.log(data);this.users= data.data;});}}tipografía
En el código anterior, creamos el método getUserList() . Es un método de acción, que se llama en el método ngOnInit() . Utilizamos un método ngOnInit() para manejar cualquier tarea de inicialización adicional y cuando el detector de cambios por defecto ha comprobado por primera vez las propiedades de datos de la directiva. Llamamos a apiServices getUsers() para empezar a llamar a la API.
app.component.html
12345678910111213141516<tabla Apellido</th;/tr;/tr;/thead&;tbody&;tr*ngFor="let user of users"&;td;/td;td;{{{user. correo electrónico}}</td²;td²;{{{user.nombre_de_usuario}}</td²;td²;{{{user.apellido_de_usuario}}</td²;³³³³³³³³³³³³³³³³³³³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"³³³"".
html
En el código anterior, creamos una tabla donde vinculamos los datos a la tabla. Utilizamos para el bucle * ngFor="let user of users" donde los usuarios tienen todas las listas de usuarios y, al utilizar para el bucle, obtenemos un único valor asignado a la fila.
Paso 3(a): Nuestras primeras solicitudes de envío de detalles al servidor
Siga el siguiente código para enviar nuestros datos al servidor usando gPost.
apicall.service.ts
12345678910111213141516171819202122232425import{Injectable}de$0027@angular/core$0027;import{HttpClient}de$0027@angular/common/http$0027;import{Users}de$0027. /usuarios$0027;importar*comoRxdesde$0027rxjs/Rx$0027;importar{desde,Observable, lanzarError }desde$0027rxjs$0027;importar{mapa, atraparError }desde$0027rxjs/operadores$0027;@Injectable({ providedIn:$0027root$0027})exportclassApicallService{constructor(httpClient:HttpClient privado){}crearUsuarios(user:Users[]){devolver esto. httpClient.post(`https://reqres.in/api/users`,user).pipe(map((data:any)=https://reqres.in/api/users,}},catchError(error==https://reqres.in/api/users,user).pipe(map((data:any)=https://reqres.in/api/users,}}}tipografía
En el código anterior, utilizamos el método createUsers() para enviar nuestros datos al lado del servidor utilizando el método POST. Aquí, estamos solicitando a la API que envíe nuestros datos para ser guardados en el servidor que está presente en el objeto user . Devuelve una respuesta y mapea al objeto. Si hay alguna excepción, entonces arrojará un error, "¡Algo salió mal!" .
app.component.ts
1234567891011exportclassAppComponent{ user_any={};constructor(public http:HttpClient,private apiService:ApicallService){}createUser(){this.apiService.createUsers(this.user).subscribe((res)={;{});}}tipografía
En el código anterior, creamos un método de acción, createUser() , donde llamamos al método createUsers() de apiService y le pasamos el objeto user como parámetro.
app.component.html
123456<form><inputplaceholder="Enter email"[(ngModel)]="user.email"/><inputplaceholder="Enter First Name"[(ngModel)]="user. first_name"><inputplaceholder="Enter Last Name"[(ngModel)]="user.last_name"/><buttontype="submit"(click)="createUser()">Save</button ></form>
html
En el código anterior, creamos un formulario en el que rellenamos los datos a guardar, el objeto de usuario se recoge de la entrada, y se declara en app.component.ts. La directiva ng-model vincula el valor de los controles HTML (input, select, text area) a los datos de la aplicación. Mediante la vinculación bidireccional, podemos mostrar una propiedad de datos, así como actualizar esa propiedad cuando el usuario realiza cambios.