Qué es AngularJS

  • Por
  • y  
Descripción general sobre AngularJS, el framework Javascript, así como los principales componentes que tiene y los conceptos que debemos conocer antes de poner manos en el código.

AngularJS es Javascript. Es un proyecto de código abierto, realizado en Javascript que contiene un conjunto de librerías útiles para el desarrollo de aplicaciones web y propone una serie de patrones de diseño para llevarlas a cabo. En pocas palabras, es lo que se conoce como un framework para el desarrollo, en esta caso sobre el lenguaje Javascript con programación del lado del cliente.

Puedes encontrar el proyecto de AngularJS en su propio sitio web: AngularJS, Superheroic JavaScript MVW Framework. Al ser un proyecto de código abierto cualquier persona con un poco de curiosidad echar un vistazo con profundidad y ver cómo se ha escrito, incluso admiten colaboraciones de desarrolladores que quiera aportar cosas.

Nota: Este artículo es una transcripción de la exposición de Alberto Basalo en DesarrolloWeb.com / EscuelaIT que se emitió en abierto por webinar. Al pie del texto encontrarás un vídeo de esta charla. El bloque anterior de esta ponencia la hemos publicado ya en el artículo "Por qué AngularJS".

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.

Promueve patrones de diseño adecuados para aplicaciones web

Angular promueve y usa patrones de diseño de software. En concreto implementa lo que se llama MVC, aunque en una variante muy extendida en el mundo de Javascript que luego comentaremos con más detalle. Básicamente estos patrones nos marcan la separación del código de los programas dependiendo de su responsabilidad. Eso permite repartir la lógica de la aplicación por capas, lo que resulta muy adecuado para aplicaciones de negocio y para las aplicaciones SPA (Single Page Aplication).

Nota: Las SPA o "Aplicaciones de una sola página", son sitios web donde los usuarios perciben una experiencia similar a la que se tiene con las aplicaciones de escritorio. En este tipo de sitios la página no se recarga, no existe una navegación de una página a otra totalmente diferente, sino que se van intercambiando las "vistas". Técnicamente podríamos decir que, al interactuar con el sitio, el navegador no recarga todo el contenido, sino únicamente vistas dentro de la misma página.

AngularJS a vista de pájaro

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.

Dos "mundos" en AngularJS

Ahora tenemos que examinar AngularJS bajo otra perspectiva, que nos facilite entender algunos conceptos y prácticas habituales en el desarrollo. Para ello dividimos el panorama del framework en dos áreas.

  • Parte del HTML: Es la parte declarativa, con las vistas, así como las directivas y filtros que nos provee AngularJS, así como los que hagamos nosotros mismos o terceros desarrolladores.
  • Parte Javascript puro: Que serán los controladores, factorías y servicios.

Es importante señalar aquí, aunque se volverá a incidir sobre ese punto, que nunca jamás se deberá acceder al DOM desde la parte del Javascript. Es un pecado mortal ya que esa parte debe ser programada de manera agnóstica, sin tener en cuenta la manera en la que se van a presentar los datos.

En medio tendremos el denominado Scope, que como decimos representa al modelo en Angular. En resumen no es más que un objeto Javascript el cual puedes extender creando propiedades que pueden ser datos o funciones. Nos sirve para comunicar desde la parte del HTML a la parte del Javascript y viceversa. Es donde se produce la "magia" en Angular y aunque esto no sea del todo cierto, a modo de explicación para que se entienda algo mejor, podemos decir que AngularJS se va a suscribir a los cambios que ocurran en el scope para actualizar la vista. Y al revés, se suscribirá a los cambios que ocurran en la vista y con eso actualizará el scope.

En el siguiente artículo comenzaremos ya con código, así que los impacientes tendrán ya sus deseos hechos realidad.

Puedes ver el vídeo de esta parte de la presentación sobre Qué es AngularJS.

Autor

Alberto Basalo

Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript, como NodeJS y MongoDB. Es director de Ágora Binaria, empresa dedicada al desarrollo de aplicaciones y a la formación a través de Academia Binaria.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Benito Aliaga

28/8/2014
Limite de desarrollo para necesitar AngularJs
Vengo desarrollando con librerías más sencillas, jQuery, y la verdad q me va bien. Cual es el límite q tendría con jQuery antes de necesitar pasarme a AngularJS? A partir de cuando me convendría aprender? Lo veo todo muy complejo...

Fabian

28/8/2014
Respuesta
Pasa que a estas alturas todavía usar Jquery para todo (dom, ajax, etc) es algo difícil de pensar. Angular te separa todo en capas, y ésto hace que sea mucho mas facil tu trabajo como programador. En cambio jquery (que no es malo), es una mezcla de todo, y asi muchas veces se te complica. jquery tuvo su momento y de hecho aun lo tiene pero en mi opinion en relacion al Dom. La tecnología cambia y nos presenta muchas mejoras. Incluso deberiamos en un futuro estar preparadas por si sale algo mejor que Angular.

Jorge

23/9/2014
Buen video
Muy bueno el video y la explicación, solo le quitaría la presencia de Reinaldo que acaba estropeando la concentración del espectador con su cara de sueño y su ruidos.

josue

14/10/2014
Que recomiendan?
Hola a todos en la actualidad he desarrollado una plataforma online edelh.com esta realizada en zf 1.12 (php) + mysql y he visto buenas criticas en estos frameworks mvc frontend y me llama la atencion.
Ademas que te obliga a crear tu proyecto del lado del servidor como api (corriganme si me equivoco), mi interrogante es si vale la pena el migrar toda mi plataforma hecha en zf a un proyecto angular con una api rest?

En la actualidad la estoy realizando mas que nada para ver hasta donde puedo llegar, pero de todos modos quisiera opiniones.

Muchas gracias.

midesweb

21/10/2014
migrar a rest
Hola,
Creo que es más claro ocupar estas tecnologías para los nuevos proyectos que realices a partir de ahora. O bien, si no estás satisfecho con la experiencia de usuario de tu actual proyecto y tienes el tiempo / dinero para invertir en una nueva versión, entonces puedes planteártelo. Angular tb está muy pensado para aplicaciones de una sola página, así que si tu aplicación se puede comportar bien en ese contexto, es una candidata a ser actualizada a Angular.
Por otra parte, Angular no te obliga a trabajar con un API rest. Está optimizado para ello, pero no necesitas crear toda la arquitectura de un API en tu servidor para sacarle buen partido. Lo que sí debes pensar es que tu servidor va a tener que devolver datos en JSON y no como antes HTML. Eso ya de por si te quita mucha complejidad en el lado del servidor.

eduardo

22/10/2014
Angular JS
No veo la necesidad de utilizar ese framework

tigreci

15/2/2015
Frameworks y mas frameworks
Donde queda la imaginación del programador, si quieres ser un buen programador no te centres en un framework, esta bien saber usarlo, pero a aprender a usarlo se tarda dos tardes siendo experto en javascript no se porque expresamente indican saber de angular de jquery de nodejs y mil frameworks mas, son todos iguales abstraer, eso lo hemos echo en javascript miles de veces antes de existir los frameworks que principalmente si es cierto que facilitan la vida hasta que te encuentras con algo que te la complica y mucho mas que si lo hubieses echo con javascript puro, siempre nos hemos fabricado nuestros propios frameworks y aprendido funciones de otros desarrolladores, no entiendo como pueden tirar a un buen programador y no hablo de mi por no saber ¿jquery? o angular? por el amor de dios si al que aprenda angular llegará el dia en que le cambien el framework y como no tengas una muy buena base de javascript te va a costar el cambio muchisimo sobre todo como te hayas acostumbrado a cosas como $(') que ademas te da igual saberte todos los metodos porque al final si te encuentras con un problema (que lo encontraras con el paso del tiempo) vas a tener que mirar el codigo de como esta echo jquery (o framework que se utilice) para solventarlo y como no tengas una buena base de javascript por mucho que te sepas el framework de p a pa no vas a saber solventarlo.

Lo dicho frameworks si pero con cautela. he visto proyectos caer por el mero echo de cargar paginas internas de otros servicios (tipo includes de jsp) con una version de jquery incompatible con la que se utilizaba en el servicio, el javascript es javascript y si algo no funciona te creas una funcion de 20 lineas para corregirlo si te encuentras con un caso como el descrito anteriormente puede requerir la sobreescritura de todo el codigo de jquery que hayas escrito para hacerlo compatible y eso no te asegura que lo que programes hoy funcione mañana porque la pagina externa (incluso siendo de la misma compañia) puede llegar y actualizar la version de jquery porque sea la que utilizan por ejemplo en una determinada version de drupal (corazon de drupal jquery version la que sea).

Perdón por el chorizo pero me ha pasado dos veces algo asi de caerse el proyecto por los frameworks incompatibles por un lado y por otro porque el echo de utilizar frameworks rompen con la integracion de sistemas heterogeneos antes era facil coger un fragmento de codigo html por javascript e integrarlo en tu pagina como propio, ahora es impensable porque no se genera html ahora tienes que saber que funcion de un codigo externo a tu proyecto genera esa parte visual para obtenerla (esto es la problematica de los frameworks al menos los UI frameworks).

poner demasiadas capas de abstraccion al final en lugar de mejorar dificulta el desarrollo. han pasado de crear un framework sencillo que te valide datos o te muestre un calendario a crearte la propia pagina y esto es un error porque complica mas que facilitar y ata al programador a hacer las cosas como el framework quiere hacerlas y no de la mejor manera que tu veas, por ejemplo a mi me interesa poder llamar a webservices directamente desde el propio codigo javascript y que este ejecute una funcion que genera el webservices como respuesta sin ni siquiera saber como se va a llamar la funcion javascript que me retorna el servidor eso que me digan como lo hacen con jquery yo me hice una funcion en javascript puro que hace eso con ajax pero las funciones ajax de jquery que he visto hasta el momento no permite hacer esto de una forma sencilla cosa que en javascript orientandolo un poco a objetos es mas facil de hacer que en jquery.

victor eduardo

17/9/2015
AngularJS
Como programador he visto ir y venir de Frameworks, en lo personal me quedo con la potencia de ASP.net con C# y VB.net, y con ayuda de Jquery con Ajax y con el poder de Javascript para algunos casos se pueden hacer aplicaciones web muy potentes en velocidad y robustes.
No tengo nada en contra de simplificar la vida pero creo que en lo personal que angular es un framework mas.
Por otro lado si lo que queremos es una aplicacion que no recargue se puede usar Ajax y con Jquery manipular el dom y listo.
Ya bien si lo que se busca es imitar una aplicacion de smartphone es mejor dejar lo que es del cesar al cesar y programar la aplicacion directa para android o ios

Christian

28/7/2016
¿AngularJS es igual que Smarty?
quisiera saber si AngularJS es igual que Smarty o son dos cosas distintas porque estoy a punto de empezar un proyecto y quiero que mi aplicacion sea desarrollado con lo mejor para su mantenimiento futuro