Los controladores nos permiten mediante programación implementar la lógica de la presentación en AngularJS. En ellos podemos mantener el código necesario para inicializar una aplicación, gestionar los eventos, etc. Podemos decir que gestionan el flujo de la parte del cliente, lo que sería programación para implementar la funcionalidad asociada a la presentación.
En líneas generales podemos entender que los controladores nos sirven para separar ciertas partes del código de una aplicación y evitar que escribamos Javascript en la vista. Es decir para que el HTML utilizado para la presentación no se mezcle con el Javascript para darle vida.
Un controlador puede ser agregado al DOM mediante la directiva ngController (con el atributo ng-controller en la etiqueta HTML) y a partir de entonces tendremos disponible en esa etiqueta (y todas sus hijas) una serie de datos. Esos datos son los que necesitarás en la vista para hacer la parte de presentación y es lo que asociaríamos en el MVC con el «modelo». En la terminología de Angular al modelo se le llama «scope» y dentro de poco vamos a explicarlo un poco mejor.
A los controladores podemos inyectarles valores o constantes. Como su propio nombre indica, las constantes son las que no van a cambiar a lo largo del uso de la aplicación y los valores son aquellas variables cuyo dato puede cambiar durante la ejecución de una aplicación. También podremos inyectar servicios y factorías, componentes muy parecidos entre sí y que veremos más adelante.
Concepto de Scope
Para poder introducir los controladores debemos detenernos antes en un concepto que se repite hasta la saciedad dentro de la literatura de AngularJS, el «scope». De hecho, tal como dice la documentación de AngularJS, el cometido de un controlador consiste en desempeñar una función constructora capaz de aumentar el Scope.
El «scope» es la pieza más importante del motor de AngularJS y es donde están los datos que se tienen que manejar dentro de la parte de presentación.
El scope es un gran contenedor de datos, que transporta y hace visible la información necesaria para implementar la aplicación, desde el controlador a la vista y desde la vista al controlador. En términos de código el scope no es más que un objeto al que puedes asignar propiedades nuevas, con los datos que necesites, o incluso con funciones (métodos).
Esos datos y esas funciones están visibles tanto en el Javascript de los controladores como en el HTML de las vistas, sin que tengamos que realizar ningún código adicional, pues Angular ya se encarga de ello automáticamente. Además, cuando surgen cambios en los datos se propagan entre los controladores y las vistas automáticamente. Esto se realiza por un mecanismo que llamamos «binding», y en AngularJS también «doble binding» (en español sería enlace), que explicaremos con detalle en futuros artículos.
Así pues, desde los controladores vamos a ser capaces de trabajar con el scope de una manera minuciosa, agregando o modificando información según lo requiera nuestra aplicación.
Todo eso estaba muy bien, sin embargo en términos de programación necesitamos un lugar donde escribir todo el Javascript necesario para implementar la lógica de la aplicación. Integrar el Javascript dentro del HTML no es nada recomendable, por diversos motivos que ya se conocen. Ya dijimos además que dentro del código HTML, no se puede (o mejor dicho, no se debería) hacer cálculos, asignaciones de valores y en resumen código que represente la lógica de nuestras aplicaciones. Todo ello irá en los controladores.
Qué hacer y qué no hacer desde los controladores
Ahora vamos a ver qué tipo de operaciones debemos incluir dentro del código de los controladores. Entre otras cosas y por ahora debes saber:
- Los controladores son adecuados para inicializar el estado del scope para que nuestra aplicación tenga los datos necesarios para comenzar a funcionar y pueda presentar información correcta al usuario en la vista.
- Además es el lugar adecuado para escribir código que añada funcionalidades o comportamientos (métodos, funciones) al scope.
Con el controlador no deberías en ningún caso manipular el DOM de la página, pues los controladores deben de ser agnósticos a cómo está construido el HTML del documento donde van a estar trabajando.
Tampoco son adecuados para formatear la entrada de datos o filtrar la salida, ni intercambiar estados entre distintos controladores. Para hacer todo eso existen dentro de AngularJS diversos componentes especializados.
Cómo es un controlador en AngularJS
El código necesario para crear un controlador en AngularJS tendrá este aspecto:
var app = angular.module("miapp", []);
app.controller("miappCtrl", function(){
var scope = this;
scope.datoScope = "valor";
scope.metodoScope = function(){
scope.datoScope = "otra cosa";
}
});Como puedes comprobar, resulta un tanto complejo. Además tenemos que explicarte cómo se engancha este controlador dentro del código HTML. Para explicar todo eso con calma necesitamos alargarnos bastante, así que lo veremos en el siguiente artículo. Además, te explicaremos varias alternativas de código para trabajar con controladores que se usan habitualmente en AngularJS, con mejores y peores prácticas.
