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í:

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:

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:

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í:

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:

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:

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:

Ahora usaremos ng-repeat en nuestra vista:

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:

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:

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

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

5 comentarios en “Códigos de barras con AngularJS”

  1. Hola amigo, me gustaria saber como hacer que un scanner externo “escanee” lo que es un codigo e tipo PDF 417 actualmente uso Angular 8 TypeScript y JavaScript¡

    eh tomado algunos ejemplos de scanner pero llama la camara y no eh podido hacer que llame el escaner

    1. Hola. Te refieres a leer un código de barras con la cámara del dispositivo, o leer un código a partir de una imagen? no te he entendido bien, pero claro que te puedo ayudar

    1. Hola. Tu pregunta es ambigua, ¿leerlos en qué modo, directamente de la cámara, a través de un archivo, en un input, o cómo? No he trabajado con Angular 6, pero sí con Node.

  2. Pingback: Generar Códigos QR con AngularJS y QrCode - Parzibyte's blog - El blog de Luis Cabrera

Dejar un comentario