Ejemplo Angular 4 con servidor PHP

En este artículo voy a compartir con vosotros un ejemplo de una web con el frontend y el backend claramente separados en dos proyectos distintos. El frontend está hecho con Angular 4 (web oficial), mientras que el backend está desarrollado con PHP, usando el framework Slim (web oficial), muy ligero y útil para hacer pequeñas APIs.

Productos Angular

Productos Angular

Este ejemplo lo he desarrollado durante el curso Curso de Angular 4 – Desde cero hasta profesional, y consiste en una web de productos, que se pueden añadir, eliminar y editar y a los que se les puede asignar un a foto.

El código lo tengo compartido en mi cuenta de GitHub:

https://github.com/diegorys/productos-angular4-php-slim

diegorys

Ingeniero en Informática, apasionado de la robótica, con alma de investigador en nuevas tecnologías, analista programador y profesional del desarrollo ágil en entornos web y smartphones, con amplios conocimientos y experiencia desde antes de 2008 en entornos WAMP/LAMP, experimentando con Arduino desde 2012 y con Raspberry Pi desde 2014.

Share

4 comentarios en “Ejemplo Angular 4 con servidor PHP

  1. JoseXS

    Al probarlo (ng serve), sale el siguiente error en el frontend

    Cannot read property ‘config’ of null

    Un saludo!

    Responder
    1. Eduardo Guada

      El error esta que falta colocar el archivo .angular-cli.json
      Tiene los siguiente:

      {
      «$schema»: «./node_modules/@angular/cli/lib/config/schema.json»,
      «project»: {
      «name»: «users-cli»
      },
      «apps»: [
      {
      «root»: «src»,
      «outDir»: «dist»,
      «assets»: [
      «assets»,
      «favicon.ico»
      ],
      «index»: «index.html»,
      «main»: «main.ts»,
      «polyfills»: «polyfills.ts»,
      «test»: «test.ts»,
      «tsconfig»: «tsconfig.app.json»,
      «testTsconfig»: «tsconfig.spec.json»,
      «prefix»: «app»,
      «styles»: [
      «styles.css»
      ],
      «scripts»: [],
      «environmentSource»: «environments/environment.ts»,
      «environments»: {
      «dev»: «environments/environment.ts»,
      «prod»: «environments/environment.prod.ts»
      }
      }
      ],
      «e2e»: {
      «protractor»: {
      «config»: «./protractor.conf.js»
      }
      },
      «lint»: [
      {
      «project»: «src/tsconfig.app.json»
      },
      {
      «project»: «src/tsconfig.spec.json»
      },
      {
      «project»: «e2e/tsconfig.e2e.json»
      }
      ],
      «test»: {
      «karma»: {
      «config»: «./karma.conf.js»
      }
      },
      «defaults»: {
      «styleExt»: «css»,
      «component»: {}
      }
      }

      Responder
  2. diegorys Autor

    Gracias Eduardo, ya he solucionado el bug. Espero que no os falle!

    De paso, he aprovechado para unificar cliente y servidor en un mismo repositorio.

    Responder
  3. Oscar

    Que tal Diego. Estoy tratando de desplegar el proyecto, pero no tengo muy claro como hacerlo, podrías ayudarme? Un saludo!

    Responder

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.