angularjs

Ejemplo de envío de formulario con AngularJS y PHP utilizando AJAX

Introducción

Los formularios son los más utilizados a la hora de necesitar información del usuario. Si estamos trabajando con AngularJS sería una ofensa enviar un formulario con los métodos que ya conocemos. Así que hoy mostraré un pequeño ejemplo de cómo enviar un formulario utilizando:

  • AJAX
  • AngularJS
  • PHP

Podemos cambiar a PHP por cualquier lenguaje del lado del servidor.

Ver ejemplo terminado

Si quieres probar el ejemplo terminado, entra aquí. Abajo dejo también la carpeta para que puedas descargarla y probarla por ti mismo.

formulario_angularjs

Preparando el lado del cliente

App

Comencemos definiendo la app y el controlador, así como el código HTML. Al inicio, quedaría así:

Notar por favor que he puesto un {{5 + 5}} para ver si no ha habido ningún error. Si no lo hay, se mostrará el número 10:

Esto es más que nada para verificar si todo ha ido bien. Si no, por favor verifica que has incluido la librería y que no has tenido errores de escritura.

Formulario

Hora de comenzar a crear el formulario. En este caso haré un formulario para guardar mascotas. Preguntaré su nombre, edad y raza. El código se vería como a continuación. Notar por favor que no he definido nada en el código Javascript.

Simplemente agregué algunos campos de entrada. Es importante notar que a la edad le he asignado el tipo number, de esta manera AngularJS se encargará de convertir ese campo a un número.

Juntando modelo con formulario

Ahora vamos a meternos un poco con Javascript. Definiremos la variable que guardará la mascota (que será un objeto) y luego reflejaremos los cambios en el formulario. Así:

Lo único que hicimos fue declarar una variable en el $scope. Y luego, a cada input le pusimos un ng-model refiriéndose a una propiedad de dicha variable.

La etiqueta que puse abajo (pre) fue para “depurar” y ver si realmente se están haciendo cambios. Podemos probar cambiando los valores, y veremos que se reflejan abajo y se muestra el objeto completo.

También es importante notar que la edad es un número (no trae comillas). Esto sirve cuando hacemos operaciones aritméticas, pues no tenemos que estar viendo si es cadena o número.

Hasta ahora se ve así:

Ahora sí ya tenemos vinculado nuestro modelo con la vista. Hora de programar el botón y mandar esos datos por AJAX.

Enviando datos

Para terminar con la programación del lado del cliente, vamos a escuchar al botón. Cuando hagamos click, haremos una petición POST a un archivo PHP. Le mandaremos (codificado con JSON, para intercambiar y mantener limpios los datos) el objeto mascota.

Para esto necesitamos el módulo $http que AngularJS ya trae. El código final se ve así:

Muy simple de explicar. Utilizamos $http.post para enviar datos al archivo recibir.php. Serializamos los datos con JSON para que viajen de forma segura. Escuchamos el click del botón y listo. Una vez que la petición haya terminado, imprimimos la respuesta en la consola.

 

Programando el lado del servidor

Vamos a hacer que los datos que se reciban sean escritos en un archivo txt simplemente para comprobar que realmente se están enviando. En la vida real puede que los guardemos en una base de datos, o algo así.

Es importante mencionar que AngularJS manda los datos de diferente manera que jQuery. jQuery por defecto los manda como si fueran un formulario, y accedemos desde PHP con $_POST. En cambio, AngularJS los manda para poder leerlos en el flujo de entrada de datos.

Otra cosa que hay que mencionar es que se tiene que hacer un echo, pues eso es lo que leerá la petición como resultado.

Hace algunos años cuando apenas aprendía AJAX, intenté hacer un return y no hubo resultados ¡jaja! ya que se tiene que imprimir algo, no regresar algo.

Pero bueno; hablar es de mal gusto. Aquí el código:

Y listo ¡hemos terminado! Hora de probar

Probando app

Un GIF dice más que mil palabras:

Y con esto terminamos por hoy.

Gráficas de barras con Chart.js y AngularJS para mostrar estadísticas y reportes

Introducción

En este post daré una pequeña introducción a la creación de gráficas de barras usando el poderoso y superheroico framework AngularJS. Usaremos también la librería llamada ChartJS y otra llamada angular-chart. Lo que hace ésta última es “pegar” o juntar a las dos primeras.

ChartJS puede ser usado sin ningún framework; es decir, podemos hacerlo con simple javascript, pero no queremos eso ahora. AngularJS, como todos lo sabemos, refresca la vista cuando detecta que algo en el controlador cambió, pero como ChartJS no tiene que ver nada con él, las gráficas no se dibujarán de nuevo cuando algún dato cambie. Aquí es en donde viene angular-chart que, como lo dije, funciona como un pegamento y hace que trabajemos con gráficas in the angular way.

Incluyendo archivos

Lo primero que tenemos que hacer es incluir las librerías antes mencionadas. Aquí podemos obtener la última versión estable de AngularJS, aquí la de Chart.js y finalmente aquí la de angular-chart.

Una vez incluidas, nuestro archivo html debería verse así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

Declarando app y controlador

Una vez que hemos incluido los scripts vamos a comenzar a declarar nuestra app y nuestro controlador principal. Así que en nuestro archivo de javascript pondremos lo siguiente:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {

  }]);

Ya declaramos todo en nuestro script. Ahora vamos a declararlo en nuestra vista agregando ng-app y ng-controller:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ControladorPrincipal">
  </div>
</body>

</html>

Ahora sí nos vamos a centrar en las gráficas

Creando gráficas

Gráfica de barras

Para pintar nuestra gráfica, usaremos canvas. No tenemos que interactuar directamente con él; simplemente tenemos que definirlo con algunos atributos. Al agregar el canvas nuestra vista debe verse así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ControladorPrincipal">
    <canvas 
    class="chart chart-bar" 
    chart-data="datos" 
    chart-labels="etiquetas" 
    chart-series="series"></canvas>
  </div>
</body>

</html>

Si nos fijamos bien, el elemento canvas tiene muchos atributos desconocidos o raros. Aquí los explico:

  • id: El id que todos los elementos pueden tener. Es opcional
  • class: Dos clases, la clase chart y chart-bar. Chart-bar puede cambiar dependiendo del tipo de gráfica. Atributo requerido
  • chart-data: El nombre de la variable que se encuentra en el controlador. Estos datos son los que se van a dibujar en la gráfica. Éste debe ser un arreglo, más adelante lo explicaré
  • chart-labels: Las etiquetas o leyendas que serán dibujadas en el plano X
  • chart-series: Si vamos a hacer una comparación, aquí debemos poner cuántos campos queremos que salgan por cada etiqueta

Ahora vamos al controlador para que esto quede más claro. Así se debe ver:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['2006', '2007', '2008', '2009'];
    $scope.series = ['Ventas', 'Gastos'];

    $scope.datos = [
      [65, 59, 80, 81],
      [28, 48, 40, 19]
    ];
  }]);

Ahora sí podemos ver cómo se está dibujando la gráfica. En este caso vamos a comparar los gastos y las ventas por año. Comenzando con las etiquetas, podemos ver que son los años.

Son 4 años los que estamos comparando, por lo que los datos deben ser un arreglo de arreglos. Y dentro de cada arreglo están los datos que van a ir por año. Por ejemplo, en el 2006 se verá que para ventas hubo 65 y para gastos 28.

El resultado hasta el momento será el siguiente:

 

Gráfica de pastel

Ahora veremos cómo crear una gráfica pero de pastel. El código es casi el mismo que el anterior; sólo cambia el tipo de gráfica a chart-pie. Queda definida así:

 <canvas 
    class="chart chart-pie" 
    chart-data="datos" 
    chart-labels="etiquetas"></canvas>

Y en el controlador, los datos ahora estarán en un arreglo. No hacen falta definir series, pues no estamos comparando nada.

Como dije hace un momento, los datos estarán en un arreglo de una sola dimensión; contrario a cuando definimos una de barras. El código del controlador se ve así:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];

    $scope.datos = [1244, 1500, 2053];
  }]);

El resultado es el siguiente:

Cambiando datos y refrescando gráficas

Si cambiamos algún dato dentro del modelo, se supone que debería refrescarse en la gráfica. Para ello usaremos el ejemplo de la gráfica de pastel.  Agregaremos dos campos de texto para que se puedan agregar etiquetas y valores. Al presionar el botón, se podrá apreciar cómo se refresca la gráfica automáticamente.

Los campos de texto quedan definidos así:

    <canvas class="chart chart-pie" chart-data="datos" chart-labels="etiquetas"></canvas>
    <br>
    <input placeholder="Etiqueta" type="text" ng-model="etiqueta" />
    <br>
    <br>
    <input placeholder="Valor" type="number" ng-model="valor" />
    <br>
    <br>
    <button ng-click="agregarDato(etiqueta, valor)">Agregar</button>

Al hacer click en el botón, se llamará al método agregarDato que reside en el controlador. Se le pasarán como argumentos la etiqueta y el valor.

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];

    $scope.datos = [1244, 1500, 2053];
    $scope.agregarDato = function(etiqueta, valor) {
      if (etiqueta && valor) { //Comprobar si no son nulos o indefinidos
        $scope.datos.push(valor);
        $scope.etiquetas.push(etiqueta);
      }
    };
  }]);

Lo único que hacemos es agregar un valor al arreglo de etiquetas y datos. Obviamente los validamos antes de meterlos. Aquí los resultados:

Conclusión

Como podemos ver,  se pueden crear gráficas de barras con AngularJS de una forma muy fácil. Definimos el elemento canvas en la vista y los datos en el contrador. Sólo eso, de lo demás se encarga el framework.

Códigos de barras con AngularJS

A veces es necesario generar códigos de barras o códigos qr con javascript o angularjs. En este caso mostraré cómo podemos hacerlo de una forma realmente rápida y fácil usando este poderoso framework.

Incluyendo lo necesario

Necesitaremos únicamente incluir a angularjs (obviamente) y una librería llamada angular-barcode que podemos encontrar en GitHub.

Nuestro encabezado lucirá algo así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

Ahora vamos a empezar a crear nuestro script para la app, y crear un pequeño controlador.

Comenzando a definir vistas y controladores

En nuestro script escribiremos lo siguiente:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {

  }]);

Como ya declaramos nuestra app en javascript, ahora vamos a ponerlo en HTML para que Angular se encargue de pegar la vista y el controlador. Así que en nuestra vista vamos a declarar la app y el controlador como se ve en el código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">

  </div>
</body>

</html>

Ahora sí vamos a empezar a declarar nuestro código de barras. Simplemente tenemos que poner la etiqueta <angular-barcode> con algunas opciones. Entonces nuestra vista quedaría así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Como podemos ver, estamos definiendo los atributos bc-options, bc-type y el modelo. Vamos a analizar estos 3.

bc-options

Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.

bc-type

Puede ser svg, canvas o img. El código de barras puede ser pintado como una imagen, como un elemento svg o en canvas. Yo recomiendo usar svg porque permite una resolución bastante buena; sobre todo si vamos a imprimir.

Modelo o ng-model

Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.

 

Definiendo propiedades en controlador

Ya declaramos nuestras propiedades para que se reflejen en las vistas, ahora falta definir las opciones en nuestro controlador. Vamos a definir el modelo y las opciones:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigoBarras = "parzibyte.me";
  }]);

Las opciones las he tomado directamente del ejemplo de la librería, podemos verlo aquí para obtener una idea de todo lo que podemos lograr. Con lo explicado arriba, el resultado que se obtuvo es el siguiente:

Haciendo que el código de barras cambie al escribir

Ya pusimos nuestro código de barras, pero es estático. Podemos hacer que sea dinámico y que conforme introduzcamos texto, cambie. Simplemente tenemos que agregar un input y ligarlo al modelo. Sólo tenemos que agregar el siguiente código:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosDeBarras">
  <div ng-controller="ControladorPrincipal">
    <input type="text" ng-model="codigoBarras">
    <br>
    <angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
  </div>
</body>

</html>

Agregando el input, conseguimos cambiar de forma dinámica al código de barras generado. Así se ve ahora:

ng-if, ng-repeat…

Como es una directiva de angularjs, podemos usar ng-if, ng-show, ng-repeat y cualquier otra cosa. Vamos a hacer que se pueda ocultar y mostrar, y también a hacer que se repita dependiendo de un arreglo.

Para ello, en lugar de definir una variable de tipo string, usaremos un arreglo. Por lo que nuestro script cambiará a esto:

angular
  .module("CodigosDeBarras", ["angular-barcode"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.opciones = {
      format: 'CODE128',
      lineColor: '#000000',
      width: 2,
      height: 100,
      displayValue: true,
      fontOptions: '',
      font: 'monospace',
      textAlign: 'center',
      textPosition: 'bottom',
      textMargin: 2,
      fontSize: 20,
      background: '#ffffff',
      margin: 0,
      marginTop: undefined,
      marginBottom: undefined,
      marginLeft: undefined,
      marginRight: undefined,
      valid: function(valid) {}
    };

    $scope.codigos = ["hola", "mundo", "somos", "palabras"];
  }]);

Ahora usaremos ng-repeat en nuestra vista:

<angular-barcode ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

Con lo que tendremos algo así:

Ahora vamos a agregar un checkbox para ocultar o mostrarlos. Simplemente hay que modificar a nuestra vista con el siguiente código:

<label for="mostrarCodigos">¿Mostrar?
    <input type="checkbox" ng-model="mostrarCodigos" />
    </label>
    <br>
    <angular-barcode ng-show="mostrarCodigos" ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>

El resultado ahora es el siguiente:

Imprimiendo códigos

Claro que podemos imprimir en javascript y angularjs, simplemente hay que llamar a window.print. Vamos a agregar un botón para imprimir nuestros códigos:

<button type="button" ng-click="imprimir()">Imprimir</button>

En nuestro controlador vamos a crear la función imprimir:

$scope.imprimir = function(){
      window.print();
    };

Ahora podemos probarlo:

Nota: si deseamos ocultar el botón al imprimir, recomiendo leer este post para ocultar elementos al imprimir usando CSS.

Conclusión

Así es como podemos generar códigos de barras. Hay muchas opciones que tal vez ponga en otro post. Por el momento sólo nos dedicamos a crearlos y a usar la magia del framework, pero falta ver cómo cambiar colores, tamaño, etcétera. Recomiendo ver el proyecto en GitHub, y visitar el ejemplo en donde nos muestran las opciones.