Crud Angular 2 y Laravel 5
Crud Angular 2 y Laravel 5

En esta entrada vamos a ver cómo podemos crear un crud con Angular 2 y Laravel 5 de forma completa, veremos cómo solucionar los típicos problemas de cors y crsf en Laravel 5, también veremos cómo enviar una petición con la clase http de Angular 2 a Laravel 5 y que sepa interceptar la petición como una petición ajax, de otra forma, al hacer la validación en el servidor con Laravel 5 éste no devolverá los errores en formato json, que es justo lo que hace Laravel cuando una validación es procesada vía ajax y también lo que vamos a necesitar.

El tutorial lo haremos en dos partes, primero el servidor con Laravel 5 y después conectaremos el cliente con Angular 2, será largo pero así estará organizado.

Para seguir esta entrada necesitarás conocimientos de Angular 2 y Laravel 5, si tienes dudas con Angular 2 o Laravel 5 existen dos cursos donde los tratamos de forma bastante completa.

Desarrollo del proyecto con Laravel 5

Lo primero que debemos hacer es crear el proyecto con Laravel 5, para ello vamos a utilizar la consola.


Ahora que tenemos el proyecto creado abre el archivo .env de la raíz y añade las credenciales de tu base de datos, la necesitaremos para crear una migración para una tabla courses.

Modelos y migraciones en Laravel 5

Ahora añade lo siguiente en la terminal para crear el modelo y la migración courses.


Una migración no es más que un archivo que nos permite crear, eliminar y actualizar las tablas de nuestra base de datos a través de código, así que abre la migración que se habrá creado en el directorio database/migrations y modifica el código por el siguiente.


En el método up creamos la tabla y en el método down la eliminamos, para que nuestra tabla se haya creado simplemente ejecuta el siguiente comando.


Ahora que ya tenemos la tabla courses creada vamos a abrir el modelo Course ubicado en el directorio app y vamos a modificarlo por el siguiente.


Simplemente permitimos insertar los campos author, name, description y price y hacemos lo contrario con el campo id ya que es autoincremental.

Controladores REST en Laravel 5

Puesto que vamos a consumir un servicio rest con Angular 2, vamos a crear un controlador rest en Laravel 5 el cual nos brindará todos los métodos que vamos a necesitar sin hacer nada, para ello ejecuta el siguiente comando en la terminal.


El anterior comando habrá creado un archivo llamado CourseController.php dentro de app/Http/Controllers, ahora necesitamos mapear este controlador para que trabaje como un controlador rest, eso lo podemos hacer en el archivo de rutas (app/Http/routes.php) así que ábrelo y añade lo siguiente.


De esta forma, todas las peticiones contra /courses serán procesadas por nuestro controlador, de paso también excluimos los métodos que no vamos a utilizar.

Cors en Laravel 5

Para solucionar de forma rápida los problemas de cors en laravel 5 vamos a instalar este package el cual nos soluciona todos los problemas de forma sencilla.


Una vez hayas ejecutado los dos comandos abre el archivo config/app.php y añade la siguiente línea al array providers.


Ahora tendremos un nuevo archivo dentro de config/ llamado cors.php, aquí podremos establecer la configuración que necesitemos, nosotros simplemente añadiremos lo siguiente.


Ahora que ya tenemos cors instalado y configurado vamos a utilizarlo sobre nuestra ruta courses, abre el archivo routes.php y modifica el código por el siguiente.


Simplemente utilizamos el middleware cors en la ruta courses, nada más.

Validación de formualarios con Laravel 5

Ya que vamos a realizar la validación de los formulario de Angular 2 en el servidor vamos a crear un FormRequest para que la validación sea algo sencillo, así que vamos a ejecutar el siguiente comando.


Gracias a este archivo podremos crear y reutilizar la validación en los métodos store y update, así que abre el archivo que se acaba de generar ubicado en app/Http/Requests llamado CourseForm y modifica el código por el siguiente.


Con eso tenemos suficiente para procesar de forma correcta la validación de nuestro formulario, sí, ese que aún no hemos creado…

Deshabilitar la protección csrf para ciertas rutas

Podemos complicar el ejemplo todo lo que queramos, pero no es el caso, probablemente tu prefieras enviar el token con el que laravel protege los ataques csrf al cliente y devolverlo, nosotros en este caso vamos a deshabilitar esa protección sólo para las rutas que afectan a courses, pero para que sea aún más sencillo vamos a añadir un prefijo a nuestras rutas.

Primero abre el archivo app/Http/Middleware/VerifyCsrfToken.php y modifica la propiedad $except.


De esta forma todo lo que empiece por api será excluido en la protección csrf, para que esto funcione abre de nuevo el archivo de rutas y vamos a añadirle el prefijo api.


Ahora, en lugar de ser nuestra ruta /courses, será /api/courses.

Llegados a este punto sólo nos queda definir el código del controlador CourseController, así que vamos a abrir el archivo y modificar por el siguiente código.


El anterior es el típico controlador rest de Laravel 5, ahora ya sí, hemos terminado la zona del servidor y podemos ir al cliente para desarrollar la aplicación con Angular 2, pero antes, no olvides levantar el servidor con el siguiente comando.

Si tienes dudas con el código anterior te recomiendo el curso de Laravel 5

Desarrollo con Angular 2

Lo primero que debemos hacer es crear un directorio vacío con tres archivos, package.json, tsconfig.json y typings.json, primero abrimos el package.json y añadimos el siguiente código.


Aquí definimos las dependencias que vamos a instalar., ahora abre el tsconfig.json.


El archivo anterior define la configuración que debe seguir el compilador de typescript, finalmente haz lo mismo con el typings.json.


A través de archivos d.ts sirve de guía al compilador de typescript para que sepa reconocer todos los tipos.

Finalmente simplemente ejecuta el siguiente comando para que todas las dependencias necesarias sean instaladas.


Ahora vamos a definir el index.html el cual será lo que procese nuestra aplicación de alguna forma, así que crea el archivo y añade el siguiente código.


No tendríamos que tener ningún problema para entender ese código si estamos aquí ya que realmente es muy sencillo.

Definir la estructura del proyecto con Angular 2

Ahora simplemente trata de crear la siguiente estructura de directorios y archivos (sólo los .ts) para conseguir una estructura correcta para nuestra aplicación.

Estructura de un proyecto con Angular 2

Lo primero que vamos a hacer es definir la interfaz ICourse la cuál será la plantilla que utilizaremos en el servicio Api, así que crea el archivo ICourse.ts dentro del directorio app/interfaces con el siguiente código.

Servicio para conectar vía Http con Laravel 5

Para conectar con Laravel 5 vamos a utilizar la clase Http de Angular 2 la cual nos brinda todo lo necesario para poder hacer peticiones a servicios externos, para ello, crea un archivo dentro de app/services llamado api.ts y añade el siguiente código.


Para el trabajo con Observables he seguido esta entrada la cuál es realmente útil y está perfectamente explicada, de esta forma podemos manejar y actualizar nuestros datos en vivo, algo muy útil cuando trabajamos en el cliente.

El servicio Api nos ofrece todo lo que necesitamos para obtener, crear, actualizar y eliminar cursos contra la api construida con Laravel 5 haciendo uso de los verbos htts get, post, patch y delete, pero hay un detalle muy importante para decirle a Laravel que nuestras peticiones son realmente ajax, y es la forma en la que añadimos el header X-Requested-With en el constructor con el método append de la clase Headers, de otra forma, la comprobación que hacemos en laravel.


Siempre retornaría false, así de sencillo.

Obtener todos los cursos con Angular 2

Para obtener todos los cursos de Laravel 5 con Angular 2 vamos a crear el componente CourseListComponent.ts dentro de app/components/courses y vamos a añadir el siguiente código.


De momento sólo importamos Component y nuestro servicio Api, definimos @Component y la clase asociada, finalmente obtenemos los cursos para poder listarlos en el archivo app/components/courses/list/index.html, así que crea el archivo y añade el siguiente código.


Aquí listamos todos los cursos que Laravel nos ha devuelto utilizando el *ngFor y el pipe async, después simplemente creamos unos botones con algunos iconos y utilizando routerLink, una directiva del Router de Angular 2 definimos a donde debemos enviar al usuario una vez pulse en cada uno de los botones.

Con (click)=”selectedCourse = course” simplemente asignamos el curso sobre el que han pulsado a la propiedad de la clase selectedCourse para sacar ese curso del bucle, nos será útil para eliminar el curso al final del tutorial.

Crear el formulario de Cursos

Ya que vamos a trabajar con cursos y será lo mismo crear que actualizar, vamos a crear un formulario con datos de entrada (@Input()) para poder reutilizar esta funcionalidad, así que crea el archivo app/components/form/CourseForm.ts y añade el siguiente código.


Algo muy interesante es ver como podemos recuperar los errores de validación de Laravel 5, si el código de respuesta es 422 sabemos que la validación ha fallado, y a través del método json() podemos obtener un objeto de clave valor el cual debemos recorrer y procesar para pasar los errores a la vista.

Una vez se haya actualizado o creado un nuevo curso de forma satisfactorio seremos enviados al componente que lista todos los cursos, de otra forma veremos los errores en vivo en el formulario y los podremos solventar.

A través de los datos de entrada podemos comprobar si es una actualización o un nuevo registro, de esta forma, el método processCourse es capaz de llamar a un método u otro para procesar el formulario.

Para ver cómo podemos utilizarlo vamos a crear el archivo app/components/courses/form/courses-form.html con el siguiente código.

Crear nuevos cursos

Para poder crear nuevos cursos vamos a desarrollar el componente app/components/courses/create/CourseCreateComponent.ts, así que crear el archivo y añade el siguiente código.


Al reutilizar el formulario de cursos no tenemos que definir ninguna lógica en nuestro componente ya que la lógica es procesada por el componente CoursesForm, lo que si debemos definir es el formulario para crear nuevos cursos, eso es tan sencillo como crear el archivo app/components/courses/create/index.html y añadir el siguiente código.


Así de sencillo estamos reutilizando el formulario de cursos, no hay que hacer nada más.

Componente para actualizar cursos

Para poder actualizar los cursos simplemente debemos crear el componente app/components/courses/edit/CourseEditComponent.ts y añadir el siguiente código.


Aquí simplemente procesamos la promesa que devuelve el servicio para obtener el curso, de esta forma le podemos pasar el curso a actualizar al formulario, ahora vamos a crear el archivo app/components/courses/detail/index.html y añadimos el siguiente código.

Componente para ver el detalle de un curso

Para ver el detalle de un curso también tenemos un botón en el listado de cursos, así que vamos a crear el componente app/components/courses/detail/CourseDetailComponent.ts y añadimos el siguiente código.


Como puedes ver es practicamente igual que el componente CourseEditComponent, pero aquí no necesitamos utilizar el formulario ya que simplemente vamos a mostrar un pequeño detalle del curso, simplemente crea el archivo app/components/courses/detail/index.html y añade el siguiente código html.

Eliminar cursos con jQuery y Bootstrap

Para terminar sólo nos queda poder eliminar cursos, y eso lo vamos a hacer definiendo otro componente que se encargue exclusivamente de esa tarea utilizando una ventana modal de bootstrap, así que crea el archivo app/components/courses/remove/CourseRemoveComponent.ts y añade el siguiente código.


Nos podemos fijar que aquí si que le damos valor a la propiedad selector de nuestro componente al igual que lo hemos hecho en el formulario, esto es así porque tenemos que tener una forma de llamarlo desde otros componentes.

Algo muy interesante es el método remove, este método será el encargado de eliminar un curso y gracias al Observable la pantalla que lista los cursos será actualizada sin necesidad de hacer nada más, finalmente sólo deberemos ocultar la modal de bootstrap.

Ahora crea el archivo app/components/courses/remove/index.html y añade el siguiente código el cual es simplemente una modal de bootstrap.


Para poder utilizar este componente en el listado de cursos simplemente modifica el archivo app/components/courses/list/CourseListComponent.ts por el siguiente código, simplemente añadimos el componente CourseRemoveComponent y lo pasamos a la vista en forma de directiva.


Y en la vista asociada al componente CourseListComponent vamos a modificar el código por el siguiente para poder utilizar la modal.


Cómo he dicho antes, al pulsar en eliminar un curso sacamos del bucle el curso en cuestión y lo pasamos al componente course-remove a través de la propiedad de entrada course, así de sencillo, de esta forma ya tendremos en la ventana modal el curso a eliminar.

Llegados a este punto tenemos una aplicación muy completa pero que no funciona, primero debemos definir el componente que liga todas las rutas, ese es el archivo app/components/init/InitComponent.ts, así que créalo y añade el siguiente código.


Aquí nos traemos todos los componentes de la UI y aplicamos el sistema de rutas sobre cada uno de ellos, ahora vamos a crear el archivo app/components/init/init.html y añadimos lo siguiente.


La directiva router-outlet hace lo mismo que la directiva ng-view en AngularJS, es donde se muestra el contenido de cada componente.

Finalmente, y ahora sí, sólo nos queda definir el bootstrap de la aplicación, es decir, desde donde la aplicación realmente será procesada, para ello crea el archivo app/main.ts y añade el siguiente código.


Ahora sólo debes ejecutar el siguiente comando para levantar la aplicación que hemos desarrollador con Angular 2.


Si has seguido bien todos los pasos, que no son pocos y yo no me he confundido debes ver el listado de cursos y tendrás un botón verde para poder crear nuevas (recuerda tener levantado el servidor de laravel).

Si tienes dudas con el código anterior te recomiendo el curso de Angular 2

Espero que te haya resultado útil y por supuesto si lo has seguido te funcione todo correctamente, si no es así deja un comentario y trataré de ayudarte.