Explorando Angular controlador como sintaxe e a variável vm

Muitas vezes, ouço os desenvolvedores perguntarem "Qual é a sintaxe 'controlador como' e como ela é diferente da abordagem de objeto $scope da criação do controlador?" Neste post, aprenderemos sobre o controlador como sintaxe e a compararemos com a abordagem de objeto $scope da criação do controlador.

No AngularJS 1.2, a sintaxe "controlador como" foi introduzida e tornou a criação do código do controlador mais legível. Vamos ver as duas abordagens em ação abaixo:

Criando um controlador usando o objeto $scope

Normalmente, criamos um controlador usando o objeto $scope, conforme mostrado na listagem abaixo:

myApp.controller("AddController", function ($scope) {
    $scope.number1;
    $scope.number2;
    $scope.result;
    $scope.add = function () {
        $scope.result = $scope.number1 + $scope.number2;
    }
});

Acima, estamos criando o AddController com três variáveis e um comportamento, usando o $scope controlador de objeto e view, que conversam entre si. O objeto $scope é usado para passar dados e comportamento para a exibição. Ele cola a visualização e o controlador.

Essencialmente, o objeto $scope executa as seguintes tarefas:

1. Passar dados do controlador para a exibição
2. Passar o comportamento do controlador para a exibição
3. Cola o controlador e a visualização juntos
4. O objeto $scope é modificado quando uma exibição é alterada e uma exibição é modificada quando as propriedades do objeto $scope são alteradas

Anexamos propriedades a um objeto $scope para passar dados e comportamento para a visualização. Antes de usar o objeto $scope no controlador, precisamos passá-lo na função do controlador como dependências.

Usando a sintaxe "Controller as" e vm

Podemos reescrever o controlador acima usando o controlador como sintaxe e a variável vm, conforme mostrado na listagem abaixo:

myApp.controller("AddVMController", function () {
    var vm = this;
    vm.number1 = undefined;
    vm.number2=undefined;
    vm.result =undefined;
    vm.add = function () {
        vm.result = vm.number1 + vm.number2;
    }
});

Essencialmente, estamos atribuindo isso a uma variável vm e, em seguida, anexando uma propriedade e um comportamento a ela.  Na exibição, podemos acessar o AddVmController usando o controlador como sintaxe. Isso é mostrado na lista abaixo:

<div ng-controller="AddVMController as vm">
            <input ng-model="vm.number1" type="number" />
            <input ng-model="vm.number2" type="number" />
            <button class="btn btn-default" ng-click="vm.add()">Add</button>
            <h3>{{vm.result}}</h3>
  </div>

Claro que podemos usar outro nome além de "vm" no controlador como sintaxe. Nos bastidores, o AngularJS cria o objeto $scope e anexa as propriedades e o comportamento. No entanto, usando o controlador como sintaxe, o código é muito limpo no controlador e apenas o nome do alias é visível na exibição.

Aqui estão algumas etapas para usar o controlador como sintaxe:

1. Crie um controlador sem $scope objeto.
2. Atribua isso a uma variável local. Eu preferi o nome da variável como vm, você pode escolher qualquer nome de sua preferência.
3. Anexe dados e comportamento à variável vm.
4. Na exibição, forneça um alias ao controlador usando o controlador como sintaxe.
5. Você pode dar qualquer nome ao alias. Prefiro usar vm, a menos que não esteja trabalhando com controladores aninhados.

Na criação do controlador, não há vantagens ou desvantagens diretas de usar a abordagem de objeto $scope ou o controlador como sintaxe. É puramente uma questão de escolha, no entanto, usar o controlador como sintaxe torna o código JavaScript do controlador mais legível e evita problemas relacionados a esse contexto.

Controladores aninhados na abordagem $scope objeto

Temos dois controladores como mostrado na listagem abaixo:

myApp.controller("ParentController", function ($scope) {
    $scope.name = "DJ";
    $scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
    $scope.age = 22;
    $scope.country = "India";
});

A propriedade "age" está dentro de ambos os controladores e, na exibição, esses dois controladores podem ser aninhados, conforme mostrado na listagem abaixo:

<div ng-controller="ParentController">
    <h2>Name :{{name}}</h2>
    <h3>Age:{{age}}</h3>

    <div ng-controller="ChildController">
        <h2>Parent Name :{{name}}</h2>
        <h3>Parent Age:{{$parent.age}}</h3>
        <h3>Child Age:{{age}}</h3>
        <h3>Country:{{country}}</h3>
    </div>
</div>

Como você pode ver, para acessar a propriedade age do controlador pai, estamos usando o $parent.age. A separação de contexto não é muito clara aqui. Mas usando o controlador como sintaxe, podemos trabalhar com controladores aninhados de uma maneira mais elegante. Digamos que temos controladores, conforme mostrado na listagem abaixo:

myApp.controller("ParentVMController", function () {
    var vm = this;
    vm.name = "DJ";
    vm.age = 32;
});
myApp.controller("ChildVMController", function () {
    var vm = this;
    vm.age = 22;
    vm.country = "India";
 
});

Na exibição, esses dois controladores podem ser aninhados, conforme mostrado na listagem abaixo:

<div ng-controller="ParentVMController as parent">
    <h2>Name :{{parent.name}}</h2>
    <h3>Age:{{parent.age}}</h3>

    <div ng-controller="ChildVMController as child">
        <h2>Parent Name :{{parent.name}}</h2>
        <h3>Parent Age:{{parent.age}}</h3>
        <h3>Child Age:{{child.age}}</h3>
        <h3>Country:{{child.country}}</h3>
    </div>
</div>

Na sintaxe do controlador como, temos um código mais legível e a propriedade pai pode ser acessada usando o nome do alias do controlador pai em vez de usar a sintaxe $parent.

Concluirei este post dizendo que é puramente sua escolha se você deseja usar o controlador como sintaxe ou o objeto $scope. Não há grande vantagem ou desvantagem em nenhum dos dois, simplesmente que o controlador como sintaxe que você tem controle sobre o contexto é um pouco mais fácil de trabalhar, dada a separação clara nos controladores aninhados na exibição.

Espero que você ache este post útil - obrigado por ler e Happy Coding!