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. En este post se verá cómo mostrar notificaciones usando el framework de JavaScript llamado AngularJS y una librería llamada angular-ui-notification. ...
Introducción Siguiendo con los tutoriales de enviar o cargar archivos a un servidor usando AJAX veamos hoy cómo podemos subir múltiples archivos a PHP usando FormData y el framework AngularJS. Para esto usaremos el servicio de $http combinado con FormData. ...
Introducción 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. Ocultar app mientras carga con NgCloak Para ocultar, tenemos que modificar dos cosas: nuestra vista (html) y nuestros estilos (css). En los estilos CSS ponemos lo siguiente: ...
Introducción 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. Incluir Librerías 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í: ...
Introducción 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. Fecha corta 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” ...
Introducción 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. ...
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. Código completo Recomiendo ver el post completo y luego descargar el código completo. Lo dejo en GitHub: https://github.com/parzibyte/formulario_angularjs_php ...
Introducción 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. Abreviación Emmet 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í: ...
Introducción 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 Demostración sin angular.copy 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. ...
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. ...