AnjularJS, innovando en nuestros proyectos web

20 noviembre, 2014
No hay comentarios

¿Qué es AngularJS?

 

El futuro de las webs va a pasar por esta tecnologia desarrollada por google. Hace más simple, más rapido y más potente cualquier aplicacion web que desarrollemos con este framework.

AngularJS es un impresionante framework javascript opensource desarrollado por Google. Un framework para crear Webapps en lenguaje cliente con Javascript ejecutándose con el conocido single-page applications (aplicación de una sóla página) que extiende el tradicional HTML con etiquetas propias (directivas) como pueden ser ng-app, ng-controller, ng-model, ng-view…

Un framework basado en MVC (Modelo-Vista-Controlador) increíblemente flexible, de muy fácil lectura y desarrollo rápido (puedes empezar en minutos).

Permite extender HTML con tags personalizados, definir y vincular (data-binding) variables vista/controllador, consultas ajax con peticiones HTTP, sistema óptimo de templating, manipulación de datos en JSON, inyección de dependencias, deep linking, formularios de validación, desacoplamiento del DOM de Javascript, internacionalización i18n y l10n, filtros, unit testing…

AngularJS es compatible con los navegadores de última generación (Chrome, Firefox, Safari, Opera, Webkits, IE9+) y se puede hacer compatible para Internet Explorer 8 o anterior mediante varios hacks

Mejoras del HTML

Este Javascript pretende que los programadores mejoren el HTML que hacen. Que puedan producir un HTML que, de manera declarativa, genere aplicaciones que sean fáciles de entender incluso para alguien que no tiene conocimientos profundos de informática. El objetivo es producir un HTML altamente semántico, es decir, que cuando lo leas entiendas de manera clara qué es lo que hace o para qué sirve cada cosa.

Lógicamente, AngularJS viene cargado con todas las herramientas que los creadores ofrecen para que los desarrolladores sean capaces de crear ese HTML enriquecido. La palabra clave que permite ese HTML declarativo en AngularJS es «directiva», que no es otra cosa que código Javascript que mejora el HTML. Puedes usar el que viene con AngularJS y el que han hecho terceros desarrolladores, puesto que muchas personas están contribuyendo con pequeños proyectos -independientes del propio framework- para enriquecer el panorama de directivas disponibles. Hasta este punto serás un «consumidor de directivas», y finalmente cuando vayas tomando experiencia serás capaz de convertirte en un «productor de directivas», enriqueciendo tú mismo las herramientas para mejorar tu propio HTML.

AngularJS por encima

Ahora vamos a hacer un breve recorrido para nombrar y describir con unos pequeños apuntes aquellos elementos y conceptos que te vas a encontrar dentro de AngularJS.

Primeramente tenemos que hablar sobre el gran patrón que se usa en Angular, el conocido Modelo, Vista, Controlador.

  • Vistas: Será el HTML y todo lo que represente datos o información.
  • Controladores: Se encargarán de la lógica de la aplicación y sobre todo de las llamadas «Factorías» y «Servicios» para mover datos contra servidores o memoria local en HTML5.
  • Modelo de la vista: En Angular el «Modelo» es algo más de aquello que se entiende habitualmente cuando te hablan del MVC tradicional, osea, las vistas son algo más que el modelo de datos. En modo de ejemplo, en aplicaciones de negocio donde tienes que manejar la contabilidad de una empresa, el modelo serían los movimientos contables. Pero en una pantalla concreta de tu aplicación es posible que tengas que ver otras cosas, además del movimiento contable, como el nombre de los usuarios, los permisos que tienen, si pueden ver los datos, editarlos, etc. Toda esa información, que es útil para el programador pero que no forma parte del modelo del negocio, es a lo que llamamos el «Scope» que es el modelo en Angular.
Nota: Por ese motivo por el cual en AngularJS tienes unos modelos un poco diferentes, algunos autores dicen que el patrón que utiliza el framework es el MVVM Model-View-View-Model. En resumen, el modelo de la vista son los datos más los datos adicionales que necesitas para mostrarlos adecuadamente.

Además del patrón principal, descrito hasta ahora tenemos los módulos:

Módulos: La manera que nos va a proponer AngularJS para que nosotros como desarrolladores seamos cada vez más ordenados, que no tengamos excusas para no hacer un buen código, para evitar el código espaguetti, ficheros gigantescos con miles de líneas de código, etc. Podemos dividir las cosas, evitar el infierno de las variables globales en Javascript, etc. Con los módulos podemos realizar aplicaciones bien hechas, de las que un programador pueda sentirse orgulloso y sobre todo, que nos facilite su desarrollo y el mantenimiento.

Facebooktwitterredditpinterestlinkedinmailby feather