Hablemos de Data Binding, una de las cosas que nos impresiona tanto de usar Angular.
La idea detrás de este concepto, es mantener la información de nuestras vistas actualizada, sin tener que nosotros actualizarla constantemente, simplemente cuando un cambio sucede, toda nuestra vista reacciona a este cambio y actualiza la información presentada.
Esto va desde cosas sencillas como actualizar el valor de una propiedad del componente en la vista, cuando el valor de dicha propiedad cambia, hasta re evaluar la condición de una directiva ngIf para volver a mostrar u ocultar un elemento.
Una de las complejidades de trabajar con interfaces en programación, es precisamente mantener nuestros datos actualizados en todo momento, esto es especialmente importante en entornos como el de las páginas web donde mucha de la información se actualiza de manera asíncrona, lo que significa que normalmente no sabemos cuándo estará disponible o no un dato.
Para solucionar eso, existe un patrón de programación muy popular, el de la programación reactiva.
La programación reactiva es como trabajar con Excel, de algún modo, recuerda que en Excel tu puedes hacer cálculos basados en el valor de una celda, para asignarle información a otra. Lo interesante de esto es que cuando tú actualizas alguna celda que funciona para el cálculo de otra, todas se actualizan a este nuevo cambio, sin que tengas que volver a hacer la operación o tengas que indicar que el cálculo se vuelva a realizar.
De eso se trata la programación reactiva, si tengo una variable X que sirve para calcular Z, actualizar la variable X debería automáticamente actualizar Z.
El binding de datos de Angular, que iremos viendo a detalle en los siguientes vídeos, es una implementación de la programación reactiva, de esta manera como mencioné antes, podemos actualizar los datos de nuestros componentes de manera asíncrona ya sea con eventos de la interfaz o peticiones AJAX y sabemos que nuestra vista reaccionará a estos cambios y actualizará la información que presenta.
Si aún no estás sorprendido o intrigado, espera a que veas el concepto en acción. Continuemos
-
check_circle_outlineMódulo 1 | 7 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 9 clases
Primeros pasos con Angular
expand_more -
check_circle_outlineMódulo 3 | 21 clases
Componentes a detalle
expand_more-
done_all
Clase 1
Expresiones de un template de Angular
-
done_all
Clase 2
Sincronización de datos (Data Binding)
-
done_all
Clase 3
One way binding (interpolación)
-
done_all
Clase 4
Property binding
-
done_all
Clase 5
ngClass
-
done_all
Clase 6
Directivas Estructurales
-
done_all
Clase 7
ngIf
-
done_all
Clase 8
Ejercicio con ngIf y ngClass
-
done_all
Clase 9
ngFor
-
done_all
Clase 10
ngSwitch
-
done_all
Clase 11
Eventos
-
done_all
Clase 12
Nuevo componente para siguientes ejemplos
-
done_all
Clase 13
Payload de un evento con $event
-
done_all
Clase 14
Eventos personalizados (EventEmitter)
-
done_all
Clase 15
Input properties
-
done_all
Clase 16
Variables de referencia del template
-
done_all
Clase 17
Two way binding con ngModel
-
done_all
Clase 18
Pipes
-
done_all
Clase 19
Cómo crear mi propio Pipe
-
done_all
Clase 20
Cómo crear mi propia directiva de atributo
-
done_all
Clase 21
HostListener para eventos
-
-
check_circle_outlineMódulo 4 | 14 clases
Servicios y Observadores
expand_more -
check_circle_outlineMódulo 5 | 7 clases
Animaciones
expand_more -
check_circle_outlineMódulo 6 | 2 clases
Cierre del curso
expand_more