Pacuna's Blog

Integraci贸n Laravel y AngularJs

En este tutorial mostrar茅 como realizar una integraci贸n simple de AngularJS y Laravel 4. La idea no es utilizar Laravel s贸lo como una API Back-end, si no hacer uso blade para desplegar nuestras vistas as铆 como usar el Router para enviar las respuestas. Si deseas construir una SPA (Single page application) este manual no es para ti. Utilizaremos Angular solo para enriquecer nuestras vistas y darles un aspecto m谩s din谩mico.

Primeros pasos

Lo primero que haremos ser谩 descargar AngularJs desde su sitio oficial. Vamos a colocar este archivo en nuestro proyecto de Laravel, espec铆ficamente en el directorio public/js y lo llamaremos angular.js.

Luego vamos a crear un Layout simple en el cual cargaremos AngularJs as铆 como dos secciones que nuestras vistas proveer谩n. Una secci贸n que tendr谩 scripts y otra que tendr谩 el contenido principal. Nuestro layout estar谩 ubicado en views/layout.blade.php y debe lucir de la siguiente manera:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Integraci贸n Larave 4 y AngularJs</title>
 <meta http-equiv="" content="" />

 <script src="{{asset('js/angular.js')}}" type="text/javascript"></script>

 @yield('scripts')
 </head>

 <body>
 @yield('content')
 </body>
</html>

Luego crearemos una vista con la cual podremos hacer pruebas y ver que la integraci贸n funciona correctamente. Modificaremos el archivo que viene por defecto con laravel llamado hello.php. Lo renombraremos a hello.blade.php. Este archivo se carga por defecto con la ruta 鈥/鈥 cuando creamos una nueva aplicaci贸n, por lo que no necesitaremos rutas por ahora. Este archivo debe lucir de la siguiente manera:

@extends(鈥榣ayout鈥)

@section(鈥榮cripts鈥) @stop

@section(鈥榗ontent鈥) @stop

Si ejecutas php artisan serve y te diriges a la ruta 鈥/鈥 ver谩s una p谩gina en blanco. Al inspeccionar el c贸digo fuente de tu p谩gina, deber铆as ver el layout que creamos anteriormente, y en el head un link hacia el archivo AngularJs. Si le haces click a este archivo y puedes ver su c贸digo fuente, est谩s OK.

Probando la funcionalidad

Vamos a probar AngularJS y ver como evitar conflicos de sintaxis con Blade, puesto que ambos utilizan curly braces ({}) para ejecutar instrucciones.

Lo primero que debemos hacer es agregar la directiva ng-app de angular js en nuestra aplicaci贸n. AngularJs utiliza este concepto de directivas dentro de los tags de html, y permiten manejarlos. La directiva ng-app le indicar谩 a angular que esta aplicaci贸n puede ser manejada por la librer铆a. Esto lo haremos en nuestro layout, en la equiqueta html. Debes cambiar el primer tag para que luzca as铆:

<!DOCTYPE html>
<html ng-app>

...

Ahora vamos a utilizar un ejemplo simple de AngularJs pero mezclado con un poco de Blade para que veas la interacci贸n. El nuevo c贸digo de hello.blade.php debe verse as铆:

@extends('layout')

@section('scripts')
@stop

@section('content')
<div>
{{Form::label('name', 'Name:')}}
{{Form::text('name', null, ['ng-model' => 'yourName', 'placeholder' => 'Enter a name here'])}}
<hr>
<h1>Hello @{{yourName}}!</h1>
</div>
@stop

Vamos por parte. Primero declaramos un label t铆pico de blade. Luego declaramos un campo de texto con el nombre name, y este m茅todo acepta como tercer par谩metros todas las propiedades extras que le podemos agregar a un input de texto html. Agregamos la directiva ng-model, que nos permite hacer un binding con alguna propieda de angularjs, lo que nos permitir谩 manipular este elemento a trav茅s de alg煤n script, y luego un placeholder simple.

M谩s abajo definimos una etiqueta h1 con el texto Hello y una variable que quiz谩s se vea nueva para t铆. Cuando le anteponemos una @ a las llaves de blade, podemos escapar de la interpretaci贸n de blade, as铆, lo que se encuentre dentro, ser谩 le铆do como cualquier archivo normal. AngularJS utilizar estas mismas llaves para imprimir variables, por lo que necesitamos escaparlas antes con una @. Si te das cuenta, el nombre de esta variable es el mismo del ng-model que le hemos puesto al input de texto. Esto le indica a angular que estos elementos deben compartir su valor, y cuando uno se actualize, el otro instantaneamente lo har谩. Haz correr tu servidor y entra a la ruta 鈥/鈥 para ver el ejemplo. Puede ver que al escribir algo en el campo de texto, el h1 de m谩s abajo se actualiza autom谩ticamente.

Para realizar ejemplos m谩s avanzados debes investigar todas las posibilidades que angularjs te entrega. Lo importante es que ahora ya sabes algunos tips para integrarlo con Laravel. Otras cosas que debes tener en cuenta son:

  • Cuando pases datos desde tu controlador a la vista, recuerda usar {{ }} para imprimirlos, mientras que para imprimir datos de AngularJs debes usar @{{ }}.
  • Cuando comiences a crear controladores con AngularJs, tienes dos opciones, utilizar la secci贸n @scripts que hemos declarados y colocar todo tu c贸digo ah铆, o crear un archivo para cada controlador en tu directorio public y luego llamarlo en la vista. La primera opci贸n funciona bien para c贸digo cortos. Si tu controlador tiene mucha l贸gica, mejor mu茅velo a un archivo separado.
  • Si har谩s un uso extenso de AngularJs (pr谩cticamente en todas tus vistas), lo recomendable es que investigues la opci贸n de crear una Single-Page-App y uses laravel s贸lo como una API back-end. Para el routing y templating puedes usar las herramientas que angular te entregar谩, mientras que laravel s贸lo realizar谩 la l贸gica de entregar y guardar datos.

Eso es todo!, si tienes alguna duda comenta.

View original

#php #laravel #angularjs

- 1 toasts