Scribd
Cargar
41 vistas10 páginas

Implementación de Servicios REST en Angular

REST significa Representational State Transfer y es una arquitectura de software sin estado que proporciona características subyacentes y protocolos para clientes y servidores. Los servicios REST o HTTP son requisitos clave para aplicaciones de una sola página para recuperar datos del servidor. Angular ofrece el servicio HTTPClient para realizar solicitudes a servicios REST.

Cargado por

alejandro piamba
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
41 vistas10 páginas

Implementación de Servicios REST en Angular

REST significa Representational State Transfer y es una arquitectura de software sin estado que proporciona características subyacentes y protocolos para clientes y servidores. Los servicios REST o HTTP son requisitos clave para aplicaciones de una sola página para recuperar datos del servidor. Angular ofrece el servicio HTTPClient para realizar solicitudes a servicios REST.

Cargado por

alejandro piamba
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Servicios REST

REST significa Representational State Transfer.  Es una arquitectura de


software sin estado que proporciona muchas características
subyacentes y protocolos que gobiernan el comportamiento de los
clientes y servidores.Los servicios basados en REST o HTTP son los
requisitos principales de las aplicaciones de una sola página para
recuperar los datos y el gel en la aplicación web.  Angular ofrece su
servicio incorporado HTTPClient que envuelve las funciones principales
para solicitar los datos del servidor donde se aloja el servicio REST.

HTTP Cliente

El HttpClient en @ angular ofrece una API simplificada para aplicaciones


Angular que se basa en la interfaz XMLHttpRequest expuesta por los
navegadores. Los beneficios adicionales de HttpClient incluyen
características de capacidad de prueba, objetos de solicitud y respuesta
tipificados, intercepción de solicitud y respuesta, API observables y
manejo optimizado de errores.

Ejemplo
Crear una aplicación con angular CLI que permita realizar operaciones CRUD con
servicios JSON
Para desarrollar este proyecto, se debe crear una aplicación desde el gestor de
dependencias de angular CLI, el cual debe tener la siguiente estructura de
carpetas
Nota: En este caso es necesario crear un módulo article, el cual se crea con la
siguiente instrucción
ng generate module article

Archivo app.module.ts
En este script se define la importación de los módulos y dependencias que
debemos usar para ejecutar el proyecto
El archivo article.component.css define los estilos del proyecto
El archivo article.component.html debe tener una estructura como se muestra a
continuación
En el archivo article.ts se define la clase y los atributos que se van a utilizar en el
servicio

El script articles.services.ts declara las funciones relacionadas con el servicio web


json
El script article.component.ts es el servicio que interactúa con el formulario y con
article.ts (archivo que retorna a la vista los datos del servicio)
Al ejecutar la aplicación, se debe apreciar de la siguiente forma

Para testear el servicio, es recomendable utilizar JSON Server, que es un web


services que almacena una estructura de este tipo y permite verificar las
operaciones GET, POST, PUT y DELETE que se envíen desde el cliente. Para
ello, se debe instalar la dependencia:

npm install -g json-server

Una vez se instale la dependencia en un directorio ( puede ser en node js) se


crear un archivo db.json con la siguiente estructura:

Ahora ubicando la ruta del archivo db.json, se ejecuta desde consola el comando:
json-server --watch db.json
Debe activarse el servidor con el dato inicial del json creado en la siguiente ruta:
http://localhost:3000/articles

También podría gustarte