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.