AngularJS: Potenciando el Desarrollo de Aplicaciones Web Modernas

El día de hoy les voy a dar una breve introducción sobre AngularJS, un framework MVC de JavaScript mantenido por Google que empecé a utilizar para el desarrollo del Front End de una aplicación web en la cual me encuentro trabajando actualmente.

Mi mayor experiencia en el desarrollo Frontend de aplicaciones web ha sido con la librería de jQuery, que, en mi opinión personal, se ha convertido en un conocimiento indispensable hoy en día tanto para desarrolladores como para diseñadores web. Desafortunadamente, el uso de esta librería no exige implementar ningún tipo de patrón de desarrollo, lo que permite una libertad que puede resultar en un código difícil de mantener en el tiempo y con bajo nivel de modularidad y escalabilidad.

Para aquellos que quieran implementar un patrón y adoptar la ideología de trabajar todo bajo objetos, les recomiendo el uso de AngularJS. Aunque su primera versión es de 2009, se ha hecho muy popular a finales de 2012 y ahora en 2013 está en pleno auge, tanto que ya se habla de una nueva technology stack. Mientras antes era LAMP (Linux + Apache + MySQL + PHP), ahora la tendencia es MEAN (MongoDB/Mongoose + ExpressJS + AngularJS + NodeJS), lo que también se traduce a aplicaciones JavaScript End-to-End.

Conceptos básicos

Una aplicación de AngularJS está formada por controladores, y cada uno de ellos engloba una parte de la aplicación. Angular permite gestionar lo que se conoce como SPA (Aplicaciones de una sola página). Entre sus principales módulos se encuentra el de enrutamiento, que te permite definir si una ruta es válida, así como la vista y el controlador a utilizar para dicha ruta.

La conexión entre el controlador y la vista es el $scope, que actúa como un objeto compartido entre la vista (HTML templates) y los modelos. Es similar a lo que se llama ViewModel en el patrón MVVM. Cada vez que actualizas un modelo en un controlador, este valor se actualiza también en la vista.

Existen directivas que encapsulan bloques de código reutilizables, las cuales pueden tener cierta lógica y usarse dentro del HTML, extendiendo así el HTML. AngularJS ya incluye muchas directivas útiles, aunque también es posible crear las tuyas propias.

Muchas cosas en Angular están relacionadas con una vista, y ésta se puede usar en forma de templates. Lo más común es relacionar controladores y directivas con templates.

También existen los filtros, que se pueden usar para darle formato a tus variables. Por ejemplo, puedes aplicar un formato de fecha a un valor numérico en milisegundos. AngularJS incluye algunos filtros predefinidos, pero también puedes crear los tuyos.

Otro concepto importante es el uso de la directiva ng-repeat, que permite repetir elementos HTML basados en un arreglo, mientras que los filtros nos ayudan a definir qué elementos se muestran.

AngularJS ofrece módulos para organizar tu código, lo que es una excelente herramienta. De hecho, puedes crear módulos e incluirlos dentro de otros, lo que a menudo ayuda a dividir mejor los archivos del proyecto.

Nota: Cuando creas un módulo, se hace con la función angular.module, que recibe el nombre del módulo y sus dependencias. En caso de que no existan dependencias, debes pasar un arreglo vacío. Este parámetro es crucial, de lo contrario, tu módulo no funcionará.

Inyección de dependencias

Todo en AngularJS se maneja usando inyección de dependencias. De hecho, los mismos servicios que vienen con AngularJS deben ser inyectados para poder ser usados, así como los módulos que crees.

Este modo de trabajar hace que AngularJS sea muy sencillo de usar, ya que se encargará de inyectar automáticamente lo que se necesita. Por ejemplo, cualquier controlador que necesite trabajar con $scope solo tiene que agregar la variable $scope como parámetro de la función, y AngularJS se encargará de inyectar lo necesario.

Algunos tips y consejos

• Mentalidad: Hay que dejar de pensar en términos de jQuery. AngularJS requiere cambiar un poco la mentalidad al programar, empezando por dejar de pensar en modificar los valores en el DOM y centrarse más en los objetos y los valores de sus atributos.
• Documentación: Una de las desventajas es que la documentación no está pensada para usuarios no iniciados, aunque hay buenos tutoriales y la comunidad crece cada vez más. Si no comprendes algo o quieres ver un ejemplo funcional, existen cientos de recursos en la web.

A continuación, les dejo un ejemplo básico en el que se manipula un objeto, se utilizan filtros y se muestra algunas de las bondades básicas que ofrece AngularJS para desarrollar.

App.js

// Archivo app.js
// Declarando la aplicación de Angular con sus dependencias
// angular.module('nombre-modulo',['dependencia','libreria'])
var app = angular.module('app', []);
// Declarando un controlador
app.controller('appCtrl', function($scope) {
    // Inicializando los objetos
    $scope.usuarios = [
        {nombre: 'Juan', edad: 29},
        {nombre: 'Henry', edad: 28},
        {nombre: 'Martin', edad: 31}
    ];
    $scope.nuevoUsuario = null;
    // Declarando las funciones del controlador
    $scope.agregarUsuario = function() {
        $scope.usuarios.push($scope.nuevoUsuario);
        $scope.nuevoUsuario = null;
    };
    $scope.eliminarUsuario = function(index) {
        $scope.usuarios.splice(index, 1);
    };
});

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Aplicación AngularJS</title>
</head>
<body ng-controller="appCtrl">
    <h1>Usuarios</h1>
    <ul>
        <li ng-repeat="u in usuarios">
            Nombre: {{ u.nombre }} <br>
            Edad: {{ u.edad }} <br>
            <button ng-click="eliminarUsuario($index)">Eliminar</button>
        </li>
    </ul>
    <h2>Agregar Usuario</h2>
    <input type="text" ng-model="nuevoUsuario.nombre" placeholder="Nombre">
    <input type="number" ng-model="nuevoUsuario.edad" placeholder="Edad">
    <button ng-click="agregarUsuario()">Agregar Usuario</button>
</body>
</html>

¿Han usado AngularJS para alguna aplicación?

Te recomendamos este video