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

En este tutorial vamos a ver cómo podemos combinar Angular 2 y Laravel 5, muchas veces vamos a querer utilizar Angular 2 dentro de un framework, en este caso php, para en lugar de tener dos proyectos tener todo en el mismo, así que todo el tema de las vistas lo vamos a manejar con Angular 2, se supone que es una de sus grandes virtudes, ¿por qué no explotarla?.

Para este ejemplo vamos a crear una sencilla configuración con un par de rutas y una petición http para ver cómo funciona la navegación y las peticiones http en Angular 2 y Laravel 5.

Enlaces de interés:

Recuerda que este tutorial no trata de explicar cómo funciona laravel 5 o angular 2, sino de ver cómo podemos complementarlos en un mismo proyecto, para aprender a trabajar con laravel 5 y angular 2 existen sus cursos.

Combinar Angular 2 y Laravel 5

Lo primero que debemos hacer es crear una nueva ruta para representar el típico index.html de Angular 2 y de paso creamos otra de la que simplemente retornaremos un json.


Ahora, crea el archivo resources/views/bootstrap.blade.php con el siguiente contenido, el cuál es la plantilla base de una aplicación con Angular 2, pero antes recuerda tener instaladas las clases html y form en laravel 5.2 con Laravel Collection.


Cómo puedes ver, nos faltan instalar las dependencias, así que vamos a crear un archivo dentro de public llamado package.json con el siguiente contenido, podríamos utilizar el archivo de la raíz pero así pienso que lo tenemos todo mejor organizado y cada cosa en su sitio.


Para que nuestras dependencias sean instaladas ejecuta el siguiente comando en la terminal situado en el directorio public.


Ahora sólo nos queda crear y configurar el archivo tsconfig.json, el cuál hará la compilación de los archivos typescript a javascript, también debe ir dentro de public.


Lllegados a este punto ya tenemos todo configurado y sólo nos queda crear la aplicación con Angular 2, si revisas el archivo bootstrap.blade.php que hemos creado, verás que le decimos a la configuración de System que nuestro directorio se va a llamar angular2app, así que crea este directorio dentro de public con la siguiente estructura.

Estructura de un proyecto con Angular 2 y Laravel 5

Si te interesa aprender a trabajar con Angular 2 y Laravel 5 aquí tienes cada curso por separado.

[button-red url=”https://www.uno-de-piera.com/curso-de-angular-2/” target=”_blank” position=”center”] Curso completo de Angular 2 desde 0[/button-red]

[button-red url=”https://www.uno-de-piera.com/curso-laravel-5/” target=”_blank” position=”center”] Curso completo de Laravel 5 desde 0[/button-red]

Ahora crea el archivo app/components/home/component.ts y añade el siguiente código el cual representará el componente principal de la aplicación.


Ya tenemos configurada la aplicación que utilizará los componentes Users y Movies y también la clase Api, la cuál hará la conexión con laravel mediante peticiones http.

Si te fijas, verás que la propiedad templateUrl del componente apunta a angular2app/app/components/home/home.html, crea el archivo y añade el siguiente código, el cuál mostrará los animales y cada ruta en su momento gracias a la directiva router-outet.


Ahora vamos a crear los componentes Users y Movies, primero users, así que crea el archivo app/components/users/component.ts y añade el siguiente código.


Y ahora app/components/movies/component.ts.


En este punto necesitamos definir la clase que va a permitir conectar a Angular 2 y Laravel 5 mediante peticiones http, así que crea el archivo app/services/api.ts y añade el siguiente código.


Simplemente es una clase que permite ser inyectada en otras y hace uso de promesas de ecmascript y la clase http de angular 2.

Finalmente sólo nos queda definir el contenido del archivo boot.ts, él será el encargado de lanzar la aplicación construida con Angular 2.


Ahora sólo debes situarte en el directorio public y ejecutar el siguiente comando para que se generen los archivos .js a partir de los .ts


Finalmente sólo nos queda levantar el servidor con el siguiente comando.


Ahora cualquiera de las dos urls deben funcionar de forma correcta y mostrar la información correspondiente en cada caso, también podemos fijarnos que si apuntamos a http://localhost:8080 seremos redirigidos a http://localhost:8080/#/users ya que hemos definido esa ruta por defecto cuando no exista otra.

http://localhost:8080/#/movies

http://localhost:8080/#/users

Descargar el código desde github.