Compreendendo a sintaxe "controller as" do AngularJS

Introdução

AngularJS introduziu uma nova sintaxe para definir controladores, "controller as", o que levantou alguns perguntas sobre seu propósito. Este artigo tem como objetivo esclarecer a lógica por trás dessa sintaxe e seus benefícios.

Controller as Syntax

A sintaxe "controller as" permite instanciar um controlador e atribuí-lo a uma variável no atual escopo. Por exemplo:

controller('InvoiceController as invoice')

Este código diz ao Angular para criar uma instância do InvoiceController e armazená-la na variável fatura dentro do escopo atual.

Removendo $scope do Controller

Uma diferença notável com a sintaxe "controller as" é que ela elimina o parâmetro $scope da definição do controlador. Isso permite controladores mais limpos e concisos:

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

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

Atribuindo aliases na visualização

Embora a remoção de $scope do controlador simplifique o código, é necessário que você especifique um alias na visualização:

// With $scope


// With controller as

Objetivos do controlador como sintaxe

A sintaxe "controlador como" foi introduzida principalmente por estes motivos:

• Remoção de $scope: Alguns desenvolvedores preferem evitar a sintaxe $scope, acreditando que ela ofusca a origem das propriedades.
• Clareza da origem da propriedade. : Ao usar aliases na visualização, fica claro quais propriedades pertencem a qual controlador. Isso é especialmente útil ao aninhar controladores.
• Evitação de problemas de regra de ponto: A sintaxe "controlador como" ajuda a evitar problemas com a "regra de ponto" do AngularJS, que pode dificultar o acesso às propriedades dos controladores pais. Ele permite um acesso claro e hierárquico às propriedades do controlador.