Llevo unos días trasteando con el framework de Javascript AngularJS, libre y mantenido por Google. En su momento no lo incluí en mi pequeña selección de frameworks a ir mirando, pero al final he acabado por dedicarme a trastear con él. De momento tampoco he avanzado mucho, que este mes estoy liado, pero en el futuro os iré comentando.
Comencemos por la primera pregunta ¿para qué vale AngularJs? En fin, la idea de este framework es dinamizar las páginas HTML estáticas vinculando elementos de ese HTML con un modelo de datos que hemos definido en Javascript (a mano, o desde un JSON), permitiendo la interactividad con el usuario. En este caso, aunque se usa un patrón MVC la potencia es que nos permite, mediante bindings {{}} , acceder a la funcionalidad o a los datos. Es cierto que el resultado final lo podemos conseguir de otras muchas formas, pero AngularJS nos ahorrará muchas líneas de código. Algunos lo comparan ya con lo que significó jQuery en su momento para el desarrollo en Javascript.
Para descargaros Angular, que por cierto cada versión tiene un nombre más delirante que la anterior (al momento de escribir esto estamos en la Monochromatic Rainbow, pero mi favorita es Flatulent Propulsion), podéis hacerlo desde la página del proyecto. Y desde la documentación de esa misma página he sacado el código para el primer ejemplo: un Hello World!. Pero claro, como hablamos de un framework que dota de actividad a vuestro CSS será más bien un Hello ______ (loquesea).
Empezamos, como siempre, por el marcado:
<html ng-app>
<head>
<script class="hiddenSpellError" type="text/javascript">// <![CDATA[
src</span>="http://code.angularjs.org/angular-1.0.2.min.js">
// ]]></script>
<script class="hiddenSpellError" type="text/javascript">// <![CDATA[
src</span>="script.js">
// ]]></script>
</head>
<body>
<div ng-controller="HelloCntl">
Your name: <input type="text" value="World" />
<hr/>
Hello {{name}}!
<div>
</body>
</html>
Bien, como puedes ver en la cabecera cargamos como un script la librería de AngularJS (está copiado de un ejemplo antiguo, así que revisa cual es la última versión en el momento en que lo hagas) y debajo cargamos otro script con lo que hayamos programado en Javascript. Puedes ver que al div le hemos asignado un atributo llamado ng-controller. La idea de esto es definir que ese div estará dentro del ámbito del controlador que le indicamos (recuerda, estamos trabajando en un modelo MVC). Luego verás que al input le hemos puesto también un atributo, en ese caso ng-model. Lo mismo, estamos vinculando ese atributo al ámbito del modelo de datos definido, o explicado de forma más simple: el texto que hay ahí será el modelo de datos y se llamará name. Finalmente ves que al lado de Hello hemos incluido {{name}}, esencialmente la idea es que ese elemento entre llaves está relacionado en el elemento del modelo con el mismo nombre (que a su vez está relacionado con el input) ¿qué va a ocurrir? Pues el llamado two-way-data-binding: modificarás el modelo desde la vista y justo al mismo tiempo verás como los datos de la vista se modifican.
Ahora vamos con la parte del javascript, donde definimos el controlador y el modelo:
function HelloCntl($scope) {
$scope.name = 'World';
}
Como puedes ver aquí definimos la función HelloCntl, que fue la que vinculamos en el marcado al div. Abajo simplemente hacemos que, por defecto, el nombre que aparezca sea World (para formar el Hello World). Si bien, si lo modificamos veremos como este cambia.
Finalmente vamos a hablar de otro de los fuertes de AngularJS: el testeo del código. Porque AngularJS nos permite escribir test para comprobar el correcto funcionamiento, sin tener que meternos en absurdas y largas pruebas con algún complemento del navegador para depurar javascript. El teste sería este:
it('should change the binding when user enters text', function() {
expect(binding('name')).toEqual('World');
input('name').enter('angular');
expect(binding('name')).toEqual('angular');
});
Si queréis ver en acción todo el ejemplo antes de testearlo vosotros, en la página de Angular (de donde lo he copiado yo) podréis hacerlo. Además de ver otros, como un juego del tres en raya.
En fin, ya puedes hacerte una idea de la potencia de este AngularJS, más adelante espero escribir más sobre el tema. Yo lo veo como una potente herramienta, sobre todo para el desarrollo de Apps móviles con HTML5 y CSS.
También añadiré que la principal idea es usar AngularJS con Node.js en el lado del servidor, si bien podéis desde ese lado el lenguaje que prefiráis (Ruby, PHP, Python).
DonnierocK 