Conectar PHP y Angular con HttpClient y CORS

Angular y PHP con HttpClient y CORS

Resumen: mostrar cómo conectar PHP con Angular y configurar CORS, además de usar el cliente HTTP de Angular para hacer peticiones con PHP.

El resultado final lo puedes ver aquí, y el código fuente completo (tanto de PHP como de Angular) en mi GitHub.

En este post te mostraré a consumir una API de PHP y a usar los 4 métodos: GET, POST, PUT y DELETE.

El servidor será con PHP y vamos a utilizar JSON para codificar los datos.

Configurando servidor

En el servidor hay que configurar CORS como se ve en este post.

Tengo 4 archivos por cada método pero de igual forma podríamos usar un enrutador de PHP como phroute.

De entrada vemos algunas cosas importantes. Por ejemplo, para acceder a los datos enviados por Angular leemos el contenido de php://input, ahí estará el contenido raw que podemos decodificar con json_decode.

Por defecto el HttpClient de Angular envía los datos como JSON, por eso es que debemos decodificarlos de la misma manera.

Para responder en PHP hacemos un echo de lo que devuelva json_encode, en esa parte podemos colocar arreglos, cadenas, enteros y cualquier cosa que pueda codificar JSON, Angular lo va a decodificar.

Los datos

Si te fijas, los datos ahora son estáticos y, al eliminar o actualizar una persona no estamos haciendo nada, solo mostrando mensajes.

Sin embargo justo aquí es en donde puedes usar un tutorial de PHP con base de datos para guardar los mismos.

Lado del cliente

Esta es una continuación de la introducción al módulo HTTP de Angular. Si no lo conoces todavía, dale un vistazo aquí.

En el cliente tenemos un servicio, configuramos la ruta desde un inicio y después invocamos a métodos HTTP:

Después tengo mi componente de Angular en donde importo mi servicio e invoco a los métodos.

Cabe resaltar que respuesta es una variable que mostrará la respuesta del servidor como JSON, solo para depurar, pero puedes usar otros tipos de datos o hacer otra cosa con los datos (yo solamente los imprimo)

Ahora en mi vista tengo los 4 botones y muestro la respuesta.

Pero antes de ver eso, mira cómo hago un “loading” en cada petición, pues antes de hacer la petición pongo un estado de “cargando” y cuando se resuelve después del subscribe cambio ese valor.

En fin, la vista es la siguiente:

Poniendo todo junto

Ha llegado el momento de probar. Se ve así como en la imagen:

Angular y PHP con HttpClient y CORS

Consumiendo API de PHP con Angular usando el módulo HTTP

Aunque no hay formularios ni nada de eso por el momento, las peticiones realmente se están haciendo y enviando como lo puedes ver en el componente.

Conclusión

Aunque utilicé CORS, esta configuración solo debería ser mientras estás en modo desarrollo, pues después puedes compilar la app de Angular y ponerla con Apache y PHP para que se sirvan en el mismo dominio.

Si estás desarrollando en localhost, el dominio que deberías permitir en cors.php debería ser http://localhost:4200

Puedes probar la app aquí, y ver el código en GitHub.

También puedes ver más tutoriales de Angular aquí, o de PHP en este enlace.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *