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.

Leer mas

TUT: Construyendo un SPA usando AngularJS con ASP .NET Web API - Parte 1

Esta primera parte de la serie Construyendo una SPA(Single Page App) usando AngularJS. Las partes desarrolladas son tres: 

• Construyendo una SPA usando AngularJs - Parte 1 ( este post) 
• Construyendo una SPA usando AngularJs - Parte 2 
• Construyendo una SPA usando AngularJs - Parte 3 

En este post haremos pasos iniciales para conocer que se está haciendo y entender algunos pasos básicos los cuales son fundamentales para completar nuestra aplicación.

Paso 1: Descargando bibliotecas de terceros
Para empezar necesitamos descargar todas la librerías necesarias para nuestra aplicación, podemos usar el administrador de paquetes Nuget, pero prefiero descargarlos manualmente para conocer cuales son los archivos realmente necesario.

AngularJS: Para obtener AngularJS vamos a visitar http://angularJS.org, en donde descargamos el Build Zip, usaremos la versión 1.3.x
Angular Bootstrap UI: Necesitamos descargar el build zip para Boostrap http://angular-ui.github.io/bootstrap/. Usaremos la versión 0.13.0.
Toaster: Es una Libreria JavaScript de no bloqueo de notificación, el cual se usará para mostrar notificaciones para los usuarios, necesitamos descargar esto de https://github.com/jirikavi/AngularJS-Toaster .
Angular Loading Bar: Usaremos para cargar la barra como indicación de UI por cada solicitud XHR que realizaremos, para obtener este plugin necesitas descargar de http://chieffancypants.github.io/angular-loading-bar/# .
UI Bootstrap Theme: Para el estilo de nuestra aplicación, necesitamos descargar una plantilla Bootstrap listo de http://bootswatch.com/united/ .

Paso 2: Organizando la estructura del proyecto.
Si estás usando Visual Studio 2012, entonces creamos una nueva Aplicación Web Basic MVC 4 y lo llamaremos “LugaresFotosAngularJS.Web”, no usaremos ninguna característica MVC en nuestro aplicacion, pero de preferencia usar esta plantilla porque usaremos Web API. Si estás usando VS 2013 puedes seleccionar plantilla en blanco pero no olvides seleccionar “Web API” como core de referencia.

Teniendo organizado la estructura de nuestro proyecto como inicio vital para el éxito del proyecto, porque vamos a tratar con muchos pequeños archivos JavaScript, notaras lo importante que es esto una vez que crezca en tamaño. Existen diferentes formas de organizar los proyectos con sus pro y contras, pero es preferible organizar los archivos basados en la arquitecturas de tipos(Servicios, Controladores, Directivas, Filtros, vistas, etc.). En nuestro caso todo el código angular estará contenido en una carpeta superior “app” como se muestra en la siguiente imagen:

Para librerias de terceros(Angular y Bootstrap UI) o cualquier librería JavaScript confeccionada, lo agregaremos al folder principal llamado “scripts”, puedes eliminar todos los archivo JS de esta carpeta y agregar los nuevos archivos extraídos desde el paso 1.

Ahora para los estilos de las herramientas de terceros lo agregamos dentro de la carpeta “content->css”

Como también se puede observar se ha agregado una carpeta fonts, el cual contiene las fuentes para los icono glyphicons con los que trabaja Bootstrap( esto viene junto con el zip que se descarga con el Bootstrap).

Paso 3: Agregando la página principal
Ahora agregaremos la “Página Única”, el cual es el contenedor de nuestra aplicación, este contendrá el menú de navegación y las directivas de Angular para enlazar diferentes vistas ”Páginas” de la aplicación. Estas vistas pueden ser cargadas con JavaScript sin necesidad de descargar una nueva pagina del servidor, ganado performancia debido a que no descargamos una nueva página HTML cada rato en la navegación del usuario a una nueva página. Después de añadir la página “index.html”, necesitamos hacer referencia a los archivos JavaScript y CSS descargados de terceros como se muestra en el siguiente código:

Referencia a estilos CSS

Referencia a las JavaScript de terceros:

Estructura HTML5 de la página:

Hasta ahora hemos creado el contenedor de la aplicación, visitaremos esta página frecuentemente para referencia los nuevos archivos JS agregados durante este tutorial.

Paso 4: Arrancar nuestra aplicación

Agregaremos un archivo llamado “app.js” en la raíz de la carpeta app, este archivo es responsable para crear módulos angular para la aplicación, en nuestro caso tendremos un simple módulo llamado “FotosLugaresApp”, podemos considerar a los módulos como una colección de servicios, directivas, filtros los cuales son usados en nuestra aplicación. Cada módulo tiene un bloque de configuración el cual será aplicado a la aplicación durante el proceso de arranque.

Paso 5: Configuración de rutas en AngularJS
Nuestra aplicación tendrá tres vistas diferentes(Por ahora pueden pensar como si fuesen páginas).

Vista para mostrar resultados de búsqueda, asignado la ruta(URL) “/explorar”.
Vista para mostrar los lugares marcados por los usuarios, asignado la ruta(URL) “/lugares”.
Vista para la página Acerca de, asignado la ruta(URL) “/about”.

Necesitamos usar Angular routing para que nos ayude a cargar la vista correcta cuando el usuario lo requiera, gracias que hay un Servicio Angular llamado “$routeProvider”, este servicio es el principal responsable para enlazar los controladores, vistas y la ubicación actual URL en el navegador, usualmente cada vista es enlazado a un único controlador. Para usar este servicio necesitamos inyectar el módulo “ngRoute” en nuestra aplicación. “ngResource” y “ui.bootstrap” están inyectados para futuros usos. El siguiente código nos mostrará cómo podemos administrar la información de ruteo en una aplicación Angular, así que abrir el archivo “app.js” y escribir el siguiente código:

En código anterior se ha definido por ahora un único URL “/explorar” y se ha enlazado a la vista “resultadolugares.html”, cuando el usuario solicite http://localhost:58049/index.html#/explorar, angular lo enlazara con la ruta configurada y cargará la vista correspondiente “resultadolugares.html”, entonces este invocará al controlador “lugarExplorarController” donde podemos escribir nuestra logica de negocios para esta vista. bien hemos configurado el “routeprovider” para retornar la URL “/explorar” cada vez que no se encuentre cualquier enlace URL pasará a ser usado la función “otherwise”.

Paso 6: Agregando nuestro primer controlador y vista

Es tiempo de añadir nuestro primer controlador “lugarExplorarController”, entoces añadir una nuevo archivo JS dentro la carpeta “app->controllers”, nombrar a este archivo “lugarExplorarController.js”, puedes llamarlo al archivo como quieras; pero usualmente se usa el mismo nombre para el archivo y el nombre del controlador, abre el archivo y escribe el siguiente código:

Como mencionamos antes, los controladores son simplemente funciones JavaScript responsables de implementar nuestra lógica de negocios y validación, si observas en el codigo anterior, notaras que hemos inyectado un objeto llamado $scope, este es el pegamento entre el controlador y la vista, puedes pensar de esto como un recipiente que contiene los datos que nosotros queremos proyectar sobre la vista. Aquí hemos agregado un nuevo modelo para el objeto “$scope” llamado “exploraCerca”, este modelo será usado sobre la vista que agregaremos ahora. Vamos agregar una nueva vista dentro de la carpeta “app->views”, nombra a este archivo “resultadougares.html”. Entonces abre el archivo y limpia su contenido de cualquier tag html como body o head, y después escribe el siguiente código:

Se está usando Bootstrap para el estilo de la aplicación, el código completo se pondrá más adelante cuando el proyecto esté terminado, el cual es bastante de elementos html y clases CSS para hacerlo responsive. Estos han sido ocultados del código para clarificar. Observando el código anterior notarás que hemos usado la directiva “ng-model”, esta directiva es responsable para el enlace bidireccional de datos, en simples palabras; hemos enlazado el input text al modelo “exploraCerca” si el valor del input text ha cambiado, entonces el valor del modelo será cambiado y vice versa. Nota ahora que no usamos el objeto “$scope” cuando referenciamos al modelo en el html, usando las dobles llaves {{ }} es la manera correcta para referenciar al modelo en los elementos DOM por ejemplo {{exploraCerca}}.

Paso 7: Enlazando el módulo “FotosLugaresApp” a nuestra aplicación

Este es el mas paso mas olvidado que por lo general los desarrolladores fallan, necesitamos decirle a Angular en cual parte de nuestra aplicación debería ser activado, podemos tener Mini-SPA por ejemplo parte de la aplicación ser SPA y otra parte ser tradicional solicitud cliente/servidor. pero en nuestro caso queremos que toda la aplicación use Angular, así que lo correcto es buscar y añadir la directiva “ng-app” en la etiqueta html de la pagina principal “index.html”, esto será como se observa en el siguiente código:

Pero mirando en el código anterior notarás que hemos añadido una nueva directiva llamado “ng-view” dentro del cuerpo html, esta directiva actuará como un marcador de posición para nuestra vista, cada vista configurada en nuestra ruta será cargada en esta sección de la página principal. En otras palabras esta directiva será reemplazado por el contenido html de nuestras vistas, en nuestro caso el fragmento del archivo html “resultadolugares.html” reemplaza esta directiva. Pero también es importante especificar el módulo llamado “FotosLugaresApp” para lo que usamos el atributo “ng-app” porque en nuestro caso estamos usando módulos. Además no debe olvidarse referenciar los 2 archivos javaScript en la parte inferior de la página index.html. 

Podemos ejecutar la aplicación ahora y probar la configuración de ruteo y las dos maneras de enlace de datos.

En el siguiente post empezaremos a implementar la verdadera lógica de negocios en este controlador, hacer llamadas RESTfull para el API FotosLugares usando los servicios Angular, y proyectar la data en la vista de una manera ordenada.

Leer mas