Vinculación de datos

La vinculación de datos en AngularJS es una de las características más poderosas de este framework. Permite sincronizar automáticamente los datos entre el modelo (almacenado en el $scope del controlador) y la vista (HTML), de modo que cualquier cambio en uno se refleje automáticamente en el otro. Aquí te muestro cómo funciona la vinculación de datos en AngularJS:

1. Unidireccional (Modelo a Vista):

   En la vinculación de datos unidireccional, los datos se propagan desde el modelo (controlador) a la vista (HTML). Por ejemplo:

   // Controlador
   angular.module('miApp', [])
     .controller('MiControlador', function($scope) {
       $scope.mensaje = 'Hola desde el controlador!';
     });
   <!-- Vista -->
   <div ng-controller="MiControlador">
     {{ mensaje }} <!-- El mensaje se muestra en la vista -->
   </div>

   En este caso, cualquier cambio en $scope.mensaje en el controlador se reflejará automáticamente en la vista.

2. Unidireccional (Vista a Modelo):

   También puedes vincular datos desde la vista al modelo utilizando directivas de entrada, como ng-model. Por ejemplo:

   // Controlador
   angular.module('miApp', [])
     .controller('MiControlador', function($scope) {
       $scope.nombre = ''; // Inicializa una variable en el modelo
     });
   <!-- Vista -->
   <div ng-controller="MiControlador">
     <input type="text" ng-model="nombre"> <!-- Los cambios en el input se reflejan en el modelo -->
     <p>Hola, {{ nombre }}!</p> <!-- Muestra el valor del input -->
   </div>

   En este caso, cualquier cambio en el input de texto se actualizará automáticamente en la variable $scope.nombre del controlador.

3. Bidireccional:

   AngularJS también permite la vinculación de datos bidireccional, donde los cambios en el modelo se reflejan en la vista y viceversa. Esto se logra utilizando la directiva ng-model. Por ejemplo:

   // Controlador
   angular.module('miApp', [])
     .controller('MiControlador', function($scope) {
       $scope.valor = 'Inicial'; // Inicializa una variable en el modelo
     });
   <!-- Vista -->
   <div ng-controller="MiControlador">
     <input type="text" ng-model="valor"> <!-- Cambios en el input se reflejan en el modelo -->
     <p>{{ valor }}</p> <!-- Cambios en el modelo se reflejan en el texto -->
   </div>

   En este caso, cualquier cambio en el input de texto se reflejará automáticamente en la variable $scope.valor del controlador, y cualquier cambio en $scope.valor se actualizará automáticamente en la vista.

La vinculación de datos en AngularJS simplifica enormemente el desarrollo de aplicaciones web al eliminar la necesidad de manejar manualmente la sincronización de datos entre el modelo y la vista. Esto hace que las aplicaciones sean más fáciles de entender, mantener y depurar.