El dia de hoy les voy a dar una breve introducción sobre [AngularJS](https://angularjs.org), el cual es 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 para el desarrollo Frontend de aplicaciones web ha sido con la libreria de [jQuery](http://jquery.com/), que a mi opinión personal se ha convertido en un conocimiento indispensable el día de hoy tanto para desarrolladores como para diseñadores web. Desafortunadamente el uso de esta librería no te exige implementar ningún tipo de patrón de desarrollo, lo que permite una libertad de generar código, el cual puede llegar a ser difícil de sostener en el tiempo y de bajo nivel de modularidad y escalabilidad.
Para aquellos que quieran implementar un patrón y 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 como 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 modulos se encuentra el de enrutamiento, el cual te permite definir si es una ruta válida, la vista y el controlador a utilizar para dicha ruta.
La conexión entre el controlador y la vista es el $scope, los cuales son como los objetos que se comparten entre la vista (html templates) y los modelos, algo asi como lo que llaman ViewModel en el patrón MVVM, cada vez que actualizas un modelo en un controlador este valor se actualiza en la vista también.
Existen las directivas que encapsulan bloques de código reusables, que pueden incluso tener cierta lógica y usadas dentro del HTML, es decir, extienden HTML, AngularJS ya incluye muchas directivas muy útiles, sin embargo es posible crear 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 un formato a tus variables, por ejemplo le puedes aplicar un formato de fecha a un valor numérico en milisegundo, en este caso AngularJS viene con algunos pero tú puedes crear los tuyos. El otro concepto relacionado es el que usamos con la directiva ng-repeat, esta directiva permite repetir elementos HTML basados en un arreglo y los filtros nos ayudan a definir que elementos se muestran.
AngularJS ofrece módulos para organizar tu código, es una excelente herramienta, de hecho puedes crear módulos e incluirlos dentro de otros, esto muchas veces ayuda a dividir mejor los archivos del proyecto.
Nota: Cuando creas un módulo se hace con la función angular.module, ésta recibe el nombre del módulo y sus dependencias, en caso de que no existan dependencias debes pasar un arreglo vacío, es muy importante este parámetro o tu módulo no funciona.
###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 también los módulos creados por t.
Éste modo de trabajar AngularJS lo hace de una forma muy sencilla y él se encargará de inyectar automáticamente lo que necesita, por ejemplo, cualquier controlador necesita trabajar con $scope, y basta con simplemente agregar la variable $scope como parámetro de nuestra función y AngularJS se encargará de inyectar lo que sea necesario.
###Algunos tips y consejos.
Hay que dejar de pensar en términos de JQuery, AngularJS requiere que cambies un poco tu mentalidad al programar, para empezar dejar de pensar en modificar los valores en el DOM y pensar más en objetos y en los valores de sus atributos.
Una de las desventajas es la documentación, ya que no está pensada para usuarios no iniciados pero hay buenos tutoriales y la comunidad crece cada vez más, así que si no comprendes o quieres ver un ejemplo funcional existen cientos en la web.
A continuación les dejo un ejemplo básico en donde se manipula un objeto, se utilizan filtros y se muestra las bondades básicas que ofrece angular para desarrollar.
###App.js
[prism:javascript]
//archivo app.js
//declarando la aplicacion 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);
};
});
[/prism:javascript]
###HTML
[prism:markup]
[/prism:markup]
¿Han usado AngularJS para alguna aplicación?