7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Laravel

AngularJS y Laravel: Finalizando el desarrollo de un CRM

Read Time: 13 mins
This post is part of a series called Building a Customer Management App Using AngularJS and Laravel.
AngularJS and Laravel: Begin Building a CRM

Spanish (Español) translation by steven (you can also view the original English article)

Al crear una aplicación de una sola página, debemos usar algún tipo de framework para hacer parte del trabajo por nosotros, de modo que podamos centrarnos en la funcionalidad real.

AngularJS encaja aquí perfectamente, porque características como la inyección de dependencias dinámicas y el enlace de datos bidireccional son simplemente geniales. A veces también necesitamos algún tipo de servidor. Si has elegido PHP, Laravel puede ser tu mejor opción, ya que es fácil de trabajar y bastante potente.

En esta parte del tutorial, crearemos el front-end de nuestra aplicación usando AngularJS. Angular es un framework realmente único. En lugar de abstraer el HTML o proporcionar alguna forma de manipulación DOM, ampliaron el HTML para hacer frente al hecho de que seguramente no estaba diseñado para trabajar con datos dinámicos.

Por eso, Angular puede necesitar más aprendizaje que otros frameworks, pero realmente vale la pena el tiempo invertido.


Preparación

Antes de comenzar a programar nuestro front-end, tenemos que modificar un poco la parte de Laravel. Ve a app/views, elimina el material de ejemplo que está allí y crea el archivo llamado home.php. Ahora creemos el diseño.

Comienza con DOCTYPE y la etiqueta html:

Como puedes ver, ya estamos usando algunas cosas de AngularJS: la directiva ng-app. Esto le dice a Angular que use el módulo llamado app para esta aplicación (lo definiremos más adelante). Después de eso, agrega el encabezado (head) con un título y CSS:

Ahora puedes colocar las etiquetas script con Angular, su módulo de enrutamiento y nuestra aplicación:

Esta directiva le dice a Angular que coloque la plantilla que se solicitó en ese elemento.

Después de eso, solo necesitamos agregar una ruta para mostrar la plantilla (en app/routes.php). Agrega esto antes de las rutas para controladores:

Ahora, si inicias el servidor (con php artisan serve), deberías ver nuestro diseño básico cuando navegues a http://localhost:8000/ en tu navegador:

Los estilos

Este artículo no se enfocará en nada relacionado con CSS, pero para hacer que la aplicación sea más agradable a la vista mientras estás desarrollando, le agregaremos algo de estilo. Ve al directorio public/ de tu aplicación (está al lado de app/) y crea el archivo style.css y agrega este código:

Ahora abre la aplicación en tu navegador y el diseño debería estar centrado con una fuente más agradable en el encabezado:

Estructura básica de la aplicación

Comenzaremos con una declaración de módulo. Los módulos en Angular son prácticamente lo mismo que en cualquier biblioteca AMD, pero con la adición de la inyección de dependencias, que es algo realmente útil, como verás. Aquí está la declaración de nuestro módulo app:

La sintaxis es simple: primero va el nombre del módulo y luego la matriz de dependencias; solo usaremos ngRoute aquí para manejar la navegación, que irá a continuación.

Enrutamiento

El enrutamiento se define en el método config() del módulo:

Aquí es cuando la inyección de dependencia se activa por primera vez: nuestra devolución de llamada tomará $routeProvider como único argumento, y Angular inyectará este módulo.

Debes asegurarte de que los nombres de los argumentos sean exactamente los mismos que los nombres de los módulos, porque Angular los usa para que coincidan con los módulos apropiados.

Ahora usemos el $routeProvider para configurar las rutas:

Como puedes ver para definir una ruta, debes llamar al método when() del proveedor (ten en cuenta que se pueden encadenar).

El primer parámetro es el URI y el segundo es un objeto con opciones de ruta. Aquí, adjuntamos los controladores y las plantillas adecuados a cada ruta. En el segundo también usamos :id al final para marcar un parámetro de ruta que usaremos más adelante. El método otherwise() define lo que sucederá si se accede a cualquier otro URI.


Servicio "Factory"

Antes de escribir los controladores, tenemos que crear una cosa llamada factory. factory es una función que devuelve un servicio, lo cual es útil si deseas separar las funciones de obtención/configuración de datos de los controladores (que es, por supuesto, lo que siempre deseas hacer). Lo definimos usando el método factory() del módulo:

El primer parámetro es el nombre del servicio y el segundo es una función que devuelve el servicio que se creará utilizando esta fábrica.

Usaremos el módulo $http para acceder a nuestro servidor usando Ajax. Proporciona métodos de acceso directo para todos los métodos HTTP y cada uno de ellos devuelve una promesa (si no sabes qué es, echa un vistazo aquí y aquí).

Tenemos que devolver el servicio como un objeto con todos los métodos que se utilizarán en nuestros controladores:

El primer GET obtendrá todos los clientes para que podamos mostrarlos en una lista:

El segundo GET, obtendrá solo un cliente por su id:

El tercero, el método POST enviará una solicitud para agregar un usuario a la base de datos:

El segundo argumento en $http.post() son los datos que se enviarán al servidor.

El siguiente método DELETE borrará al cliente según el id proporcionado:

Ahora habrá algunos similares para las transacciones. Uno para conseguirlas todas:

Uno para agregar una nueva:

Y uno para borrar:

Controlador de clientes

Los controladores en Angular son (como sugiere el nombre) una forma de controlar el comportamiento de la aplicación. Tendremos uno para cada plantilla. Primero haremos uno para la página principal. Empecemos por definirlo:

El segundo parámetro aquí es la función constructora del controlador. Su primer argumento ($scope) es el enlace entre el DOM y el controlador. Es el corazón del enlace de datos bidireccional de Angular. El segundo es el servicio "factory" que creamos anteriormente.

Obtener la lista

Ahora obtendremos la lista de clientes del servidor que utiliza nuestro servicio:

Todas las promesas en Angular proporcionan los métodos success() y error() que se pueden usar para agregar devoluciones de llamada apropiadas. Ahora definamos la función que analizará los datos entrantes para mostrarlos en la página:

Sí, eso es todo lo que se necesita para alimentar la plantilla con datos. No es necesario ningún código ish como innerHTML/appendChild().

Agregar nuevos clientes

También debemos brindar la posibilidad de agregar y eliminar clientes. Primero, creemos un objeto en el alcance donde guardaremos los datos del nuevo cliente:

De esta forma podemos evitar acceder al DOM cuando el usuario agrega un cliente. Ahora la función que realmente agregará al cliente:

Dado que el nombre completo del usuario se mostrará en la tabla, la entrada será la misma, por lo que tenemos que dividirlo para obtener el nombre y el apellido:

Ahora llamamos a la función apropiada de nuestra fábrica con los datos de $scope:

Después de eso, agregamos escuchas de éxito y error a la respuesta de la promesa:

Primero definamos la devolución de llamada exitosa:

El argumento data contiene el texto de la respuesta. Tenemos que borrar la variable $scope.error:

Empuja el cliente recién agregado a $scope.customers:

Y establece $scope.newCustomer en su estado inicial para borrar las entradas:

La devolución de llamada del error simplemente establecerá la variable $scope.error en el texto recibido del servidor:

Eliminar clientes

La función para eliminar al cliente tomará su id como parámetro:

También mostraremos un cuadro de confirmación para que el usuario tenga la oportunidad de cancelar la acción:

Si el usuario está seguro de que quiere continuar, eliminamos al cliente:

La devolución de llamada aquí tendrá que eliminar al cliente de $scope.customers usando el id obtenido del servidor:

El resultado

El código completo debería verse así:

Plantilla de clientes

Ahora, para mostrar los datos a nuestros usuarios, tenemos que crear una plantilla. Lo definimos en la ruta como ./templates/customers.html, así que crea el directorio public/templates y el archivo customers.html en él.

Primero agrega el encabezado para que el usuario sepa dónde está:

A continuación, necesitamos una tabla con un bonito encabezado para mostrar los datos:

Ahora agrega el elemento tbody. Y aquí es donde vuelve a entrar la magia de Angular. Usando la directiva ng-repeat le decimos a Angular que repita el elemento:

La sintaxis es como un bucle en JavaScript for...in. Ahora podemos acceder a la variable customer para obtener todos los datos que necesitamos. En Angular, insertas variables usando llaves dobles:

También hay una directiva ng-click que actuará como una devolución de llamada de evento onclick, la usamos para agregar la capacidad de eliminar clientes. A continuación, hay un pie de página con entradas para que el usuario pueda agregar nuevos clientes:

Usamos la directiva ng-model para vincular las variables apropiadas del alcance a las entradas, por lo que se actualizan cada vez que hay un cambio en el valor de las entradas.

Lo último que debes hacer es mostrar un mensaje de error si lo hay. Para lograr eso usaremos la directiva ng-show que solo mostrará el elemento si la expresión especificada es verdadera:

¡Eso es todo! Ahora puedes abrir la aplicación en tu navegador y deberías ver esto:

Puedes agregar un nuevo cliente haciendo clic en el signo + en la esquina inferior derecha de la tabla.


Controlador del cliente

Ahora creemos un controlador para una vista de un solo cliente:

Obteniendo los datos

Obtenemos los datos del cliente usando el módulo $routeParams que contiene todos los parámetros de ruta como :id que especificamos anteriormente:

La devolución de llamada es prácticamente la misma que en CustomersController. Ahora obtengamos todas las transacciones del cliente:

La devolución de llamada es un poco diferente a la anterior porque también queremos mostrar la suma de los montos de las transacciones. Necesitamos usar parseFloat() porque Laravel envía flotantes como cadenas.

Agregar nuevas transacciones

El código será muy similar al utilizado para crear nuevos clientes:

La única diferencia es que agregamos el "id" del cliente a los datos para que el servidor sepa de quién es la transacción. La devolución de llamada exitosa también se modifica un poco, porque tenemos que analizar el flotante antes de agregarlo al $scope y tenemos que agregar la cantidad a nuestra suma.

Eliminar transacciones

El código para la función removeTransaction() es casi idéntico a removeCustomer siendo diferente solo en los nombres de las variables:

El resultado

Todo el controlador debería verse así:

Plantilla del cliente

La plantilla para un solo cliente no tiene nuevas directivas de Angular, así que simplemente crea un archivo llamado customer.html en public/templates/ y coloca este código allí:

Ten en cuenta que estamos usando toFixed(2) para redondear los flotantes de modo que solo tengan dos campos decimales, porque es la forma en que Laravel maneja los flotantes en JSON.

Ahora puedes abrir el navegador y hacer clic en uno de los clientes que creaste. Deberías ver el controlador y la plantilla en acción:


Conclusión

Ahora, si has agregado alguna funcionalidad después de la primera parte, incluirla en el front-end debería ser una cuestión de agregar algunas líneas de código aquí y allá.

Espero que después de que hayas terminado de leer el artículo y tu aplicación esté terminada y funcionando, comiences a pensar cómo podrías crear aplicaciones de una sola página sin AngularJS y cualquier aplicación PHP sin Laravel. Avísame si tuviste algún problema con alguno de los frameworks presentados aquí.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.