Comprensión de la sintaxis del "controlador como" de AngularJS

Introducción

AngularJS introdujo una nueva sintaxis para definir controladores, "controlador como", lo que ha planteado algunos preguntas sobre su propósito. Este artículo tiene como objetivo aclarar el fundamento detrás de esta sintaxis y sus beneficios.

Controlador como sintaxis

La sintaxis "controlador como" le permite crear una instancia de un controlador y asignarlo a una variable en el archivo actual. alcance. Por ejemplo:

controller('InvoiceController as invoice')

Este código le dice a Angular que cree una instancia de InvoiceController y la almacene en la variable de factura dentro del alcance actual.

Eliminar $scope del controlador

Una diferencia notable con la sintaxis "controlador como" es que elimina el parámetro $scope de la definición del controlador. Esto permite controladores más limpios y concisos:

// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

// With controller as
function InvoiceController() {
  // Do something with this.qty
}

Asignación de alias en la vista

Si bien eliminar $scope del controlador simplifica el código, requiere que especifiques un alias en la vista:

// With $scope


// With controller as

Propósitos del controlador como sintaxis

La sintaxis del "controlador como" se introdujo principalmente por estas razones:

• Eliminación de $scope: Algunos desarrolladores prefieren evitar la sintaxis de $scope, creyendo que confunde el origen de las propiedades.
• Claridad del origen de la propiedad : Al usar alias en la vista, queda claro qué propiedades pertenecen a qué controlador. Esto es especialmente útil al anidar controladores.
• Evitar problemas con la regla de puntos: La sintaxis del "controlador como" ayuda a evitar problemas con la "regla de puntos" de AngularJS, que puede dificultar el acceso a las propiedades. de los controladores principales. Permite un acceso claro y jerárquico a las propiedades del controlador.