AngularJS - ¿Que es el Binding? - Binding simple AngularJS - ¿Que es el Binding en AngularJS? - Binding doble AngularJS - Ejemplos de Binding

Hoy seguiremos con nuestro curso de primeros pasos con AngularJS, si por alguna cosa no llegaste a ver nuestras entregas anteriores te dejo aquí el link para que pases.

Veremos binding, binding simple y binding doble en AngularJS.

AngularJS - ¿Que es el Binding?

Antes de romperles el coco con el Binding empecemos a describir que es el Binding

Un binding es una asociación entre dos cosas, por ejemplo un nombre de variable con su contenido, o con su tipo, un método con su código, etc.

Estas asociaciones pueden ser realizadas en las diferentes etapas de vida de un programa.

La mayoría de los sistemas que utilizan templates, unen los datos en una sola dirección: ellos juntan los componentes de template y modelos en una vista. Después de juntarlos, cambian el modelo o una sección relacionada con la vista no son automáticamente reflejadas en la vista. Peor aun, los cambios que el usuario hace en la vista no son reflejados en el modelo. Esto significa que los desarrolladores tienen que escribir el código que se sincroniza constantemente con la vista con el modelo y el modelo con la vista.

AngularJS - ¿Que es el Binding en AngularJS? - Binding doble AngularJS

En AngularJS los templates trabajan diferentes a la forma "tradicional". Primero el template (que es el HTML sin compilar, junto con cualquier tag o directivas adicional) es compilado en el navegador. El paso de compilación produce la vista "viva".

El enlace de datos (Data-binding) en una aplicación que utiliza AngularJS es una sincronizan automática de la información entre los componentes de la vista y el modelo.
La forma en que AngularJS implementa el data-binding te permite tratar el modelo como una fuente de datos verdadera para tu aplicación. La vista es una proyección del modelo en todo momento. Cuando el modelo cambia la vista refleja los cambios y viceversa.

Ya que la vista es solo una proyección del modelo, el controlador esta completamente separado desde la vista sin prestarle atención a esto. Esto hace que las pruebas sean sencillas ya que tus controladores están aislados sin la vista y la relaciones con las dependencias de DOM/Navegador.

Para que entendamos el doble binding, en palabras criollas mas allá de ver los datos del modelo en la vista, también podemos modificarlos en la vista.

AngularJS - Ejemplos de Binding

Un ejemplo de binding "tradicional", seria mostrar un dato en pantalla en cual no lo modificaríamos ejemplo:

{{ Nombre }}

(Binding simple AngularJS) En el código de superior solo mostramos la variable que viene desde el modelo nombre.

Un ejemplo de doble binding seria:

<body ng-app>
<span> Hola {{nombre}}</span>
<form>
¿Cual es tu nombre? <input type="text" ng-model="nombre">
</form>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>

(Binding doble AngularJS)En el código superior estamos no solo mostrando la variable que viene desde el nombre si no que la estamos modificando en vivo, lo cual impactara al modelo. En este caso la información fluye desde el scope hacia la parte visual (igual que en "one-way binding") y también desde la parte visual hacia el scope. Esto es implementado por la directiva ng-Model.

Vas entendiendo?