De momento está bien de teoría. Después de aprender qué son los controladores y qué funciones desempeñan en Angular, estamos seguros que querrás poner manos en el código y lo vamos a hacer con un nuevo ejercicio que, aun siendo sencillo, nos facilite experimentar con un primer controlador.

Además, estudiaremos diversas variantes que nos pueden aportar algunas ventajas, inconvenientes y resolver ciertas situaciones. Las veremos todas con ejemplos y las explicaciones sobre qué diferencias nos encontramos.

El proceso de crear y usar un controlador es sencillo, pero no inmediato, requiere un pequeño guión de tareas que paso a detallar para que tengas claro de antemano lo que vamos a hacer. Es más largo expresarlo con texto que con código y aunque al principio parezca bastante, en seguida lo harás mecánicamente y no tendrás que pensar mucho para ello. Básicamente para poner nuestro primer controlador en marcha necesitamos:

• Crear un módulo (module de AngularJS)
  
• Mediante el método controller() de nuestro "module", asignarle una función constructora que Angular usará cuando deba crear nuestro controlador
  
• Usar la directiva ng-controller, asignándole el nombre de nuestro controlador, en el HTML. Colocaremos esa directiva en el pedazo del DOM donde queremos tener acceso al scope.

En este punto queremos aclarar que existen diversas alternativas de código para crear el Javascript necesario para definir nuestro controlador. Vamos a comenzar por una que es muy habitual de ver en diversos tutoriales y documentación, aunque no es la mejor. Todas las formas funcionan, pero hay algunas que en determinadas circunstacias pueden ser mejores. Luego las estudiaremos y explicaremos el motivo por el que serían todavía más recomendadas para crear tus controladores.

OPCIÓN 1)

angular
  .module('pruebaApp', [])
  .controller('pruebaAppCtrl', function($scope){
    $scope.algo = "Hola Angular, usando controller más simple";  
  });

De esta manera estoy creando un módulo llamado "pruebaApp". Sobre el módulo invoco el método controller() y creo un controlador llamado "pruebaAppCtrl". En la creación del controlador verás que se especifica una función, ella es la que hace de constructora de nuestro controlador. A esa función le llega como parámetro $scope que es el nombre de variable donde tendrás una referencia al conodido "scope" que almacena los datos de mi modelo.

Dentro de la función del controlador hacemos poca cosa. De momento simplemente le asigno un valor a un atributo de $scope. He creado un atributo nuevo en el objeto $scope que no existía y que se llama "algo" ($scope.algo). Con ello simplemente le estoy agregando un dato al modelo. Gracias al "binding" o enlace, ese dato luego lo podré utilizar en el HTML.

De hecho, queremos ya echarle un vistazo al HTML que podríamos tener para usar este controller.

<div ng-app="pruebaApp" ng-controller="pruebaAppCtrl">
  {{algo}}
</div>

Como puedes ver, en el HTML indicamos el nombre del módulo que se usará para implementar esta aplicación (que corresponde con el nombre del módulo creado en el código Javascript) y el nombre del controlador (también corresponde con el nombre del controller que he creado con Javascript). Además en el HTML podrás encontrar la expresión {{algo}} que lo que hace es volcar como texto en la página el contenido de la variable "algo". Esa variable pertenece al scope y la hemos inicializado en el código del controller.

El resultado es que en nuestra página aparecerá el texto "Hola Angular, usando controller", que es el valor que fue asignado en el atributo "algo" de $scope. De momento la aplicación no es nada espectacular pero lo interesante es ver cómo se usa un controller.

VARIANTE OPCIÓN 1)

Existe una variante de este mismo ejemplo, al crear el controlador, que deja nuestro código un poco más complejo, pero que ayuda en determinadas circunstancias. La clave aquí son los minimificadores de Javascript (o minificadores), que sabemos que reducen el peso en bytes del código compactándolo de distintas maneras. Si los usas, el código que hemos visto en el anterior apartado puede dar errores una vez minimificado.

El problema qte puede surgir está en la inyección del $scope, que se recibe como parámetro en la función constructora del controller.

function($scope)

Angular, al ver el nombre del parámetro "$scope", sabe perfectamente lo que tiene que inyectar en ese lugar. Sin embargo, una vez minimificado, el nombre de esa variable "$scope" puede haberse cambiado por algo como "a", lo que haría imposible que el framework sepa lo que debe de enviar. Eso se soluciona con un código como el siguiente.

angular
  .module('pruebaApp', [])
  .controller('pruebaAppCtrl', ['$scope', function($scope){
    $scope.algo = "Hola Angular, usando controller!";  
  }]);

En este caso, en la llamada al método que crea el controlador, controller(), ves un array que nos sirve para inyectar las dependencias.

['$scope', function($scope){ ... }]

En este caso le estamos diciendo que el primer parámetro del controlador es '$scope', gracias al primer elemento del array. Como las cadenas como '$scope' no se alteran después de la minimización, podemos estar seguros que le llegarán perfectamente a Angular. Entonces sabrá que en el primer parámetro de la función constructora del controlador esperas recibir el $scope'. Esto será así independientemente del nombre de la variable que se uses como primer parámetro.

Es cierto que la sintaxis parece un poco rebuscada, pero poco a poco te acostumbrarás, pues realmente es muy repetitivo.

OPCIÓN 2)

He colocado como primera opción porque es más habitual en tutoriales y puedes haberla leído en la documentación del framework o en diversas presentaciones por ahí. Sin embargo, es más recomendada esta segunda alternativa que os presentamos a continuación.

angular
  .module('pruebaApp', [])
  .controller("pruebaAppCtrl", function(){
    this.algo = "Esto funciona! Gracias Angular";
  });

Como estarás observando, el controlador es prácticamente igual. Ahora la diferencia es que no estás inyectando el $scope. Ahora el contexto donde adjuntar las variables que queremos enviar a la vista no lo sacamos de $scope, sino que lo obtenemos directamente a través de la variable "this".

En este caso, para cargar un nuevo dato al modelo, llamado "algo", lo hacemos a través de this.algo y le asignamos aquello que deseemos.

Esta alternativa implica algún cambio en el HTML con respecto a lo que vimos anteriormente.

<div ng-app="pruebaApp" ng-controller="pruebaAppCtrl as vm">
  {{vm.algo}}
</div>

El cambio fundamental lo encuentras al declarar la directiva, en el valor del atributo ng-controller.

ng-controller="pruebaAppCtrl as vm"

En este caso estamos diciéndole no solo el nombre del controlador, sino además estamos informando que dentro de ese DOM el scope será conocido con la variable "vm". Por tanto, ahora cuando deseemos acceder a datos de ese modelo que nos ofrece el controlador debemos indicar el nombre del scope.

{{vm.algo}}

Ahora que hemos visto estas dos opciones y dado que nos recomiendan la segunda, la utilizaremos de manera preferente a lo largo del manual. De momento esto es todo, esperamos que con lo que sabes ya tengas ideas para ir probando nuevos ejemplos. Nosotros en el siguiente artículo crearemos un controlador que será un poco más complejo y útil.

Acabamos este artículo con un vídeo de nuestro canal de Youtube donde encontrarás más información sobre la creación de controladores en AngularJS. Veremos diferentes variantes del código realizadas en directo. También encontrarás explicaciones ofrecidas por varios compañeros expertos en este framework Javascript.