Tarde o temprano, tenía que probar AngularJS, un framework front-end creado por Google, y del que ya presentamos aquí hace unos cuantos meses. Ya he comentado muchas veces que la parte de front-end no es en la que destaco y que me siento más cómodo en el backend, pero cómo hay que saber un poco de todo …. Hace ya varios meses fue publicada la versión 1.3 de este framework, y está en marcha AngularJS 2.0, ya sobre TypeScript (del que hablaremos también en breve y nos extenderemos bastante!)
Qué es AngularJS
AngularJS es una librería de Javascript que funciona en el lado del cliente que facilita la creación de webs dinámicas o también de aplicaciones web porque añade interactividad al código HTML. Es un framework MVW, o sea, Model View Whatever, que además:
- Te ayuda a tener bien organizado tu código Javascript (cosa que es altamente interesante, pues no todos cumplen con la premisa de ser ordenado!)
- Te ayuda a crear webs de rápida respuesta, y además son responsive (adaptable a distintas resoluciones)
- Es facil de testear
- Se lleva muy bien con jQuery (muy importante para crear Webs de solo una página)
Es deseable que antes de comenzar con AngularJS tengas buenos conocimientos del HTML5, CSS y Javascript, y cómo habeis podido comprobar, desde #manejandodatos hemos escrito mucho sobre estos temas, probando distintas librerias y frameworks, múltiples ejemplos, …. Avisado quedas!!
Lo más importante es que tenemos que incluir en el HTML el código para “disparar” el código Javascript o TypeScript.
La filosofía de AngularJS esta basada en mejorar y extender HTML entendiendo las necesidades tanto de los nuevos como de los ya experimentados desarrolladores.
Antes de seguir, comentar que AngularJS 2.0 estará escrito en TypeScript, por lo que si no te gusta Javascript o lo ves demasiado complejo, invitarte a que conozcas este lenguaje creado por Microsoft.
El Modelo Vista … Whatever
AngularJS se fundamenta en MVW:
- Modelo: son objetos que representan los datos a los cuales puede acceder la aplicación.
- Vista: El donde se interactúa con el usuario, es decir, lo que se ve tal y cómo se muestra (lo que se ve en el navegador).
- Controlador: definen el comportamiento actual de la aplicación (es la lógica de la aplicación) y juega un rol clave conectando los modelos (datos) con las vistas (representación de datos).
AngularJS se ha definido para permitir two-way binding, esto es, unión bi-direccional entre controles y modelos, lo que facilita mucho la vida al desarrollador.
Conceptos básicos de AngularJS
Antes de avanzar, es muy importante conocer los siguientes términos:
- Directivas (directives): son las marcas incrustadas en el código HTML (como tags) para indicarle a Angular el código Javascript que tiene que ejecutar.
- Módulos (modules): son donde se escriben los trozos de nuestra aplicación, lo que hace que el código quede encapsulado, facilitando su mantenimiento, su testeo y su legibilidad (esto es muy importante!). También es donde se definen las dependencias que tiene la aplicación.
- Expresiones (expressions): nos permiten insertar valores dinámicamente en el código HTML. Se usan {{ codigo }} incrustado en el HTML.
- Controles (controllers), son los que definen el comportamiento de la aplicación mediante la definición de funciones y valores. Son los que ponen los datos en el HTML. Por un lado hay que incluir el tag ng-controller en el código HTML, y definir ese controlador en código Javascript.
Las expresiones podrían asemejarse a las plantillas que utilizamos cuando trabajamos con Flask (en Python). Las directivas marcan los contenedores donde tendrá lugar la acción, que se hace en los módulos. Las directivas son las que se encargan de la acción.
Conociendo las directivas
Las directivas son propiedades tags que se agregan al código HTML. Por ejemplo, donde tiene lugar la acción incluirá ng-app (normalmente irá en el tag HTML del HTML), indicando el nombre de la aplicación.
Otras directivas son ng-show y ng-hide que dependen de una propiedad cuyo valor sea del tipo Verdadero-Falso, y que son opuestas: una muestra (la otra oculta) si el valor de la propiedad es True.
Para tareas repatitivas, o sea, los clásicos bucles for … next, se usa la directiva ng-repeat, donde debo incluir item in collection para que el proceso sea repetitivo.
Primera impresión de AngularJS
Sinceramente, la primera vez que conocí de la existencia de AngularJS fue en una charla técnica que asistí en SocialBro, y … me pareció extremadamente complejo, básicamente por el desconocimiento de los conceptos básicos que hoy aquí les he presentado.
Dado que era un framework para front-end, … todavía menos interés por conocerlo, y ha pasado más de un año hasta que he dado con “el curso”, donde explican paso a paso y muy detenidamente cómo trabajar con AngularJS. Cómo ya puse en la única entrada sobre AngularJS (hasta hoy, claro!!), es un framework que hay que tener muy en cuenta porque Google está detrás, y que programar Angular no tiene mucho que ver con Javascript, aunque sea el lenguaje de desarrollo!
Sin duda, ahora que conozco bien VueJS, supongo que no me resultará complicado probar AngularJS, pero es que VueJS va mucho con mi estilo de programación en Javascript, y sinceramente, no tengo demasiados argumentos para cambiar VueJS por AngularJS.
Buen día!