Comparación de Frameworks Web

​ Continuando con la idea del desarrollo web en esta oportunidad les quiero hacer una comparación entre los frameworks web, porque ahora ya sabemos cual es su función y que tan importantes resultan para desarrollar páginas web dinámicas, aplicaciones web, servicios y recursos web. Estos tienden a brindar muchas facilidades para poder comunicarnos con una base de datos, manejar urls, sesiones de usuario y plantillas, es por esto que resulta interesante la elección de uno de ellos para lograr nuestro objetivo con la mejor herramienta que podamos.

​Los frameworks que conozco​ trabajan bajo el Modelo, Vista y Controlador, normalmente encontrado bajo su forma abreviada MVC, esto significa que el proyecto se puede estructurar en:

• Modelo: Permite comunicar con la base de datos y hacer todas las operaciones desde nuestro lenguaje que haga soporte al framework sin tener que tocar necesariamente el código SQL.
• Vista: Son el conjunto de herramientas que ayudan a manejar el HTML comunicado directamente con el sistema.
• Controlador: Es el encargado de todas las operaciones lógicas.

Ahora bien con los post anteriores nos dimos cuenta de que tenemos el Framework para el Front y Backend, por esta razón quiero que vean que a la hora de trabajar podemos hacer mezclas interesantes entre estos y podemos decidir/justificar con buenos argumentos la herramienta que decidimos usar.

En general todos estos Frameworks tienen:

• Consola para realizar pruebas de tu proyecto.
• Manejador de librerías.
• Estructura de carpetas dividida en modelos, vistas, controladores y manejadores de rutas.
• Cuentan con una documentación oficial excelente.
• En todos incluyen etiquetas HTML que te permiten usar muy fácilmente operaciones del lenguaje de soporte.

A continuación les doy una descripción de los Frameworks de Backend que conozco e hice un pequeño blog con cada uno para poder entenderlos un poco mejor:

Django

• Página oficial: www.djangoproject.com.
• Escrito en Python.
• Manejador de librerías: pip
• Ventajas:
  • Tiene mucha documentación.
  • Muchas librerías para descargar que ya tienen funciones que usamos comúnmente.
  • Estructura totalmente personalizada del proyecto.
  • Manejo de migraciones nativo makemigrations (gracias a Marcos Akerman y Juan Perozo por la información).
  • El Admin por defecto de Django es muy fácil de usar.
• Desventaja: Al iniciar un proyecto pienso que se necesita invertir mucho tiempo para poder configurar el proyecto pero esto viene de la mano con su alto nivel de personalización.
• Blog que desarrolle para ver utilidades del framework.
  • Código fuente en Github
  • Demo en línea.

Ruby on Rails

• Página oficial: rubyonrails.org
• Escrito en Ruby.
• Manejador de librerías: gem
• Ventajas:
  • Pienso que lo mejor es su estructura de trabajo que ya te incluye por defecto, la organización de un proyecto aquí es impecable.
  • Ya trabajas bajo REST por defecto.
  • Te da la posibilidad de incluir muchas gemas que funcionan bien y por tanto no existen muchos conflictos.
  • Al igual que Django la documentación es muy buena.
  • La base de datos al igual que en Django se genera y comunica una vez creado el modelo.
  • Existen varios Admin dentro de las gemas de Ruby y son ciertamente muy buenos.
  • Manejo de migraciones nativo.
  • Puedes crear un modelo, vistas, controladores y manejo de pruebas usando sólo un comando Scaffold.
• Desventajas:
  • La podrías ver como la perdida de control absoluto, ya que las libertades que te ofrece Django son un poco difícil de tener en Rails, porque necesitas alterar muchos archivos de configuración, pero ahora bien esto viene de la mano con la perspectiva de convention over configuration donde instalas y usas tus nuevas herramientas, que en la práctica es lo más común. Editado gracias a información de Bishma Stornelli
  • Cada archivo estático que incluyas tienes que decirle donde se encentra para que al momento de compilar le genere la ruta, esto es un poco fastidioso de hacer por archivo.
• Blog que desarrolle para ver utilidades del framework.
  • Código fuente en Github
  • Demo en línea.

Laravel

• Página oficial: laravel.com
• Escrito en PHP.
• Manejador de librerías: artisan
• Ventajas:
  • Existe mucha documentación.
  • Muchos ejemplos.
  • Gran cantidad de tutoriales en línea.
• Desventajas:
  • No hay una consola para testing.
  • PHP necesita que escribas mucho código para hacer cualquier función.
  • Una librería de Admin no supe como agregarlo, capaz si hay alguna forma pero no la se aún.
• Código fuente del Blog que desarrolle para ver utilidades del framework.

Catalyst

• Página oficial: www.catalystframework.org
• Escrito en Perl.
• Manejador de librerías: cpan
• Ventajas:
  • Tiene una estructura de trabajo muy buena al igual que rails, pero más simplificada, menos carpetas que te dejan revisar todo más rápido y fácil de leer.
  • Tiene algo muy útil a la hora de usar los Handler (lo que equivale a los views de django) es que la variable que usa de contexto la puedes mover entre todas tus funciones y esto permite anexar y consultar todo lo que quieras en la consulta muy fácilmente.
  • Los modelos se generan a partir del SQL, es decir si escribes tu SQL muy completo con tablas, indices y demás, al pasarselo el manejador, utiliza la información y crea los modelos.
• Desventajas:
  • El problema de Catalyst es que la sintaxis de Perl es complicada y tarda cierto tiempo para acostumbrarse.
  • Otra desventaja es que la documentación baja pero logras conseguir mucha información en su página oficial y de personas que hacen una publicación útil de vez en cuando.
  • Una cosa que se vuelve un problema con Catalyst es su nombre a la hora de buscar algo te encuentras con cosas de AMD Catalyst y creo que por eso a veces puede que no se consiga la respuesta fácilmente.
  • Una librería de Admin no supe como agregarlo, capaz si hay alguna forma pero no la se aún.
• Código fuente del Blog que desarrolle para ver utilidades del framework.

Yesod

• Página oficial: www.yesodweb.com
• Escrito en Haskell.
• Manejador de librerías: cabal
• Ventajas:
  • Es increíble, la estructura de archivos es super intuitiva.
  • Tiene herramientas propias para trabajar todo el Frontend de la aplicación, ya que hace uso de sus propios lenguajes Shakespeare para trabajar con:
    • HTML: Usas Hamlet eso te autocompleta de las etiquetas y generará por ti un correcto HTML con muy poco código.
    • Javascript: Usas Julius, es igual que todo el Javascript normal, solo que puedes incluir código Haskell para hacer alguna función necesaria.
    • CSS: usas Cassius, el cual tiene una sintaxis muy parecida a CSS pero sin llaves y por tanto se basa en la correcta identación. Puedes declarar variables que se pueden comunicar con el controlador del sistema. Pero como Cassius no era suficientemente mágico y existían SASS y LESS, los desarrolladores crearon Lucius en el que vuelven las llaves pero puedes usar los bloques y herencia tal cual como lo hace LESS y SASS.
  • Además de todo eso en cada una tienes acceso a todas tus funciones que tienes en el contexto.
  • La base de datos se genera también en base al modelo que declares, el cual también tiene un lenguaje especial que se llama persistent.
  • Al igual que Catalyst tu mismo creas el modelo de usuario.
  • El manejo de tipos de Haskell te permite saber que si ya compilo, entonces todo corre y por tanto grarantizas integridad dentro de tu sistema entre las vistas y controlador.
• Desventajas:
  • No tienes casi ejemplos, la mejor es la que encuentras es la oficial, pero cualquier pregunta que tengas en Stackoverflow te las responden con mucha seguridad.
  • Necesitas mucho conocimiento de Haskell para entender su funcionamiento, como en cualquier otro Framework, pero es un poco más difícil en este caso al sólo contar con la documentación oficial en un principio.
• Código fuente del Blog que desarrolle para ver utilidades del framework.

En los blogs que desarrolle para cada framework pueden ver las funciones que se necesitan para poder hacer desde la vista sencilla de una página, hasta una consulta de los post por fecha. Fue de verdad muy interesante el proceso de desarrollo de cada Blog, ya que me permitieron obtener criterios de elección de framework para cada proyecto y espero que a ustedes les sea igual de útil este conocimiento :)

Viene la pregunta interesante ¿Cuál Framework usarías? Ciertamente depende de cada proyecto, tiempo y de tu equipo de trabajo.

Y ahora para saber que Framework les gustaría en próximos posts les dejo esta encuesta.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Tutorial Angular.js III: MEAN.js

​ Hasta ahora ya abarque lo básico de Angular.js en los 2 anteriores post (parte I y parte II) y en este post les quiero compartir el como funciona una aplicación completa cuando usamos Angular.js. Para esto usaré la herramienta MEAN.js que ya de forma nativa tiene acoplado nuestro Framework de Frontend.

Si recordamos el post de Node.js donde hablaba de la herramienta MEAN.js, podemos ver ahora un poco más a fondo su funcionamiento y entender así como Angular.js participa en todo el proceso del desarrollo de un sistema web.

Para instalar lo necesario le comparto aquí todos los comandos:


1 - Crear el proyecto

• Primero que nada nos posicionamos en la carpeta que deseamos tener nuestro proyecto.
• Desde la consola usamos Yeoman para crear el proyecto. Usamos el comando yo meanjs.
• Damos un nombre y descripción de la aplicación.
• Nuestro nombre como autor.
• Luego nos pregunta si queremos un modelo de artículos por defecto y por motivo de tutorial vamos a rechazarlo para poder crear modelos nosotros mismos.
• Y por último se nos pregunta que dependencias queremos usar al crear nuestro proyecto y por defecto aceptamos todas estas que se nos ofrecen.

Luego de esto se crearán todos los archivos que necesita como mínimo el proyecto y solo nos queda instalar todas las librerías necesarias con el comando npm install o bower install. Si tienen problemas para la descarga de las dependencias, puede que se deba a la autorización de bower, este comando resuelve eso: sudo bower --allow-root --config.interactive=false install.

Al finalizar las descargas tendrán todos los archivos necesarios para correr el proyecto y podemos ejecutar el comando grunt para levantar el servidor. Veremos una página parecida a esta al acceder a la dirección localhost:3000.

Y ya entrando en la estructura del código nos daremos cuenta que lo referente a Angular.js se encontrará en la carpeta public/modules, donde cada módulo corresponde a las estructuras que tengamos. Por defecto se tienen los módulos core (base del Frontend del sistema) y users (usuarios).

2 - Manejo de sesión

Automáticamente al crear el proyecto tenemos manejo de sesión de usuarios, registro, editar perfil y cambio de contraseña. También incluye la estructura base del código para conectar nuestro usuario con las redes sociales. Para registrarnos accedemos al botón Sign Up y tendremos una página como esta:

Ingresamos nuestros datos de costumbre y ya tendremos nuestro usuario en el sistema. Al enviar este formulario contaremos con el panel de manejo de usuario:

3 - Crear un modelo

Para esta pequeña aplicación pienso hacer un mini blog donde podamos agregar Posts y para esto necesitamos crear una estructura. Es en este punto donde vemos la conección de Frontend y Backend, ya que una estructura se crea para ambos y debe existir una correcta correspondencia entre ellos. Para lograr esto usaremos una función de Yeoman para crear estructuras con el comando yo meanjs:crud-module post, donde post es el nombre de la estructura. Este nos preguntará lo siguiente:

Lo que significa crear automáticamente las carpetas correspondiente a CSS, imágenes, directivas y filtros para este módulo de Post en Angular.js. Para seleccionar y des-seleccionar usamos la barra espaciadora.

Al aceptar veremos una lista de 14 archivos creados para nuestra estructura Post. ​

• app/controllers/posts.server.controller.js: Permite desde el Backend de la aplicación controlar las operaciones CRUD de la estructura post.
• app/models/post.server.model.js: Detalla el esquema del modelo de la estructura post.
• app/routes/posts.server.routes.js: Maneja las rutas que permiten manejar la estructura post desde el Backend.
• app/tests/post.server.model.test.js: Maneja las pruebas al modelo de la estructura post a nivel de Backend.
• app/tests/post.server.routes.test.js: Maneja las pruebas sobre las rutas a nivel de Backend.
• public/modules/posts/config/posts.client.routes.js: Permite controlar las pruebas sobre las rutas que acceden al modelo post y como beneficio no tener URLs que pretendan acceder sin permisos o con parámetros erróneos.
• public/modules/posts/controllers/posts.client.controller.js: Es el controlador a nivel de Frontend para el modelo post. Este luce como el controlador tradicional que hemos estado aprendiendo con Angular.js.
• public/modules/posts/services/posts.client.service.js: Son los servicios que tendremos para la estructura post.
• public/modules/posts/tests/posts.client.controller.test.js: Es el controlador de pruebas a nivel de Frontend.
• public/modules/posts/config/posts.client.config.js: Permite agregar todas las configuraciones de la estructura post en el Frontend. Por defecto el código te incluye las funciones para los enlaces a las funciones de listar y crear post en el modelo de Menus de la interfaz.
• public/modules/posts/views/create-post.client.view.html: Es la vista para crear un post.
• public/modules/posts/views/edit-post.client.view.html: Vista para editar un post.
• public/modules/posts/views/list-posts.client.view.html: Vista para listar todos los post en la base de datos. Este maneja por defecto lo que muestra si no hay ningún post en la lista.
• public/modules/posts/views/view-post.client.view.html: Vista para ver un único post. Este maneja por defecto que solo el creador puede editarlo o eliminarlo.
• public/modules/posts/posts.client.module.js: Este el que finalmente le dice a la aplicación que tiene el módulo post.

Todo este trabajo de crear esos archivos nos lo acaba de ahorrar esta gran herramienta de Yeoman. Podemos hacer mucho más que crear módulos, también podemos crear vistas, directivas, filtros, manejador de rutas, entre otros. Para saber mas puedes consultar la página del generador Yeoman de Mean.js.

4 - Editar un modelo

En este momento podemos ya navegar en nuestra página creando, editando y eliminando posts, pero estos únicamente tienen nombre, así que tendremos que acceder a varios archivos como mínimo para poder modificar el modelo.

• app/models/post.server.model.js
• public/modules/posts/controllers/posts.client.controller.js
• public/modules/posts/views/create-post.client.view.html
• public/modules/posts/views/edit-post.client.view.html
• public/modules/posts/views/list-posts.client.view.html
• public/modules/posts/views/view-post.client.view.html

Nota: Los archivos correspondientes a las pruebas deben también modificarse para tener un trabajo correctamente realizado.

Yo agregue al modelo de post el atributo content para poder simular el escrito en un post. Ahora podemos acceder a nuestro sistema nuevamente y crear posts. El formulario de creación luce de la siguiente forma:

Y si nos damos cuenta ya esta dentro de la página la validación de formularios con Angular.js. Al ser creado el post podemos verlo como se tiene en la próxima imagen:

Noten que podemos modificar y eliminar el post usando los botones azules que se tienen en la vista.

Ahora bien si nos damos cuenta, todas las páginas tienen la misma apariencia y todas cargan la misma barra de navegación. Esto se debe gracias al archivo layout.server.view.html que tenemos en la carpeta /app/views/templates, en este se importan los archivos necesarios y se modela con la estructura base de todas las vistas.

Por último podemos listar todos los post que escribamos y se vería como la siguiente imagen:

Como un ejercicio interesante se pudiese agregar el módulo Ininite Scroll para cargar posts en la lista a medida que naveguemos en la página. Para instalar un módulo podemos modificar el archivo packages.json agregar la librería de interés o instalarla manualmente con bower, un ejemplo del comando sería bower install infinite-scroll.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Accede al repositorio de este proyecto aquí.

Tutorial Angular.js II

Continuando con lo que llevaba del post anterior (introducción con Angular.js).

1 - Servicios

Un servicio es una instancia única de un objeto, creada para acceder desde varias partes de nuestra aplicación. A esto tipo de instancias únicas se les conoce como Singleton.

Además de esta definición de los servicios se tiene otra en la cual se cuenta con conjunto de funciones de ayuda. Accede aquí a la lista de servicios oficial de Angular.js.

A continuación les muestro un ejemplo usando los servicios.

Esta aplicación consiste en una pequeña calculadora que puede sumar y restar los valores de entrada. Para hacer el ejemplo más interesante se cuenta con una función que permite respaldar un resultado y luego podamos sumarlo con cualquier otro resultado, esto con el fin de usar la propiedad de los servicios para tener una única instancia.

Para crear un servicio usamos la función service desde nuestro módulo, a esta le damos un nombre y una función que la maneje, esto lo vemos en la línea 3 del archivo 1-servicios.js. Ya dentro de la función que maneja nuestro servicio podemos usar la variable this para agregar funciones y atributos. En el ejemplo el manejador tiene el atributo respaldo y las funciones de suma y resta.

Una vez que creemos el servicio podemos acceder a través de todos los controladores que tengamos en nuestro módulo, para esto solo necesitamos pasarlo como parámetro a nuestra función del controlador, tal y como esta en la línea 11 del archivo 1-servicios.js. Ya una vez dentro del controlador podemos acceder a las funciones y alterar el valor que tengamos de nuestro atributo respaldo. Luego dentro del HTML se hacen uso de las funciones del controlador, teniendo la garantía de que nuestro servicio se a creado una sola vez y podemos acceder al último estado siempre.

Esta página se ve como la siguiente imagen:

2 - Fábricas

Las fábricas son un tipo de servicio, donde devolvemos siempre un dato de cualquier tipo. Lo normal es que el dato que devolvemos es un objeto de tipo diccionario donde podremos encontrar atributos y funciones. Seguimos con la misma garantía de que el objeto creado sea único y por tanto se vuelve un gran candidato para manejar sesiones de usuarios, comunicación entre controladores, entre otros.

A continuación les muestro un ejemplo usando las fábricas.

Esta página se trata de un registro de tareas realizadas, en el cual aprovecho el poder de las fábricas con el objeto Singleton, haciendo uso de la función de agregar tareas.

Ahora bien crear una fábrica se hace con la función factory desde el módulo (línea 3 en 2-fabricas.js), le damos un nombre y una función (debe retornar un valor) que maneje el comportamiento de la fábrica.

Ya para usar la fábrica dentro del controlador se hace de forma similar a los servicios, pasamos el nombre de la fábrica como argumento a la función del controlador (línea 22 en 2-fabricas.js) y luego simplemente accedemos a los atributos y funciones.

Noten que con esta instrucción $scope.dato = FabricaBitacora; (línea 36 en 2-fabricas.js) estan ya conectados el objeto de la fábrica y nuestro atributo del controlador, obteniendo en tiempo real dentro del HTML la actualización de los mensajes.

Esta página se ve como la siguiente imagen:

Existen también los providers, los cuales son una versión simplificada de las fábricas que permiten ver el valor retornado como objeto que tiene sus funciones de get y set, permitiendo así trabajar con el modelo orientado a objeto de la manera acostumbrada. Puedes consultar más sobre estos últimos en la documentación oficial de Angular.js. También existe esta pregunta en Stackoverflow donde discuten las diferencias, similitudes entre los servicios, fábricas y los proveedores.

Nota gracias a Levi Velazquez: Las fábricas también son Singletons y que tanto como los servicios y estas son pasadas por referencia. Se puede compartir la misma instancia entre controladores y otros servicios.

3 - Formularios

Angular.js incluye dentro de sus funciones unas ayudas para validar formularios y lo primero que debemos hacer es darle nombre a nuestra forma con el atributo name (línea 12 en 3-formularios.html). Luego es muy importante no olvidar colocar un modelo a cada etiqueta de entrada. Después de esto estamos autorizados para indicarle a nuestros campos de entrada y botones que están o no disponibles.

Para validar podemos usar ng-class el cual tiene 2 posibles clases a heredar:

• has-success: Recibe el parámetro que chequea como campo válido.
• has-error: Es el contrario al anterior ya que chequea la condición de error.

Otra ayuda que nos ofrece Angular.js es esconder o mostrar contenido anidado en una etiqueta, esto lo logra a través de la función ng-show el cual se recibe una expresión booleana. Ejemplo de esto lo tenemos en la líneas:

• 20: Solo se muestra si el email tiene un formato equivocado (forma.emailUsuario.$invalid) y el campo esta sucio (forma.emailUsuario.$dirty).
• 21: Chequea que se tenga un valor escrito, si no lo hay, entonces muestra el mensaje de que el campo es requerido.
• 22: Chequea que el campo tenga el formato corresponda a un Email.

Además tenemos la ayuda para deshabilitar un elemento gracias a la función ng-disabled, el cual recibe una expresión booleana y por tanto permite su uso solo cuando esta expresión sea falsa. Ejemplo de esto lo tenemos en la línea 30, donde se habilitará el uso del botón solo cuando la forma no tenga errores.

Esta página se ve como la siguiente imagen:

Por último tenemos funciones para CSS la cual cambia el color de los campos de acuerdo a la validez del valor. Las funciones que se tienen para esto son:

• ng-valid: El modelo es válido.
• ng-invalid: El modelo no es válido.
• ng-pristine: El campo no se ha usado.
• ng-dirty: El campo ya se uso.
• ng-touched: El campo se ha tocado.
• ng-untouched: El campo no se ha tocado.
• ng-pending: El campo sigue a la espera de su uso.

Puedes consultar más sobre los formularios en la documentación oficial de Angular.js.

4 - Animaciones

Una animación en general tiene puntos claves que deseamos mostrar, punto inicial y punto final, por supuesto podemos agregar puntos intermedios de interés para animaciones más elaboradas, pero para este ejemplo solo nos interesará punto inicial y final.

Angular.js nos incluye una serie de funciones de ayuda para manejar animaciones, las cuales se modifican desde el CSS y Javascript para determinar el comportamiento de la animación.

A continuación les muestro un ejemplo donde tenemos 2 tipos de animaciones:

La primera animación la creo desde el archivo 4-animaciones.js a través de la función animation, la cual recibe el nombre de la clase o id de interés y la función que maneja el comportamiento, línea 9 en el archivo 4-animaciones.js. Ahora bien es muy importante devolver un objeto en esta función para especificar el comportamiento de la animación, en este caso tenemos:

• leave: Comportamiento para desaparecer. En este caso se cambia el texto actual antes de desaparecer y luego se agrega la clase difuminar para desvanecer el texto.
• enter: Este especifica el comportamiento de aparecer. En este caso se cambia el texto y luego se agrega la clase difuminar, la cual a través de CSS hace que aparezca el elemento.

Noten que cada comportamiento llama a la función terminar() para indicar la culminación de la animación. Ahora para usar esta animación necesitamos 2 cosas:

• Un atributo que determine el estado de la animación, lo cual logramos a través del controlador.
• Una especificación del CSS para la clase animada, en la que necesitamos especificar el efecto de transición y comportamiento de entrada-salida o agregar-remover. Notemos que la clase difuminar (archivo 4-animaciones.css) hace uso de funciones de Angular.js al tener dentro del comportamiento el nombre ng, donde el punto inicial de la animación se declara con ng-enter y ng-leave; y el punto final con las funciones ng-enter-active y ng-leave-active.

Ya dentro del HTML uso las funciones que fueron ng-if (soporta enter y leave) y ng-class (soporta add y remove), pero también existen otras y soportan métodos diferentes cada una:

• ng-repeat: enter, leave y move.
• ng-view: enter y leave.
• ng-include: enter y leave.
• ng-switch: enter y leave.
• ng-show y ng-hide: add y remove.

Para aprender a usarlos y saber más sobre estas funciones consulta la página oficial de animaciones en Angular.js.

Esta página se ve como la siguiente imagen:

Existen varias funciones de transiciones, en el ejemplo uso la ease-in-out para la animación 1 y cubic-bezier para la animación 2. Ambas tienen una duración de 1.618 segundos. Si deseas ver otras transiciones las puedes consultar W3Schools.

5 - Módulos

Los módulos en Angular.js son contenedores que nos permiten encapsular los controladores, servicios, filtros, entre otras funciones, es decir crear nuestras propias librerías y aún mas interesante usar otras que descarguemos.

Para crear un módulo basta con usar la función angular.module la cual recibe 2 parámetros:

• String: Este corresponde al nombre que deseemos darle a nuestro módulo.
• Lista de dependencias: Es una lista de strings que corresponden a los nombres de todos los módulos que queramos usar para nuestro módulo.

Dentro de un módulo podemos declarar entonces: controladores, fábricas, servicios, filtros, variables, configuraciones (función config) y directivas (función directive). Esta última permite relacionar un URL con un archivo que queramos renderizar.

NGModules es una página que contiene una gran cantidad de módulos que podemos usar. Y para mostrarles lo fácil que es usar un módulo descargado les hago un ejemplo con ngInfiniteScroll.

Esta módulo ngInfiniteScroll nos permite cargar contenido a medida que nos acerquemos a la parte inferior de la página. Por motivos de ejemplo no estoy cargando datos de una base de datos, simplemente avanzo en la cuenta dentro de una la lista numeros. Para usar este módulo es necesario como mínimo agregarlo a nuestro módulo como dependencia y proveer una función de carga de datos, ver el archivo 5-modulos.js

Luego dentro del HTML es necesario únicamente asignar la función de carga de datos a infinite-scroll y un valor que indique la distancia con respecto al inferior de la página en el atributo infinite-scroll-distance.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial Angular.js I

​ El tema de este post es una introducción a Angular.js, ya que la herramienta tiene una gran capacidad y planifique hablar de ella en 3 partes:

• Introducción.
• Funciones extras (módulos, fábricas, servicios, formularios y animaciones).
• Una aplicación real que use todo lo que pueda de esta herramienta.

Como les hable en el post Node.js: Avanzado II, Angular.js es un framework de Frontend, una herramienta que se tiene en la aplicación del lado del cliente, con este podremos tener una interfaz que se actualice junto al modelo en tiempo real.

Angular.js lo podemos usar como una librería que descargamos o agregamos el link al HTML, por tratarse de un tutorial introducción tomo esta última opción.

1 - Hola Angular.js

Lo primero que hacemos es agregar la librería (línea 5 en el ejemplo). Luego le indicamos a nuestra página que trabajamos una aplicación de Angular.js y esto se logra agregando el atributo ng-app en la etiqueta que envuelve la zona de interés. Todos los atributos que comiencen con el nombre ng son atributos que permiten usar funciones de Angular.js.

El otro atributo que uso en el ejemplo es ng-model, este nos permite crear un modelo con el valor de la etiqueta en el que la colocamos, que por lo general es de entrada de valores. En este caso hago un uso muy sencillo de esta función, en la línea 10 le agrego a la etiqueta input un modelo que llamo texto, lo cual permite tomar el valor que se introduzca y usarlo donde queramos, como lo muestro en la línea 12 donde se accede al valor.

Lo más interesante de esta pequeña función de Angular.js es que accedemos al valor y se va modificar en todas las secciones que usemos el modelo, según lo que se tenga en la entrada.

Esta página luce de esta forma:

2 - Controladores

Los controladores de Angular.js son funciones de Javascript que son usadas para aumentar el alcance de la aplicación. Para crear un controlador lo hacemos creando un modulo y usarlo como aplicación, esto es lo que se tiene en la primera línea de 2-controladores.js (en el siguiente tutorial hablaré un poco más sobre el uso de los módulos), en este caso mi modulo lo llamo heroesApp.

Para crear un controlador se llama desde el módulo la función controller y le damos un nombre y una función que determine el comportamiento. Esto se ve en el código en la línea 3 donde llamo al controlador listadoCtrl y creo la función con la variable $scope.

La variable $scope es la que nos permitirá agregar variables y funciones al controlador. Para el ejemplo tenemos en el $scope una lista de valores con el propósito de mostrar una función dentro del HTML para agregar varios elementos. Ahora bien hasta este punto únicamente sabemos crear el controlador más no usarlo, para esto necesitamos hacer lo que se tiene en la línea 10 (asignamos la aplicación) y 14 (asignamos el controlador).

Para mostrar los valores de la lista de heroes usamos la función ng-repeat, la cual permite movernos sobre la lista con un iterador, accediendo a los valores y agregarlos a la página.

Para hacer este ejemplo más interesante tengo otra función en el $scope que permite agregar elementos a la lista y lo bueno de esto viene con la posibilidad que nos entrega Angular.js para acceder y manipular los valores de la entrada que son modelos. Además de esto hago uso de la función ng-submit que es usada en los formularios comúnmente para enviar los valores, a la que le paso como parámetro la función agregarHeroe() que controlará su acción.

Esta página luce como en la siguiente imagen:

3 - Angular.js y CSS

Este ejemplo tiene como objetivo mostrar que podemos usar Angular.js para modificar CSS. Fíjense que podemos cambiar el valor de una clase en una etiqueta simplemente con:

• Modelos: Como en la línea 24 del HTML donde se actualiza la clase según el valor del checkbox y como tenemos una clase de CSS que corresponde a ese comportamiento, cambiará el color del texto.
• Atributos: Variables que se tenga dentro del $scope que cambien y correspondan a un valor que modifique la apariencia.
• Funciones: Valores retornados que modifiquen la apariencia como en la línea 28, donde el color será rojo si todas las tareas están sin hacer, amarillo si queda más de una tarea y verde si ya se realizaron todas.

Además están las funciones:

• ng-click: Función que permite detectar un click en la etiqueta donde se usa el atributo. Para este ejemplo tenemos en la línea 18 esta función, la cual tendrá como resultado la eliminación de las tareas marcadas como realizadas.
• angular.forEach: Permite iterar sobre la lista de elementos que sea pasada como parámetro y hacer lo que queramos con la función que se declare. Ejemplo de esto está en la línea 32 del archivo Javascript

Esta página luce como en la siguiente imagen:

4 - Filtros

Los filtros son funciones que usamos para dar formato a nuestros valores, ordenar y filtrar valores como un buscador.

Para mostrar todas estas funciones de los filtros en el ejemplo se tiene una tabla de datos de unos heroes y la página resultante luce como la siguiente imagen:

Los filtros de formato son:

• uppercase: Coloca en letras mayúsculas todo el string que se use. Un ejemplo de esto lo vemos en la línea 36 del archivo HTML. El filtro para colocar las letras en minúsculas es lowercase.
• date:'fullDate': Permite dar formato de fecha. Un ejemplo de esto lo vemos en la línea 37 del archivo HTML. El formato depende mucho de cada región y en este caso se usa la de España, ya que se importa la librería de localización en la línea 7. Si deseamos cambiarla podemos acceder a la página oficial de Angular.js y decidir segun la versión el idioma y formato.
• number: Este nos permite asignar la precisión a los valores punto flotante. En el ejemplo lo vemos en la línea 39, donde asignó una precisión de 3 decimales.
• json: Da formato a un valor de tipo json.

Podemos también crear nuestro propio filtro.

En este caso el filtro capitalize coloca en mayúscula la primera letra y el resto en minúscula.

Los otros filtros con los que contamos son:

• orderBy: Permite ordenar en forma ascendente o descendente según un atributo. Ejemplo de esto lo tenemos en la línea 34 del HTML.
• filter: Permite conectarse con un modelo y hacer funciones tipo buscador dentro se los valores, dando como resultado los valores que coincidan con el patrón de búsqueda. Ejemplo de esto lo tenemos en la línea 34 del HTML, donde el modelo conectado es filtro_busqueda.
• limitTo: Podemos mostrar solamente una cierta cantidad de elementos de una lista.

Hasta aquí llego este tutorial y si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.