En este post vamos a presentar una pequeña pero muy útil directiva para Angular. La idea será poder editar un elemento HTML (en este caso, una etiqueta span) al hacer doble click sobre dicho elemento. Las directivas de Angular permiten extender (o decorar) elementos HTML con comportamientos, y manipular el DOM de manera relativamente sencilla pero muy potente, y además elegante y reutilizable.
El tiempo pasa y la tecnología cambia muy rápido pero los conceptos no tanto. Hace muchos años en 1995 apareció con Java Applet una forma de ejecutar código de alto nivel (en este caso Java) mediante una máquina virtual en el navegador, la Java Virtual Machine (JVM). El concepto era poder utilizar aplicaciones tan potentes como las de un escritorio en un navegador web y que el trabajo duro lo realizara cliente.
Aunque no acabó triunfando, ya que la JVM era pesada en la descarga y en el arranque de cada applet, el concepto evolucionó y Adobe lo llevó hasta su concepto de las RIAs (Rich Internet Application)creadas con Flex y basadas en otra máquina virtual Flash Player, mucho más ligera y que era un estándar ya que el 99% de los usuarios la había adquirido para ver contenido Flash.
Siempre se auguró como el futuro de internet este concepto y en la actualidad los frameworks JavaScript para aplicaciones web «single page» han tomado el relevo de crear sistemas en los navegadores donde gran parte de su lógica de negocio depende del cliente.
Sin tener experiencia previa, elegir un framework u otro puede ser una jungla difícil de atravesar. En este artículo vamos a comparar los que pensamos que son los frameworks JavaScript más populares: Backbone.js, AngularJS y Ember.js, primero desde un punto de vista lo más objetivo posible y posteriormente vamos a atrevernos a mojarnos y dar nuestra opinión personal sobre cada uno de ellos como la elección que hemos tomado en nitsnets | studios.
A la hora de diseñar una aplicación o software, es bastante común el caso de necesitar realizar un listado de datos anidados o jerarquizados. Por ejemplo: una lista de equipos pertenecientes a una liga y que incluye el entrenador y los jugadores de cada equipo, o un listado de autores con sus libros, que puede tener un nivel más de anidamiento si cada libro incluye, por ejemplo, una lista con cada una de las ediciones que ha tenido.
Desde la versión del framework 1.2, AngularJS nos provee con dos nuevas directivas diseñadas para facilitarnos esto. Estas dos nuevas directivas son ng-repeat-start y ng-repeat-end. Utilizando ambas junto con la clásica ng-repeat podemos conseguir una visualización de datos anidados sencilla pero realmente potente y adaptable.
A partir de la versión 1.1.4 del framework (descargar aquí del Google CDN), AngularJS viene con soporte nativo para animaciones y transiciones gracias a la nueva directiva ng-animate. Os recomendamos encarecidamente echarle un vistazo al fantástico artículo en el blog yearofmoo que nos explica cómo utilizar esta nueva y genial feature de AngularJS y nos proporciona un buen número de ejemplos.
Puesto que esta directiva es una novedad de esta versión, debemos consultar la documentación de ngAnimate en los docs de la versión 1.1.4 ya que en versiones anteriores no vamos a encontrar referencias a las animaciones.
En nitsnets | studios vamos a desarrollar un nuevo gran proyecto para una importante multinacional. Un B2B (business to business) de la que pronto podremos contar más. El reto: desarrollar toda la intranet sin lenguaje servidor ya que la capa de lógica de negocios está totalmente implementada por webservices y por tanto la creación de una Webapp o Web Application con tecnología estándar HTML/CSS3/Javascript para la correcta visualización en multiplataforma y multidispositivo.
Después de tiempo investigando y planteando incluso una solución realizada a medida con nuestro jefe de proyectos Alex Such dimos con la solución: AngularJS un framework javascript MVC que se adapta a la perfección y encaja a todo lo que habíamos ideado. Para los más flasheros un sustituto ideal con tecnología estándar web de las RIAs (Rich Internet Application) creadas con Flex.
Durante este artículo os mostraremos un ejemplo de cómo empezar y una buena forma de organizarnos con AngularJS