Bienvenido al blog de Parzibyte. Vas a encontrar tutoriales y tips de programación, bases de datos, redes, electrónica e informática general. Ejemplos de código, aplicaciones gratuitas y open source
AngularJS, si bien es un framework que ya no es recomendado hoy en día para realizar proyectos (si eres fan de AngularJS entonces puedes ver a angular.io), tiene un gran uso. Infiero que muchísimos sistemas están escritos con el framework superheroico de Google.
Notificaciones en AngularJS con AngularUiNotification
En este post se verá cómo mostrar notificaciones usando el framework de JavaScript llamado AngularJS y una librería llamada angular-ui-notification.
Conforme crecen nuestras aplicaciones diseñadas con el framework AngularJS, a veces se muestran porciones que no deberían mostrarse.
Es decir, mientras la app carga se muestran plantillas sin procesar, o cosas que deberían estar ocultas (como un menú).
AngularJS proporciona una manera muy sencilla de ocultar nuestra app mientras ésta no esté lista. O en otras palabras, no mostrar nada mientras nuestra app esté cargando.
Para ocultar, tenemos que modificar dos cosas: nuestra vista (html) y nuestros estilos (css). En los estilos CSS ponemos lo siguiente:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}Básicamente estamos diciendo que aquellos elementos que tengan la directiva ng-cloak no deben mostrarse. Supongo que después, cuando el framework detecta que la app está lista, remueve ese estilo.
En fin, ahora para terminar, en donde definamos la directiva ng-app (normalmente en el body) agregamos la directiva ng-cloak:
<body ng-cloak ng-app="tuApp" ng-controller="tuControlador">
Lo expuesto aquí fue sacado de la documentación oficial.
Ya vimos anteriormente cómo podemos generar códigos de barras con AngularJS en este post. Hoy veremos cómo generar códigos QR. No sé la diferencia entre esos 2, pero creo que los QR pueden guardar más información y su lectura es más fácil.
En fin, no vamos a ver las diferencias, vamos a ver cómo generar códigos QR utilizando AngularJS.
Necesitamos QRCode y Angular-QR. El proyecto original está aquí, en GitHub. Para utilizar la librería, podemos utilizar bower, o incluir directamente los scripts, así:
<script src="https://cdn.rawgit.com/janantala/angular-qr/master/lib/qrcode.js" type="text/javascript"></script> <script src="https://cdn.rawgit.com/janantala/angular-qr/master/src/angular-qr.js" type="text/javascript"></script>
Debemos incluirlos en ese orden, y obviamente antes de ellos debemos incluir a AngularJS. La versión mínima que pide es la 1.
Una vez que ya incluimos las librerías, al instanciar nuestra app debemos decirle que usaremos este módulo.
angular
.module("TuApp", ["ja.qr"]); // Registramos a ja.qrCon ello ahora sí podemos utilizar la directiva.
Sólo tenemos que utilizar la directiva qr. Le podemos pasar algunas opciones como el texto que será codificado, nivel de corrección, etcétera. Pero para algo básico, se puede hacer algo como lo de abajo.
Con esto, generamos un código QR con el texto que pusimos entre comillas. Aquí un plunker demostrando el funcionamiento. Si quieres puedes escanear el código QR 🙂
Al escanearlo, a mí me aparece esto:
Veamos ahora más opciones
Hace un momento utilizamos una cadena, pero no era una variable perteneciente a nuestro scope. Ahora vamos a hacer que imprima una cadena dependiendo de una variable. Se modificaría así:
Lo único que cambió fue que hicimos que dibujara una variable de nuestro scope. Aquí un plunker:
Lo que falta ahora es ligar nuestro código QR a un input, para que se genere el código conforme escribamos. Me gustó mucho el resultado, ya que el código QR se genera conforme escribimos, y va cambiando su forma, algo muy entretenido.
Agregaríamos un input y lo ligaríamos. Quedaría así:
Y un plunker para comprobar nunca cae mal:
Vamos a ver cómo combinar el generador con ng-repeat y ng-show.
Podemos repetir códigos dependiendo de un arreglo. Por ejemplo, en mi controlador he declarado un arreglo de cadenas. Luego, en la vista hago un ng-repeat. El div que he agregado es para separar los códigos QR.
Plunker:
Genial, estamos repitiendo códigos. Ahora lo combinaré con un ng-show…
Para hacer esto más divertido, repetiremos los códigos con ng-repeat y daremos la opción de ocultarlos.
Si el checkbox está marcado, el código se muestra. Si no, pues no. También he modificado el arreglo, ahora guarda objetos en lugar de cadenas.
Podemos cambiar el tamaño del Código QR con el atributo size, el nivel de corrección con correction-level, el modo de entrada que puede ser alfanumérico, numérico, etcétera con input-mode. Las opciones están en la página de GitHub, aquí.
Eso es todo. Cabe aclarar que estos códigos sí son legibles incluso al imprimirlos, acabo de imprimir uno y el resultado es más que satisfactorio. Así que con un poco de trabajo podemos generar códigos QR fácilmente, gratis y a nuestro modo.
Nota importante: por defecto, la librería crea el código QR en un elemento canvas. Si queremos que lo renderice a una imagen, es decir, a un elemento img (para imprimir o cosas de esas) debemos establecer el atributo image=”true”.
Una cosa que me gusta de AngularJS es la facilidad que brinda para agregar nuestros propios filtros. Hoy quiero compartir 2 filtros que personalmente utilizo en mis aplicaciones, son para filtrar fechas. Es decir, formatear una fecha para que sea legible por el humano.
Este filtro puede recibir un objeto de tipo Date, o una cadena que sea válida para instanciar un objeto de tipo Date. Devuelve una fecha como “13/abr/2018”
Después podemos utilizarlo como cualquier filtro.
Este filtro devuelve una cadena muy larga, pero es útil si queremos saber incluso la hora. Devuelve algo como “viernes, 13 de abril de 2018 16:57”.
El filtro es este:
Aquí dejo un pequeño plunker para demostrar el uso de los filtros.
Retomando la sección de cosas que hago para usos personales, recuerdo que una vez hice una app para memorizar un texto. Es muy simple, pegas un texto que tienes que memorizar y el software se encarga de eliminar algunas partes de éste y dejarlas en blanco.
Luego, tienes que completar estos campos. Y la app te indica si lo hiciste bien o mal. Si no te gusta la forma en la que se mezclaron las palabras, puedes mezclarlas de nuevo.
Trataré de dar una explicación del funcionamiento. Tenemos la interfaz principal compuesta por un textarea y un botón.
Al botón le añadimos el atributo ng-click para que AngularJS se encargue de llamar a la función comenzar, que recibe el texto como argumento.
Primeramente detenemos la ejecución si no hay texto, es decir, si lo dejaron en blanco. Luego, quitamos todos los acentos y letras ñ, para que los usuarios no se quejen de que pusieron bien la palabra pero “olvidaron la tilde”.
Luego, separamos todo el texto en cada espacio que encontremos, y lo convertimos en un arreglo. Lo recorremos completamente y en cada iteración hacemos una comparación.
Si el azar nos dice que borremos la palabra, entonces la borramos. Y ponemos en un nuevo arreglo (no el original, sino uno nuevo) un objeto con la palabra original y una cadena vacía, que será la que introducirá el usuario.
En caso de que no se deba borrar la palabra, la ponemos tal y como está.
La variable del contador es para que no queden muchos inputs cercanos o pegados.
Este método se encarga de regresar, de acuerdo a una elección aleatoria, un booleano. Simplemente elige un valor de un arreglo. En el arreglo hay más falsos que verdaderos, pero esto ayuda a que no elimine muchas palabras. El código es este:
Finalmente, para verificar si el usuario introdujo la palabra correcta, en la vista agregamos algunas clases dependiendo de ello. Si está bien, agregamos la clase is-valid y si no, la clase is-invalid. Esto hace que se coloree de verde o rojo.
También es importante notar que la anchura del input viene dada de acuerdo a la longitud de la palabra. Dicha anchura o longitud es calculada con una fórmula medio rara pero que al final de todo funciona y cambia de acuerdo a qué tan larga esté la palabra.
Tal vez sería mejor calcular el ancho en una función interna, pero hoy no cambiaré el código.
Así se ve al hacer click en comenzar:
Aquí dejo un pen para probar la app en vivo. Espero que les guste 🙂
See the Pen Memorizar o estudiar texto by Luis Cabrera Benito (@parzibyte) on CodePen.
Por cierto, dentro del código hay una directiva que me robé de por ahí, la cual se encarga de, como su nombre lo dice, enfocar el siguiente input cuando se presione la tecla Enter.
Recuerdo que hice esa cosa para memorizar algunas cosas en un examen. Soy muy malo con mi memoria, y creo que no sirvió para mucho.
Si hay algo que me molesta son los exámenes en donde tienes que utilizar la memoria para responderlos. Qué pereza y qué pérdida de tiempo, prefiero las cosas prácticas. Pero en fin, ojalá a alguien le sirva el software.
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:
Podemos cambiar a PHP por cualquier lenguaje del lado del servidor.
Si quieres probar el ejemplo terminado, entra aquí. Abajo dejo también la carpeta para que puedas descargarla y probarla por ti mismo.
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.
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.
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.
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.
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
Un GIF dice más que mil palabras:
Y con esto terminamos por hoy.
Este es un post muy simple. Sólo muestro cómo crear una tabla HTML que tenga la directiva ng-repeat utilizando Emmet. Así, podemos expandirlo todo.
La abreviación queda así:
table>(thead>tr>th{Encabezado $}*5)+(tbody>tr[ng-repeat="avio in aviosExistentes track by \$index"]>td{\{\{avio.valor}\}\}*5)Si analizamos bien, creará una tabla. Dentro de esa tabla, estarán los elementos tbody y thead, dentro de cada uno de ellos habrá filas. Y dentro de cada fila, un valor.
Al expandir la abreviación, da un resultado así:
<table>
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
<th>Encabezado 4</th>
<th>Encabezado 5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="avio in aviosExistentes track by $index">
<td>{{avio.valor}}</td>
<td>{{avio.valor}}</td>
<td>{{avio.valor}}</td>
<td>{{avio.valor}}</td>
<td>{{avio.valor}}</td>
</tr>
</tbody>
</table>Y podemos cambiar el 5 por el número de columnas que deseamos.
Eso es todo por hoy.
angular.copy es una función que trae el framework AngularJS. Funciona para, como su nombre lo indica, copiar variables.
Cada que utilizamos angular.copy, ésta función devuelve una nueva copia exacta del objeto que le pasamos, pero sin mantener la referencia en el objeto original.
Así, aunque esta nueva copia sufra cambios, el original no se verá afectado. Y lo mismo pasa si el original sufre cambios
Para explicar mejor el funcionamiento, hagamos un pequeño ejemplo que guarde el nombre y la edad de las mascotas en un arreglo. Y luego, que lo dibuje en una tabla.
Como se puede ver, la primera mascota se guarda correctamente. Pero al querer guardar la segunda, o escribir en un input, todas las de la tabla sufren cambios. Esto es debido a que angular mantiene vigilados a los objetos, y como la referencia es la misma entonces actualiza a todos.
Justo en estos casos es cuando copy viene al rescate.
Ahora probemos este, en donde sólo modificamos la línea en donde hacemos el push. En este caso, agregamos la copia del elemento al arreglo.
En conclusión, es bueno utilizar esta función si no queremos que los objetos sean los mismos y al actualizar uno se actualicen todos.
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.
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>
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
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:
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:
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:
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:
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.
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.
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.
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.
Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.
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.
Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.
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:
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:
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:
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.
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.
