Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

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ómetrosSe define en un archivo aparte como marcan las recomendaciones
const app = angular.module('conversorApp', [])

/* Controller */
app.controller('conversorCtrl', () => {
return new Conversor()
})
app.js

class Conversor {

    constructor() {
        this.millas = 0
        this.kilometros = ' <ingrese millas> '
    }   

    convertir() {
        this.kilometros = this.millas * 1.60934
    }

conversor.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="conversorCtrl as conversorCtrl">
index.html

Dentro del body definimos un botón que llama a convertir

<button type="submit" class="btn btn-primary"
        data-ng-click="conversorCtrl.convertir()">Convertir</button>
y un párrafo que muestra la propiedad kilómetros si es válida
<p class="lead"
   data-ng-show="convertirForm.millas.$valid">{{conversorCtrl.kilometros | numero}}</p>

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