¡Pero bueno! ¿Cuánto hace que no me pasaba por estos lares? ¡Ha comenzado ya el 2016 y con él estrenamos dominio y cambio de look! 😀

Voy a dar pistoletazo de salida a este nuevo año continuando los artículos de AngularJS, que va a ser imprescindible para trabajar con Ionic Framework. En este artículo escribiré sobre los Módulos, Controladores y los Scopes. Al lío.

Estructura de Módulos

Antes de pararnos a ver cada uno de estos tres elementos de manera individual, vamos a tomar un poco de perspectiva y veamos cómo interactúan estos elementos entre ellos.

Como vemos en el esquema, nosotros trabajaremos siempre sobre una vista. Esta vista hará referencia directamente a un módulo, que puede o no, necesitar funciones de otros módulos.

Cada módulo puede tener uno o varios controladores, cada uno de ellos con sus propios scopes y funcionalidades.

De tal manera que la vista, habiendo referenciado a un único módulo, tiene la funcionalidad de todos los módulos requeridos.

Módulos

Un módulo de AngularJS es básicamente lo que su nombre indica, una parte del total de la aplicación con un cometido en particular. Cada página (Vista) va a utilizar un módulo mediante el atributo ng-app.

Un módulo puede funcionar de manera independiente o requerir otros módulos existentes para su funcionamiento.

Para declarar un módulo desde Javascript utlizamos el método angular.module. Este método acepta dos parámetros, el primero es el nombre del módulo y el segundo es un array con los nombres de los módulos requeridos para que este módulo funcione.

En este caso se ha definido un módulo llamado AppGatos que requiere otro módulo llamado AppPerros. Este módulo devuelve una referencia al módulo, que puede ser empleada más adelante.

Si se aplica el método angular.module sobre el mismo nombre de módulo se estaría haciendo referencia al mismo módulo.

Por último para indicarle a una vista que va a utilizar el módulo creado, se utiliza el atributo ng-app

Controladores y Scopes

Todo módulo necesita como mínimo un controlador para funcionar. Un controlador es una parte funcional de un módulo, con sus propias variables, modelos y métodos.

Para declarar un controlador, se utiliza el método controller() del objeto module. Este método acepta como mínimo un parámetro llamado $scope.

El elemento $scope representa el ámbito de variables, modelos y métodos del controlador.

Ya que tanto el método angular.module() como el método .controller() devuelven una referencia al módulo, es posible concatenar métodos.

Para especificar a un contenedor de HTML que va a utilizar un controlador, se utiliza el atributo ng-controller. En este ejemplo se ve todo lo que hemos visto:

Con lo cual el resultado debería ser algo parecido a esto

Hola Rupert ¡miau!
Hola Roy ¡guau!

Con esto ya nos hemos acercado un poco al sistema de módulos y controladores en AngularJS. En el siguiente artículo veremos cómo empezar a añadir funcionalidad a nuestra vista.

¡Hasta la próxima!

Rupert.