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.

<?php
include_once "cors.php";
$persona = json_decode(file_get_contents("php://input"));
$mensaje = "El nuevo nombre de la persona es: " . $persona->nombre;
echo json_encode($mensaje);

<?php
/*
    Programado por Luis Cabrera Benito 
  ____          _____               _ _           _       
 |  _ \        |  __ \             (_) |         | |      
 | |_) |_   _  | |__) |_ _ _ __ _____| |__  _   _| |_ ___ 
 |  _ <| | | | |  ___/ _` | '__|_  / | '_ \| | | | __/ _ \
 | |_) | |_| | | |  | (_| | |   / /| | |_) | |_| | ||  __/
 |____/ \__, | |_|   \__,_|_|  /___|_|_.__/ \__, |\__\___|
         __/ |                               __/ |        
        |___/                               |___/         
    
    
    Blog:       https://parzibyte.me/blog
    Ayuda:      https://parzibyte.me/blog/contrataciones-ayuda/
    Contacto:   https://parzibyte.me/blog/contacto/
*/$dominioPermitido = "https://servicio-http-angular.stackblitz.io";
header("Access-Control-Allow-Origin: $dominioPermitido");
header("Access-Control-Allow-Headers: content-type");
header("Access-Control-Allow-Methods: OPTIONS,GET,PUT,POST,DELETE");

<?php
include_once "cors.php";
$idPersona = $_GET["id"];
$mensaje = "Ok se elimina a la persona con id $idPersona";
echo json_encode($mensaje);

<?php
include_once "cors.php";
$personas = [
 [
  "nombre"=>"Luis",
  "edad" => 22
 ],
 [
  "nombre"=>"Fernando",
  "edad" => 50
 ],
];
echo json_encode($personas);

<?php
include_once "cors.php";
$persona = json_decode(file_get_contents("php://input"));
$mensaje = "El nombre de la persona es: " . $persona->nombre;
echo json_encode($mensaje);

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:

import { Injectable } from "@angular/core";

import { HttpClient } from "@angular/common/http";
import { Persona } from "./persona";

@Injectable({
  providedIn: "root"
})
export class PersonasService {
  rutaApi = "https://ejemplo.com";

  constructor(private http: HttpClient) {}

  obtener() {
    return this.http.get(`${this.rutaApi}/obtenerPersonas.php`);
  }

  registrar(persona: Persona) {
    return this.http.post(`${this.rutaApi}/registrarPersona.php`, persona);
  }

  actualizar(persona: Persona) {
    return this.http.put(`${this.rutaApi}/actualizarPersona.php`, persona);
  }

  eliminar(id: string | number) {
    return this.http.delete(`${this.rutaApi}/eliminarPersona.php?id=${id}`);
  }
}

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)

import { Component } from "@angular/core";
import { PersonasService } from "./personas.service";
import {Persona} from "./persona"
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  respuesta = {};

  constructor(private personasService: PersonasService) {}

  probarGet() {
    this.respuesta = { mensaje: "Cargando..." };
    this.personasService
    .obtener()
    .subscribe((personas: Persona) => {
      this.respuesta = personas;
      console.log(personas);
    });
  }
  probarPost() {
    let persona = new Persona("John Galt", 21);
    this.respuesta = { mensaje: "Cargando..." };
    this.personasService.registrar(persona).subscribe(datos => {
      this.respuesta = datos;
    });
  }
  probarPut() {
    let persona = new Persona("Dagny Taggart", 19);
    this.respuesta = { mensaje: "Cargando..." };
    this.personasService.actualizar(persona).subscribe(datos => {
      this.respuesta = datos;
    });
  }
  probarDelete() {
    let idPersona = 281196;
    this.respuesta = { mensaje: "Cargando..." };
    this.personasService.eliminar(idPersona).subscribe(datos => {
      this.respuesta = datos;
    });
  }
}

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:

<h1>Módulo HTTP con Angular</h1>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
<br>
<button (click)="probarGet()">GET</button>&nbsp;
<button (click)="probarPost()">POST</button>&nbsp;
<button (click)="probarPut()">PUT</button>&nbsp;
<button (click)="probarDelete()">DELETE</button>&nbsp;
<p>
  {{respuesta | json}}
</p>

Poniendo todo junto

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

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.