TUT: AngularJS Parte 2 de 12: Enlace de Datos en AngularJS

Introducción

En la entrada anterior Angular parte 1 de 12: Introducción a AngularJS, hemos visto un material introductorio y pocas directivas con ayuda de un ejemplo de aplicación para entender lo básico de AngularJS. Pienso que estamos ya algo familiarizado con AngularJS y ahora es tiempo de ir más en esto. vamos a proceder con esta parte del tutorial donde nosotros trataremos de entender la característica más básica e impresionante de AngularJS es decir Enlace de Datos(data binding).

Antecedentes

Enlace de datos o Data Binding es la más útil y poderosa característica  entre los existentes y próximas tecnologías de desarrollo de software. Actualmente es un proceso que tiende un  puente de conexión entre  la vista y la lógica de negocios de la aplicación.

Básicamente vemos una manera y dos maneras  de enlace de datos con respecto a aplicaciones AngulasJS. Pero antes vamos a saltar a esta sección para entender algunas cosas acerca de la variable $scope en AngulasJS.

$scopes en el mundo de AngularJS

Primero vamos a tratar de entender $scope. Deje este tema en nuestro post anterior, así que vamos a continuar con esto porque .tiene mucho que ver con aplicaciones AngujarJS. $scope son lo principal en cualquier aplicación AngularJS. Ya que se utilizan en todas las aplicaciones AngularJS. En AngularJS, $scope son esos objetos que contienen funcionalidad y los datos que tienen serán presentados en la vista. $scope en la aplicación representan al modelo de la aplicación, así se puede pensar los scope como un view model.

Scopes son la fuente de para el estado de la aplicación, porque de esto vive binding, podemos confiar en $scope para actualizar  inmediatamente cuando la vista los modifica y podemos confiar en la vista para actualizar cuando $scope cambia.

Funciones de $scope

1. Provee observadores para mirar todos los cambios del modelo.
2. Provee  la habilidad de propagar los cambios del modelo aunque la aplicación esté fuera del sistema a otros componentes asociados.
3. $scope puede ser anidado de tal manera que pueden aislar funcionalidad y propiedades de modelo.
4. Provee un entorno de ejecución dentro del cual las expresiones son evaluadas.

Básico de Data Binding/ enlazar datos unidireccionales

El enlace de datos unidireccional es un enfoque donde un valor es tomado del modelo de datos e insertado a un elemento HTML.  no hay manera de actualizar el modelo de la vista.

AngularJS provee algunos directivas data binding predefinidas los cuales se mencionan a continuación:

ng-bind: Enlaza a la propiedad interna Text de un elemento HTML.

ng-bind-template: Casi similar a la directiva ng-bind pero permitido para múltiples plantillas.

ng-non-bindable: Declara una region de contenido para el cual en enlace de datos será saltado.

ng-bind-html: Crea enlace de datos usando la propiedad interna HTML de un elemento HTML.

ng-model: crea un enlace de datos bidireccional.

Vamos a tratar de entender algunas de las directivas programáticamente, el cual te mostrará cómo puede usarse en nuestra aplicación dentro de un escenario real. He creado un módulo en el post anterior y estoy usando los mismo y también voy a  extender el controlador de la misma.

Ahora este es nuestro archivo app.js

Debajo nuestro maincontroller.js y nombrado como “BookStore”

Y aquí llega nuestra pagina html el cual mostrará en el navegador.

En el ejemplo anterior muestra acerca de 2 directivas los cuales son usados para enlace de datos ng-bind y ng-non-bindable. también veremos ng-model en la siguiente sección cuando hablemos acerca enlace de datos bidireccional  en AngularJS. No he usado ng-bind-template ni ng-bind-html pero vamos a entrar en ello cuando lleguemos a aprender  plantillas en AngularJS.

Este es la salida final  cuando se ejecuta index.html, como se muestra para el estilo de la página se está utilizando BootStrap(http://getbootstrap.com/getting-started/#download).

De la salida podemos ver  que cuando usamos {{ }} la salida es un resultado esperado que AngularJS usa para manejar el enlace de datos al modelo. La segunda sección usamos la directiva ng-bind y en la tercera hemos usado ng-non-bindable, el cual nos permite saltarnos el enlace de datos en esta sección en particular en la que se define. También está la directiva ng-repeat el cual nos ayuda a iterar la colección. La colección que usamos puede ser implementado con la ayuda de algunas llamadas de Web-Api, los cuales proveerán algunos datos JSON que se puede directamente usar en el enlace.

Enlace de datos Bidireccional

En simples términos el enlace de datos bidireccional es cuando el modelo cambia, la vista refleja los cambios y viceversa. El enlace de datos bidireccional en AngularJS son creados con la directiva ng-model. Prácticamente, enlace de datos bidireccional puede ser aplicado solo a esos elementos que permite al usuario proveer un valor de datos, lo que significa la entrada de datos a través de elementos de formularios como input, textarea, y elementos seleccionado.

Vamos ahora a tratar de ver como podemos implementar el enlace de datos bidireccional en cualquier aplicación. Agregamos una nueva página html y agregamos el siguiente código:

Ahora extendemos nuestro controlador e implementamos algunas funcionalidades para mostrar los item en la tabla y permitir a los usuarios editar, guardar y eliminar los datos en la tabla. Desde esta aplicación no estamos usando ni un Web Service ni un Web API para enviar datos al servidor a través de alguna solicitud Ajax. A medida que avanzamos vamos a tratar de entender la aplicación que usa algunas Web API para enviar datos al servidor.

La salida en el explorador seria:

Ahora vamos agregar una función, a nuestro controlador “BookStore”, para agregar una colección de Items de la vista a nuestra tabla.

Para usar la funcionalidad necesitamos algo para el ingreso del usuario. Así que añadiremos etiquetas html para el ingreso. como podemos ver  se ha usado ng-model=”item.ISBN” y esto actualmente provee enlace de datos bidireccional para facilitarnos.

Ahora estamos listos con el código. es tiempo de ver el final de nuestra aplicación. Aqui esta el resultado de realizar operaciones CRUD( Create, Read, Update and Delete).

Nota: No hay validaciones o chequeo de errores. Esto lo he hecho intencionalmente porque esto lo vamos a ver cuando revisemos validaciones en en un post más adelante en AngularJS.

Puntos Interesantes

Ahora conocemos el enfoque de enlace de datos o Data Binding que AngularJS sigue y hemos visto en la aplicación de ejemplo que podemos implementar en la aplicación para la realizacion de operaciones basica CRUD.

En las siguientes parte de la serie de tutoriales podremos estar aprendiendo:

• Parte 3 de 12: Eventos en Angular
• Parte 4 de 12: Validación
• Parte 5 de 12: Serialización
• Parte 6 de 12: Plantillas
• Parte 7 de 12: Módulos
• Parte 8 de 12: Inyección de Dependencias
• Parte 9 de 12: Testeo Automatizado
• Parte 10 de 12: SPA Ruteo/Historia
• Parte 11 de 12: Directivas-una característica que AngularJS provee
• Parte 12 de 12: Integración CSS para crear interfaces amigables.