Asumo que ahora tienes la configuración de Angular 7, así que 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 tutorial HTTP .

1ng nuevo tutorial HTTP
Shell
Esto creará un directorio de tutoriales con los siguientes contenidos:
123456789101112131415161718192021222324252627HTTP tutorial├── node_module -- Paquetes angulares instalados disponibles en el project└── src -- Contiene los principales archivos de códigos. ├─── carpeta de aplicaciones -- Contiene los archivos para los componentes de la aplicación ├─── app.component.css -- Hojas de estilo en cascada de código para el componente de la aplicación. ├─── app.component.html -- El archivo HTML relacionado con el componente app ├── app.component.spec.ts -- Archivo de prueba de la unidad relacionado con el componente app. ├─── app.component.ts -- Lógica de vista de escritura detrás del componente. └─── app.module.ts -- Incluye todas las dependencias para el sitio web.├── paquete.json -- Archivo de configuración npm incluye paquetes version├── paquete-llave.json -- Archivo autogenerado y modificado.├── angular.json -- Archivo de configuración relacionado con su angular application├── .gitignore -- Archivo relacionado con el control de origen git.├── . editorconfig -- Mantiene la consistencia en los editores de código para organizar.├── carpeta de recursos -- Marcador de posición para archivos de recursos.├── carpeta de entornos -- Mantiene la configuración del entorno constants├── lista de navegadores -- Ajusta el CSS para soportar una lista de navegadores definidos.├── favicon.ico -- Pequeño icono que aparece junto al índice del navegador tab├──. html -- Archivo de entrada que contiene la aplicación de alto nivel del contenedor.├── karma.config.js -- Archivo de configuración para la prueba de karma Runner├── main.ts -- El archivo ts principal que se ejecutará primero.├── polyfills.ts -- Usado para cubrir cualquier característica que falte en el navegador.├── estilos.css -- Archivo CSS global que es usado por una aplicación. ├─── tests.ts -- Se utiliza para recorrer todas las pruebas de unidad en el application├── tsconfig.json -- Archivo de configuración del compilador de escritura.├── tsconfig.app.json -- Sobrescribir el archivo tsconfig.json con las configuraciones de la aplicación.├── tsconfig.spec.json -- Sobrescribir el archivo tsconfig.json con las configuraciones de prueba de la unidad de la aplicación.
docs
Paso 2: Creación de nuestra primera aplicación angular para manejar HTTP
Configurando el HttpClient : Este es el primer paso para 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
Crear un modelo de clase : Usar el comando ng generate class_name . He nombrado nombre de clase como empleado .
1ng generar clase empleado
Shell
Después de que se genera una clase, hay que añadir objetos:
123456exportclassEmployee{ id:número; nombre_de_empleado:cadena; salario_de_empleado:número; edad_de_empleado:número;}
tipografía
Para las llamadas HTTP URL, necesitamos un archivo de servicio en Angular. Usa el comando ng generate service_name . He nombrado el nombre de la clase como apicall .
1ng generar servicio apicall
Shell
¿Por qué servicios?
Los componentes no deberían buscar o guardar datos directamente, y ciertamente no deberían presentar datos falsos a sabiendas. Deberían centrarse en la presentación de datos y delegar el acceso a los datos a un servicio. Aquí estamos usando apicall.service.ts.
Después de haber generado apicall.service.ts, importa el cliente HTTP e inicialízalo en el constructor como se indica a continuación.
12import{HttpClient,HttpHeaders}de$0027@angular/common/http$0027;import{Empleado}de$0027./empleado$0027;
tipografía
En el constructor:
1constructor(httpCliente privado:HttpCliente){}
tipografía
Para correr en Angular, puedes usar el siguiente comando:
1ng serve
Shell
Si quieres ejecutar directamente en un navegador abierto, usa el comando de abajo:
1ng serve --open
Shell
Paso 3: Nuestra primera solicitud de HTTP
El HTTP define un conjunto de métodos de solicitud para indicar la acción deseada que debe realizarse para un recurso determinado.
Veamos todos los métodos para hacer peticiones y sus implementaciones uno por uno.
Método GET: El método GET solicita una representación del recurso especificado. Las solicitudes que utilizan GET sólo deben recuperar datos.
Siga el siguiente código para obtener todos los registros del Empleado.
En apicall.service.ts :
1234public nextPage_string="";publicgetEmployes(url?:string){returnthis.httpClient.get<Employee[]>(`http://dummy.restapiexample.com/api/v1/employees`);}
tipografía
En app.component.ts :
123456getEmployeeList(){esta.apiServicio.getEmployes().subscribe((res)=getEmployeeList(){esta.apiServicio.getEmployes(esta.apiServicio.nextPage).subscribe((data:Employee[])=.{console.log(data);});}
tipografía
En app.component.html :
12345678910111213141516171819<tabla Edad</thq.;/trtrabajo&tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq.;/tq. nombre_de_empleado}}</td²;td²;{{{emp.salario_de_empleado}}</td²;td²;{{emp. edad_empleado}}</td²;td²;ÿbotón(click)="deleteEmployeeData(emp.id)"};Delete</botón htmlDel código anterior, su solicitud y respuesta se dan a continuación:
URL solicitado:
Url: http://dummy.restapiexample.com/api/v1/employees
Respuesta del servidor:
1234567891011121314[{"id": "81164", "nombre_del_empleado": "XT4KT3OOPY", "salario_del_empleado": "14137", "edad_del_empleado": "12", "imagen_del_perfil": ""},{"id": "81166", "nombre_empleado": "2X4V49Z4GC", "salario_empleado": "32387", "edad_empleado": "71", "imagen_perfil":""}]json
GET Record por ID:
Siga el siguiente código para obtener un registro único del Empleado.
En apicall.service.ts :
123publicgetEmployeeById(id:número){regresar este.httpClient.get(`http://dummy.restapiexample.com/api/v1/employee/${id}`);}tipografía
En app.component.ts :
12345getEmployee(id:number){this.apiService.getEmployeeById(id).subscribe((res:Employee[])={{{console.log(res);});}tipografía
Del código anterior, su solicitud y respuesta se dan a continuación:
URL solicitado:
Url: http://dummy.restapiexample.com/api/v1/employee/81164
Respuesta del servidor:
1234567{"id": "81164", "nombre_del_empleado": "XT4KT3OOPY", "salario_del_empleado": "14137", "edad_del_empleado": "12", "imagen_del_perfil":""}json
Método POST: El método POST se utiliza para someter una entidad al recurso especificado, causando a menudo un cambio de estado o efectos secundarios en el servidor.
Siga el siguiente código para crear un nuevo empleado.
En apicall.service.ts :
123publiccreateEmployee(employee:any){regresar este.httpClient.post(`http://dummy.restapiexample.com/api/v1/create`,employee);}tipografía
En app.component.ts :
12345createEmployeeData(){this.apiService.createEmployee(this.empPost).subscribe((res)=>{console.log("Creó un empleado");});}tipografía
En app.component.html :
123456789<form><inputplaceholder="Enter Employee Name"[(ngModel)]="empPost.name"/><br/><inputplaceholder="Enter Employee Salary"[(ngModel)]="empPost. salario"/"br/[;br/[;};inputplaceholder="Enter Employee Age"[(ngModel)]="empPost.age"/[;br/[;};buttontype="submit"(click)="createEmployeeData()">Save</button></form>html
Del código anterior, su solicitud y respuesta se dan a continuación:
URL y datos solicitados:
12Url: http://dummy.restapiexample.com/api/v1/createData:{"nombre": "abcd", "salario": "123", "edad": "23"}json
Respuesta del servidor:
123456{"nombre": "abcd", "salario": "123", "edad": "23", "id": "91614"}json
Método PUT: El método PUT reemplaza todas las representaciones actuales del recurso de destino con la carga útil de la solicitud.
Siga el siguiente código para actualizar un registro de Empleados.
En apicall.service.ts :
123publicupdateEmpleado(employee:any){regresar este.httpCliente.put(`http://dummy.restapiexample.com/api/v1/update/${employee.id}`,employee);}tipografía
En app.component.ts :
12345updateEmployeeData(){this.apiService.updateEmployee(this.empPost).subscribe((res)=>{console.log("Updated the employee");});}tipografía
En app.component.html :
123456789<form><inputplaceholder="Enter Employee Name"[(ngModel)]="empPost.name"/><br/><inputplaceholder="Enter Employee Salary"[(ngModel)]="empPost. salario"/"br/[;br/[;};inputplaceholder="Enter Employee Age"[(ngModel)]="empPost.age"/[;br/[;};buttontype="submit"(click)="updateEmployeeData()">Update</button></form>html
Del código anterior, su solicitud y respuesta se dan a continuación:
URL y datos solicitados:
12Url: http://dummy.restapiexample.com/api/v1/update/91614Data:{"nombre": "abcde", "salario": "20000", "edad": "23"}json
Respuesta del servidor:
123456{"nombre": "abcde", "salario": "20000", "edad": "23", "id": "91614"}json
Método DELETE: Para borrar los datos del servidor, estamos usando el método Delete.
Siga el siguiente código para borrar el registro del empleado.
En apicall.service.ts :
123publicdeleteEmpleado(id:número){regresar este.httpCliente.delete(`http://dummy.restapiexample.com/api/v1/delete/${id}`);}tipografía
En app.component.ts :
12345deleteEmployeeData(id:number){this.apiService.deleteEmployee(id).subscribe((res)=console.log("Borrado de un empleado");});}tipografía
Del código anterior, su solicitud y respuesta se dan a continuación:
URL solicitado:
Url: http://dummy.restapiexample.com/api/v1/delete/91626
Respuesta del servidor:
1{"éxito":{"texto": "¡éxito!" Borrado de registros"}}json