Combinando Laravel 4 y AngularJS
Combinando Laravel 4 y AngularJS
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a ver como crear una apirest con laravel 4 y AngularJS haceiendo uso de los controladores restful que nos ofrece laravel 4. Éstos trabajan con los verbos http, con get podemos obtener datos, con post podemos crear recursos, con put podemos actualizar, y con delete podemos eliminar.

Esos son los verbos http que vamos a utilizar, una vez creada la api, deberemos consumirla, y que mejor que hacerlo con AngularJS, el cuál nos ofrece el objeto $http, y simplemente haciendo $http.get, podemos hacer una petición get, $http.post una post, $http.put lo podemos utilizar para actualizar y con $http.delete podemos eliminar, sencillamente genial.

Dicho ésto, ya sabemos de que trata el tutorial, así que podemos empezar a trabajar.

El que tenga dudas sobre la instalación de laravel 4, que pase por aquí, al servidor virtual le vamos a llamar apirest.com.

Crear una ApiRest con laravel 4 y AngularJS

Con esto podemos empezar por crear una base de datos llamada restlaravel, y procedemos a hacer una migración para una tabla posts y popularla con el uso de seeding que nos ofrece laravel 4.

Ahora podemos crear las migraciones de las tablas users y peliculas.

Primero una y después la otra, una vez hecho tendremos dos nuevas migraciones en app/database/migrations, una para la tabla users y otra para peliculas, así que podemos abrir la de users y dentro colocamos el siguiente código.

Y para las películas:

Ahora, para popular con datos las tablas y podamos consumir algo, nos dirigimos a database/seeds/DatabaseSeeder.php y dentro colocamos el siguiente código.

Perfecto, ahora ya podemos crear las tablas y popularlas, para ellos sólo debemos escribir los siguientes comandos en la terminal, uno detrás de otro.

Si todo ha ido bien, tendremos las tablas users y posts con datos, genial.

Llegados aquí, debemos crear el modelo pelicula, así que nos dirigimos a la carpeta models, y dentro creamos un archivo llamado Pelicula.php y colocamos el siguiente código.

Podemos decir que llegados aquí ya tenemos toda la configuración necesaria y demás, así que el siguiente paso es crear el controlador restful que nos brindará la información en formato json, veamos.

El controlador PeliculaController

Abrimos la terminal y escribimos el siguiente comando, el cuál nos creará todo lo necesario.

Si ahora abrimos el archvio controllers/PeliculaController.php veremos que tiene varias funciones con doc de php y comentarios, en cada sección se explica que es lo que hace cada una de ellas, pero mejor, eliminamos todo el código y colocamos el siguiente.

La función index mostrará todas las películas, show($id) mostrará la película que tenga la id que le hemos pasado, store guarda una nueva película en la tabla películas, update actualiza la película que haga referencia a la id que le hemos pasado y destroy elimina una película, no hay más que explicar, todo es muy sencillo.

La ruta para acceder a la api

Abrimos el archivo routes.php y dentro colocamos el siguiente código, que lo que hará es crear un prefijo a nuestra ruta para poder llevar, si lo necesitáramos un control de versiones sobre nuestra api, aparte de brindar las rutas necesarias a nuestro controlador para que sea restful.

Llegamos aquí, tenemos una api completamente funcional, pero necesitamos consumir esos datos, es decir, poder trabajar con ellos, y que mejor opción que AngularJS, que es la bestia de los frameworks js, tiene una comunidad detrás impresionante y que mejor garantía que google :).

Lo primero que necesitamos es descargar el archivo de angular, así que creamos una carpeta nueva en public llamada js y lo guardamos como angular.js, una vez hecho, podemos crear otro archivo en la misma carpeta llamado controller.js, y dentro colocamos todo el código necesarios en lo que respecta a AngularJS.

Como podemos ver, creamos un módulo, un controlador, y dentro de éstos creamos todas las funciones necesarias para hacer trabajar a nuestra api, no vamos a hacer nada más con la información/respuestas recibidas que un console.log para ver lo que nos devuelve, así que ves calentando chrome :D.

Sólo nos queda crear una vista para poder interactuar con la api, así que nos dirigimos a views y creamos un archivo llamado home.php, dentro colocamos el siguiente código.

Y eso es todo, como vemos simplemente cargamos los archivos y creamos unos botones para llamar a las funciones que hemos creado con AngularJS, creo que no merece explicación lo que hace cada una, es obvio :).

Si abrimos la consola de chrome y pulsamos en Ver películas, veremos como se muestra un objeto con todas las películas de nuestra base de datos, te toca investigar un poco.

Espero que te haya gustado y sido de utilidad, si necesitas más funcionalidad, yo no te la voy a dar, creo que si con esto no eres capaz de hacer lo que necesites, es que posiblemente no sepas demasiado, y debas ver otras cosas :(.