Un controlador en AngularJS no es más que una función constructor la cual es instanciada por el framework cuando se encuentra la directiva “ng-controller” en el código HTML. La tarea principal de un controlador es aumentar el Scope añadiendo modelos, propiedades y funciones a él, y que son subsecuentemente accedidos en la vista.
Definiendo un controlador
Lo primero que dembemos realizar es definir nuestro controlador en el cual vamos a pasar la fecha actual, la hora y un cadena de texto a la vista a traves del Scope:
1 2 3 4 5 | angular.module('miAplicacion',[]).controller('HolaControlador' ,function($scope) { $scope.now=new Date(); //definimos la fecha $scope.saludo='Hello'; // definimos una cadena }); |
Recordemos 2 cosas:
- Definir el módulo al cual pertencerá dicho controlador (ver Módulos). Esto lo podemos realizar enlazando las llamadas ( al estilo Ruby)
- La función controller() toma 2 argumentos:
- El nombre del controlador.
- Una función constructor que será llamada cuando la directiva ng-controller sea encontrada en el HTML.
Otra cosa que puedes notar es el argumento $scope en el constructor del controlador. Cuando declaramos esta variable, estamos diciendole a nuestro controlador que dependerá del objeto $scope. Os suena esto?. Si es inyección de dependencias!. Cada vez que AngularJS encuentra un ng-controller=”nombre_controlador” en HTML creará un nuevo scope para dicho controlador y pasará esta dependencia como argumento en el constructor mientras se instancia el controlador. Pensemos en el $scope como el modelo que utiliza el controlador, éste sólo es válido para el elemento HTML donde llamamos a ng-controller.
Múltiples Dependencias
Una de las ventajas de AngularJS, es que podemos incluir muchas dependencias simplemente declarandolas como parámetros en la función constructor del mismo. En el siguiente ejemplo nos muestra como inyenctar 2 dependencias :
1 2 3 | angular.module('miAplicacion',[]).controller('ControladorConDependencias', function($rootScope,servicioCustomizado){ //usamos las dependencias aqui }); |
Como de seguro te habrás dado cuenta aparte de $scope, cada aplicación AngularJS tiene un $rootScope. A diferencia de $scope el $rootScope es el scope general de la aplicación (no del controlador), es decir está disponible en el elemento HTML donde definamos la directiva ng-app. Otro de los
Diferencias entre $scope y $rootScope
Si aún no tenemos clara las diferencias entre $scope y $rootScope fijemonos en el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="w3-code notranslate"><body ng-app="miAplicacion"> <p>Variable leida desde el $rootScope:</p> <h1>{{color}}</h1> <div ng-controller="MiControlador"> <p>Variable leida desde el $scope:</p> <h1>{{color}}</h1> </div> <p>Variable leida desde el $rootScope de nuevo:</p> <h1>{{color}}</h1> <script> var app = angular.module('miAplicacion', []); app.run(function($rootScope) { $rootScope.color = 'azul'; }); app.controller('MiControlador', function($scope) { $scope.color = "rojo"; }); </script> </body></div> |
AngularJS utiliza los prefijos $ para sus propios objetos y servicios por convención, por lo que no deberias (o no es aconsejable) no iniciar nuestros propios objetos y servicios con $.
Otro punto a destacar son las nuevas marcas que se introducen en el código HTML, hablamos de {{}}. Con estas expresiones podemos acceder a las variables del scope y mostrarlas en la plantilla HTML. Lo que sea que tu escribas dentro de dicha expresión AngularJS lo intentará resolver contra el scope del controlador.
Añadiendo lógica al Controlador
Aparte de manejar las entradas del usuario y degfinir el scope de modelos, un controlador puede agregar funciones nuevas al $scope. Éstas funciones podrán realizar cualquier tipo de lógica e incluso interactuar con servicios que encapsulan informacion de negocio de la aplicación. Veamos como hacerlo:
1 2 3 4 5 6 7 8 | angular.module('miAplicacion', []).controller('MiControlador', function($scope) { $scope.ahora = new Date(); $scope.holas = ['Hola', 'Hallo, 'Bonjour', 'Hello', 'Ciao']; $scope.saludo = $scope.holas[2]; $scope.getRandomHola = function() { $scope.saludo = $scope.holas[parseInt((Math.random()* $scope.holas.length))]; } }); |
Si os fijáis, hemos añadido al scope un array de Strings llamado “holas”, que representa el saludo en varios idiomas. También hemos creado una función nueva llamada “getRandomHola”, que selecciona de forma aleatoria el hola a mostrar, como lo hemos asignado a una variable llamada saludo para mostrarla sólo nos bastará con incluirla dentro de la expresión {{}}.
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html ng-app="miAplicacion"> <body ng-controller="Micontrolador"> {{saludo}} Usuario! <br/> <button ng-click="getRandomHola()">Saludame!</button> </body> </html> |
Que cosas debe y no debe hacer un Controlador
Que NO hacer en un controlador
- No debes manipular el DOM. Esto se debe realizar en las directivas.
- No aplicar formato a los valores. Para esto ya existen los filtros.
- DRY, la premisa de ruby se puede aplicar aqui. Recuerda que AngularJS inyecta las dependencias, por lo que si tienes un código que se pueda repetir en multiples controladores, lo mejor es encapsularlo en un servicio e inyectarlo en el constructor de tu Controlador.
Que SI hacer en un controlador:
- Definir los estados iniciales del scope.
- Definir las funciones del scope.
Agregando funciones y propiedades de instancia al controlador
Lo normal para un controlador es poder definir propiedades y funciones al scope, pero también podemos crear funciones y propiedades de instancia, veamos como hacerlo modificando nuestro ejemplo:
1 2 3 4 5 6 7 8 | angular.module('miAplicacion', []).controller('MiControlador', function($scope) { this.ahora= new Date(); this.hola= ['Hola', 'Hallo, 'Bonjour', 'Hello', 'Ciao']; this.saludo= this.holas[2]; this.getRandomHola = function() { this.saludo = this.holas[parseInt((Math.random() *this.holas.length))]; } }); |
Hemos sustituido la expresion $scope por “this”, por último nos valemos de un pequeño “truco” en la vista:
1 2 3 4 5 6 7 8 9 10 |
La expresión “MiControlador as saludoControlador” es la que nos hace la magia, definiendo la instancia de MiControlador en el scope bajo el nombre de saludoControlador.
Te Puede Interesar:
AngularJs, o el arte de extender HTML para desarrollar Single-Page Applications
Conoce los módulos en AngularJS