Angular 4JSONPHP

CRUD con Angular 4 (Angular CLI) + PHP + Mysql + Bootstrap

A continuación mostraremos los pasos para elaborar un proyecto en ANGULAR 4:

  1. INSTALAR ANGULAR-CLI:

    Podemos encontrar mas informacion de Angular CLI en su web: ANGULAR CLI
  2. CREAR PROYECTO:
  3. IMPORTAR LIBRERIAS:

    Luego de que se instalan nuestrar librerias, tenemos que importarlas para que podamos usarlas dentro de nuestro proyecto:

  4. CREAR COMPONENTES:
    Se crean los componentes necesarios para desarrollar la aplicacion
  5. SETEAR LAS RUTAS DE NUESTRO PROYECTO:
    Se crean los componentes necesarios para desarrollar la aplicacion

    En nuestro archivo padre, o master, o como lo quieran llamar (donde se abriran nuestras vistas) «app.component.html», debemos colocar el siguiente codigo:
    Los link van con routerLink="listado", en el caso de llevar parametros, va de la siguiente manera:
    [routerLink]=["/listado", parametro1, parametro2], dependiendo de la cantidad de parametros seteados en nuestras rutas.

    Hasta aqui, debemos de tener toda nuestra estructura terminada para nuestro proyecto.
    1. NUESTRA BASE DE DATOS (Mysql)
    2. SCRIPT PHP
      Para acceder a nuestra Base de datos, tenemos los siguientes scripts, el cual sirve para conectarnos a la base de datos y hacer la consulta para mostrar todos los registros en formato JSON:

      Si corremos el archivo anterior deberiamos tener el siguiente resultado:

    3. GENERANDO SERVICIOS
      Vamos a generar el servicio necesario para poder interactuar con la BD y nos retorne la informacion:

      Una vez generado el servicio, entramos al archivo para modificarlo

      No debemos olvidarnos en agregar este servicio en nuestro archivo app.module.ts en la seccion Providers

    4. PROGRAMAMOS NUESTRO COMPONENTE LISTADO
      Ahora entramos a nuestro archivo TypeScript listado.component.ts, en el cual, como podemos ver, hemos importado nuestro servicio ProductoServiceService

    5. MOSTRAMOS LOS RESULTADOS
      Finalmente, ya tenemos toda nuestro codigo listo para mostrar los registros que estan en nuestra BD, ahora solo nos queda mostrar dichos registros, para eso, entramos a nuestro componente listado.component.html

      En conclusion, nos debe de mostrar de la siguiente manera:

El codigo esta ubicado en: Repositorio GITHUB

Deja un comentario