Introducción a Angular.js

Angular.js es uno de los frameworks de referencia en JavaScript, pero trabajar con él no es sencillo ya que implica un cambio importante en el paradigma de programación. Una de las características principales del framework es su capacidad para organizar el código de JavaScript, habitualmente caótico.

Angular.js Conceptos

Con Angular es obligatorio entender algunos conceptos.

Directiva : El concepto de directiva es uno de los más complicados y hace referencia a un conjunto de atributos a nivel de HTML que Angular define como un DSL (Domain Specific Language). Esto permite extender las capacidades que HTML. Ejemplos de estas directivas son : ng-click, ng-repeat, ng-app, ng-controller etc. Cada una aporta su propia funcionalidad.
Controller : Se trata del concepto clásico de controlador que realiza tareas de comunicación entre la vista y el modelo.
Scope : El scope es un objeto que comparte información entre la vista y el controlador, permitiendo al controlador asignar nuevos objetos y funciones a la vista.
View : Este es el concepto más sencillo de entender ya que hace referencia a un conjunto de etiquetas HTML que conforman la vista que se muestra al usuario. Angular usa su propio motor de plantillas para gestionarlas.
Servicios: Los servicios se encargan de la parte del modelo y permiten diseñar un API consistente para trabajar con el servidor.
Filtros: Los filtros apoyan a la vista a la hora de presentar los datos realizando transformaciones sobre ellos.

Creando un Ejemplo

Lo mejor muchas veces para entender los conceptos es ver un ejemplo de código:

<html ng-app="miaplicacion">
<head>

</head>
<body ng-controller="controladorFactura">

</body>
</html>

La aplicación define un servicio que devuelve un conjunto de facturas. Esta es la parte de Angular que pertenece al modelo.

El siguiente paso es construir un controlador que usa el sistema de inyección de dependencias para hacer uso del servicioFacturas y del servicio de $scope. Este último es un servicio que sirve para pasar información del controlador a la vista.

Una vez construido el controlador la vista quedará delimitada por el uso de la directiva ng-controller, en este caso la vista incluye a todo el body. Dentro del body existe una directiva ng-repeat que se encargará de iterar entre los diferentes items de la lista. Ademas al imprimir el concepto usará un filtro para imprimir el texto en mayúsculas. El resultado al cargar la página en el navegador es el siguiente.