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

Scope

Tipos de alcance

En ES6 tenemos los siguientes tipos de alcance o scope para las variables
  • globales: su práctica es desaconsejada, por lo tanto el lector puede buscar cómo definirlas pero no vamos a explicarlas
  • asociadas a una clase (variables de instancia): se definen en los constructores de la clase mediante el prefijo this
  • locales a un método o closure: se utiliza la definición let o const, dependiendo de que sea una referencia variable o constante respectivamente.

Variables de instancia

Vemos un ejemplo al definir la clase Auto y Dueño:

class Auto {
    constructor(anio, marca, duenio) {
        this.anio = anio
        this.marca = marca
        this.duenios = [duenio]
    }
}

class Duenio {
    constructor(nombre, edad) {
        this.nombre = nombre
        this.edad = edad
    }
}

En el constructor de Auto, recibimos tres parámetros opcionales: el año, la marca y el dueño y generamos tres variables de instancia, disponibles en los métodos siguientes...

    transferir(nuevoDuenio) {
        this.duenios.push(nuevoDuenio)
    }

La referencia duenios comparte el ciclo de vida del objeto contenedor: el Auto.

Variables locales

Las segundas se definen en una función o closure y son accesibles dentro de ese contexto

>>> Auto
    fueBienTratado() {
        return this.duenios.every((duenio) => 
            duenio.trataBienAlAuto(this.marca)
        )
    }

>>> Duenio
    trataBienAlAuto(marca) {
        return marca == "Lamborghini" || this.edad > 40
    }

En el ejemplo, duenio es un parámetro que se puede utilizar en el contexto del closure definido para every. Dicho closure tiene el formato de una arrow function, syntactic sugar de las funciones de ES6.

También podemos definir una variable local, en la clase Auto:

>>> Auto
    haceLaVTV() {
        const antiguedad = 2017 - this.anio
        return antiguedad > 3
    }

Entonces antiguedad es una variable accesible durante la ejecución del método haceLaVTV.

Uso de "controller as syntax" en la vista

Si no utilizamos la sintaxis "Controller As", entender qué juego de variables está en uso puede resultar confuso

angular.module('myApp', [])
  .controller("pedidoController", ["$scope", ($scope) => {
    $scope.total = 200
  }])
  .controller("productoController", ["$scope", ($scope) => {
    $scope.total = 30
  }])

En la vista tenemos la misma directiva {{total}}:

<div ng-app="myApp">
    <div class="widget" ng-controller="pedidoController">
        <p>{{total}}</p>
        <div class="menu" ng-controller="productoController">
            <p>{{total}}</p>
        </div>
    </div>
</div>

Para evitar confusiones, utilizamos la sintaxis "controller as" en la vista:

<div ng-app="myApp">
    <div class="widget" ng-controller="pedidoController as pedidoCtrl">
        <p>{{pedidoCtrl.total}}</p>
        <div class="menu" ng-controller="productoController as productoCtrl">
            <p>{{productoCtrl.total}}</p>
        </div>
    </div>
</div>

Eso necesita que los controllers devuelvan objetos, en lugar de usar al $scope como una gran variable compartida:

angular.module('myApp', [])
.controller("pedidoController", () => ({
    total: 200
  })
)
.controller("productoController", () => ({
    total: 30
}))
Comments