Final WebApi con AngularJs

18 Pages·2016·1.54 MB·Spanish

Programación
de

Aplicaciones
Distribuidas

Proyecto integrador
FACULTAD REGIONAL TUCUMÁN
2016
Ingeniería en Sistemas de Información

Integración de AngularJS en aplicaciones
web con Visual Studio 2013

Autor: Castro Lucas Martin - Leg: 29488
URL: https://www.dropbox.com
/sh/bv3viovgl9v11fc/
AACzOuq4UvRG7mYHaocFA4KWa?dl=0
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

Tabla de contenido

Introducción ........................................................................................................................................ 3
Que es AngularJS ................................................................................................................................. 4
Ejemplo práctico: WebAppPresup ...................................................................................................... 5
Objetivo: .......................................................................................................................................... 5
Requisitos previos: .......................................................................................................................... 6
Actividades: ..................................................................................................................................... 6
Crear la webApi - nuestro Backend .................................................................................................... 6
Crear la Interfaz de usuario usando AngularJS – nuestro frontend .................................................. 11

Página 2 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

Introducción
El propósito de este documento es describir de manera clara y comprensible las
funcionalidades y características básicas de tecnologías Frontend para el desarrollo web tales
como AngularJs, todas ellas integradas en el entorno de desarrollo visual studio 2013.

Para realizar el ejemplo práctico que acompaña el presente trabajo, se utilizo una
arquitectura cliente-servidor. En la mencionada arquitectura, dos procesos o dos aplicaciones que
se comunican entre sí para intercambiar información. De los dos procesos uno actúa como un
proceso cliente y el otro proceso actúa como un proceso servidor. En las aplicaciones web
tradicionales, el cliente (navegador) que por lo general hace una solicitud de página al servidor
para inicia la comunicación. A continuación, el servidor procesa la solicitud y envía el código HTML
de la página al cliente (navegador).
Página 3 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

En la actualidad, se usa una variante de dicho modelo denominada SPA (por sus siglas en
ingles) o aplicación de una sola página, en las cuales, en un primer momento toda la página se
carga en el cliente de la solicitud inicial, después de lo cual, las posteriores acciones de
actualización se realizan vía peticiones Ajax sin necesidad de recargar la página entera. El SPA
reduce el tiempo para responder a las acciones del usuario y el resultado es la experiencia más
fluida. Los frameworks javascripts como angularJs son las tecnologías que dan soporte a tales
aplicaciones SPA.
Que es AngularJS
HTML es ideal para declarar documentos estáticos, pero se tambalea cuando tratamos de
utilizarlo para declarar vistas dinámicas en aplicaciones web. AngularJS le permite ampliar el
vocabulario HTML para su aplicación. El medio ambiente resultante es extraordinariamente
expresivo, legible y rápido de desarrollar.
Otros marcos se ocupan de las deficiencias de HTML por cualquiera de abstraerse de
HTML, CSS y/o JavaScript o proporcionando una manera imprescindible para manipular el
DOM. Ninguno de estos aborda el problema de raíz que HTML no fue diseñado para las vistas
dinámicas.
AngularJS es un conjunto de herramientas para la construcción del marco más adecuado
para el desarrollo de aplicaciones. Es totalmente extensible y funciona bien con otras bibliotecas.
Cada función puede ser modificado o reemplazado para satisfacer sus necesidades de flujo de
trabajo de desarrollo y de características únicas. Siga leyendo para averiguar cómo hacerlo.

Página 4 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

Ejemplo práctico: WebAppPresup
WebAppPresup es una pequeña aplicación desarrollada a modo de ejemplo que permite
realizar un presupuesto para un servicio de reparación de teléfonos celulares. A tal fin, vamos a
describir como fue desarrollada usando las tecnologías ya mencionadas.

Objetivo:
 Crear una interfaz de usuarios soportada por el framework AngularJS, que muestre
básicamente sus bondades.
 Mostrar la interacción frontend-backend usando AngularJS.

Página 5 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

Requisitos previos:
Este ejemplo fue desarrollado contemplando los siguientes requisitos:
 Windows 10 o superior con 4gb de ram.
 Visual Studio 2013 Express o superior.
 SQL Server 2014 Express o superior.
 ASP.net MVC 5.
 Framework AngularJS en su última versión.
 Entity frameworks 6.

Actividades:
 Crear la webApi - nuestro Backend.
 Crear la Interfaz de usuario usando AngularJS – nuestro frontend.
Crear la webApi - nuestro Backend

Para comenzar creamos un nuevo proyecto llamado WebApiPresup y seleccionamos que
se de tipo WebAPI. (a efectos prácticos, se creó un proyecto paralelo llamado WebApiPresup2)

Página 6 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

A continuación, usando el gestor de paquetes NuGet de Visual Studio 2013 vamos a
instalar las librerías que vamos a necesitar (Entity Frameworks y AngularJS).

Ahora vamos a necesitar las siguientes entidades de datos para dar vida a nuestro
proyecto con angularjs y visual studio. Las entidades serán:

 Marcas: entidad que contiene todas las marcas de teléfonos celulares
 Modelos: entidad que contiene los modelos para cada marca.
 Servicios: entidad que contiene todos los servicios que se le puede prestar a un equipo.
 Gamas: entidad que contiene la descripción de un tipo de gama de equipo y los costos de
mano de obra.
 Fallas genéricas: entidad que contiene las fallas más comunes que presentan los equipos.

Para lo cual creamos los modelos y configuramos la conexión a la base de datos

Página 7 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

Diagrama de modelos

Diagrama creado para satisfacer las mencionadas necesidades de información, a travez de
Entity Framework y su enfoque “model-first”.

Página 8 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

y su correspondencia con la BD creada en SQL Server 2014

Ya que estamos listos, vamos a crear el controlador para manejar nuestra lógica de negocios.

Página 9 de 18
FACULTAD REGIONAL TUCUMÁN
Ingeniería en Sistemas de Información

Cátedra de Programación de Aplicaciones Distribuidas

Integración de AngularJS en aplicaciones web con Visual Studio 2013
2016

El controlador “presupcontroller” fue
agregado la la carpeta de controllers
en el directorio del proyecto y
contendrá las librerías q se muestran y
el siguiente código

El código insertado en el controlador recupera datos de la BD para enviar a la vista.
Página 10 de 18