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.
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>Vas entendiendo?
AngularJS - ¿Que es el Binding? - Binding simple AngularJS - ¿Que es el Binding en AngularJS? - Binding doble AngularJS - Ejemplos de Binding
Reviewed by El lado oscuro de java
on
mayo 18, 2015
Rating:
Reviewed by El lado oscuro de java
on
mayo 18, 2015
Rating:
Excelente explicación!
ResponderEliminarde nada ecerpa! cualquier duda avisame saludos!
EliminarExcelente :) amigo ya conocia todo esto pero no esta de mas leer buena informacion y buenos ejemplos... :D gracias bro
ResponderEliminarDe nada Armando! Gracias por pasar!
EliminarBuenísima, pero buenísima explicación compañero.
EliminarMe estás ayudando mucho ya que estoy empezando con ASngular y todo me suena a chino jeje