Material‎ > ‎Software‎ > ‎Angular JS‎ > ‎

AngularJS - Controllers

Objetivos

El controller de AngularJS tiene como misión
  • adaptar la información para mostrarla a la vista, a partir de objetos en javascript
  • definir funciones dentro de un contexto (scope) propio del HTML, generalmente un div o cualquier contenedor
  • pedir que otros componentes traigan o lleven la información a los diferentes orígenes de datos
No es recomendable que el controller
  • tome decisiones propias de la vista: layouts, estilos o manejo del DOM, eso queda para la vista o bien las directivas/componentes
  • ni tome decisiones de negocio, esto se debe delegar al modelo

Buenas prácticas


Que es básicamente utilizar la sintaxis "Controller As", explicada más abajo.

Ejemplo breve

Vamos a tomar como ejemplo el Conversor de millas a kilómetros.

Controller

El controller publica un objeto Conversor como modelo que tiene

  • una propiedad millas
  • una propiedad kilómetros
  • una función isValid() que dice si la conversión de kilómetros a millas es posible
  • y otra función que convierte de millas a kilómetros
Se define en un archivo aparte como marcan las recomendaciones

var app = angular.module('conversorApp', []);
app.controller('ConversorController', function() {
    return new Conversor();
});
function Conversor() {
    this.millas = NaN;
    this.kilometros = NaN;
    this.convertir = function() {
        this.kilometros = this.millas * 1.60934;
    };
    this.isValid = function(form) {
        return !isNaN(this.kilometros);
    };
}
Archivo app.js

HTML

A su vez en nuestro html se establece la asociación entre un tag contenedor y el controller definido anteriormente:
<body ng-controller="ConversorController as conversor">
Dentro del body definimos un botón que llama a convertir
<button 
   type="submit" 
   ng-click="conversor.convertir()" 
   class="btn btn-primary">
   Convertir
</button>
y un contenedor que muestra la propiedad kilómetros si es válida
<span id="kilometros" class="lead" ng-show="conversor.isValid()">
   {{conversor.kilometros | number:2}} kilometros
</span>
Como vemos al estudiar los controllers es inevitable terminar hablando de los bindings de la vista con propiedades/métodos de su modelo.

Controller As Syntax

Fíjense que el controller se define con un prefijo conversor, lo que se conoce como "Controller As Syntax". Esto nos permite que cuando varios controllers estén dentro de un mismo contenedor no se mezclen las variables: si más de un controller define una variable kilómetros en su scope, eso puede dar lugar a confusiones respecto a qué variable se está utilizando (y a efectos colaterales). Lo mismo puede ocurrir con las funciones que tengan la misma firma en dos controllers distintos pero que comparten el mismo scope (un ejemplo sería tener un div que use un controller dentro de otro div que use otro controller).

Links relacionados


Comments