Exploración Angular controlador como sintaxis y la variable vm

A menudo, escucho a los desarrolladores preguntar: "¿Qué es la sintaxis de 'controlador como' y en qué se diferencia del enfoque de objetos $scope de la creación de controladores?" En esta publicación, aprenderemos sobre el controlador como sintaxis y lo compararemos con el enfoque de objetos $scope de la creación de controladores.

En AngularJS 1.2, se introdujo la sintaxis "controlador como" e hizo que la creación de código del controlador fuera más legible. Veamos ambos enfoques en acción a continuación:

Creación de un controlador mediante el objeto $scope

Por lo general, creamos un controlador utilizando el objeto $scope como se muestra en la lista a continuación:

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

Arriba estamos creando el AddController con tres variables y un comportamiento, utilizando el controlador de objetos $scope y la vista, que se comunican entre sí. El objeto $scope se utiliza para pasar datos y comportamiento a la vista. Pega la vista y el controlador.

Básicamente, el objeto $scope realiza las siguientes tareas:

1. Pasar datos del controlador a la vista
2. Pasar el comportamiento del controlador a la vista
3. Pega el controlador y la vista juntos
4. El objeto $scope se modifica cuando cambia una vista y una vista se modifica cuando cambian las propiedades del objeto $scope

Adjuntamos propiedades a un objeto $scope para pasar datos y comportamiento a la vista. Antes de usar el objeto $scope en el controlador, debemos pasarlo en la función del controlador como dependencias.

Uso de la sintaxis "Controller as" y vm

Podemos reescribir el controlador anterior usando el controlador como sintaxis y la variable vm como se muestra en la lista a continuación:

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;
    }
});

Básicamente, estamos asignando esto a una variable vm y luego adjuntando una propiedad y un comportamiento a eso.  En la vista podemos acceder al AddVmController usando el controlador como sintaxis. Esto se muestra en el siguiente listado:

<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>

Por supuesto, podemos usar otro nombre que no sea "vm" en el controlador como sintaxis. Bajo el capó, AngularJS crea el objeto $scope y adjunta las propiedades y el comportamiento. Sin embargo, al usar el controlador como sintaxis, el código es muy limpio en el controlador y solo el nombre del alias es visible en la vista.

Estos son algunos pasos para usar el controlador como sintaxis:

1. Cree un controlador sin $scope objeto.
2. Asígnelo a una variable local. Preferí el nombre de la variable como vm, puede elegir cualquier nombre de su elección.
3. Adjunte datos y comportamiento a la variable de máquina virtual.
4. En la vista, asigne un alias al controlador utilizando el controlador como sintaxis.
5. Puede dar cualquier nombre al alias. Prefiero usar vm a menos que no esté trabajando con controladores anidados.

Al crear el controlador, no hay ventajas ni desventajas directas de usar el enfoque de objeto $scope o el controlador como sintaxis. Sin embargo, es puramente una cuestión de elección, el uso del controlador como sintaxis hace que el código JavaScript del controlador sea más legible y evita cualquier problema relacionado con este contexto.

Controladores anidados en $scope enfoque de objetos

Tenemos dos controladores como se muestra en la lista a continuación:

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

La propiedad "age" está dentro de ambos controladores, y en la vista estos dos controladores se pueden anidar como se muestra en la lista a continuación:

<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 ves, para acceder a la propiedad age del controlador padre estamos utilizando el $parent.age. La separación del contexto no es muy clara aquí. Pero usando el controlador como sintaxis, podemos trabajar con controladores anidados de una manera más elegante. Digamos que tenemos controladores como se muestra en la lista a continuación:

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";
 
});

En la vista, estos dos controladores se pueden anidar como se muestra en la lista a continuación:

<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>

En el controlador como sintaxis, tenemos un código más legible y se puede acceder a la propiedad principal usando el nombre de alias del controlador principal en lugar de usar la sintaxis $parent.

Concluiré esta publicación diciendo que es puramente su elección si desea usar el controlador como sintaxis o el objeto $scope. No hay una gran ventaja o desventaja en ninguno de los dos, simplemente que el controlador como sintaxis que tiene control en el contexto es un poco más fácil de trabajar, dada la clara separación en los controladores anidados en la vista.

Espero que encuentres útil este post, ¡gracias por leer y Happy Coding!