Plantilla de Breeze/Angular

por Mads Kristensen

La plantilla de MVC de Breeze/Angular fue escrita por Ward Bell

Descarga de la plantilla de MVC de Breeze/Angular

AngularJS es una biblioteca de código abierto de Google para crear aplicaciones de página única (SPA). Ofrece enlace de datos, inserción de dependencias y administración de pantalla. Combínelo con BreezeJS, otra biblioteca de código abierto para el modelado y la administración de datos, y tendrá los ingredientes esenciales para una excelente aplicación cliente HTML/JavaScript.

La plantilla de SPA de Breeze/Angular es una variación de la plantilla de SPA de KnockoutJS incluida en la actualización de ASP.NET y Web Tools 2012.2. Si ya tiene Visual Studio, tendrá un ejemplo de SPA en funcionamiento en menos de 60 segundos.

Por fuera, la aplicación tiene un aspecto muy similar a la plantilla de SPA de KnockoutJS. Pero por dentro es bastante diferente. La plantilla de KnockoutJS utiliza Knockout para el enlace de datos y AJAX sin procesar para el acceso a datos. La plantilla de Breeze/Angular usa Angular para el enlace de datos y Breeze para el acceso a datos. Estas bibliotecas permiten funcionalidades adicionales, incluida la navegación de páginas y el historial.

La página Acerca de la aplicación muestra un registro de eventos en ejecución durante la sesión de usuario actual, entre los que se incluyen:

• Paginación. Observe la creación del controlador Todo.
• Consultas remotas y consultas en caché local.
• Guardado de entidades nuevas y modificadas.
• Cambios validados en el cliente, por lo que el usuario puede corregir errores antes de confirmar los cambios en la base de datos.

Hay más que explorar en esta plantilla, como por ejemplo:

• Carga dinámica de plantillas de vista HTML.
• Enlace de datos personalizado mediante "directivas" de Angular.
• Modularidad e inserción de dependencias.
• Filtros de consulta, ordenación, paginación, proyecciones e inclusión de entidades relacionadas.
• Uso compartido de datos en varias pantallas.
• Guardado de varios cambios como una sola transacción.
• Las reglas de validación se propagan automáticamente desde el servidor al cliente de JavaScript.

Empecemos.

Creación de un proyecto de plantilla de Breeze/Angular

Descargue e instale la plantilla haciendo clic en el botón Descargar anterior. La plantilla viene empaquetada como un archivo de Extensión de Visual Studio (VSIX). Es posible que tenga que reiniciar Visual Studio.

En el panel Plantillas, seleccione Plantillas instaladas y expanda el nodo Visual C#. En Visual C#, seleccione Web. En la lista de plantillas de proyecto, seleccione Aplicación web ASP.NET MVC 4. Proporcione un nombre al proyecto y haga clic en Aceptar.

En el Asistente para Nuevo proyecto, seleccione Breeze Angular SPA.

Presione Ctrl-F5 para compilar y ejecutar la aplicación sin depuración o presione F5 para ejecutarla con depuración.

Cuando la aplicación se ejecuta por primera vez, muestra una pantalla de inicio de sesión. Haga clic en el vínculo "Sign up" y aparece una nueva página a la vista, donde puede escribir un nombre de usuario y una contraseña. (Las páginas de inicio de sesión y registro se compilan mediante ASP.NET MVC.) Al enviar el formulario de registro, el servidor genera un TodoList con dos elementos para su cuenta. Entonces se le presenta en una nota amarilla.

Ahora está en tierra de SPA. Todo lo que ve y experimenta al manipular Todos se representa y administra en el cliente con ayuda de Knockout y Breeze. Explore la aplicación como usuario… pero con el ojo de un desarrollador. Use las herramientas de desarrollo del explorador para capturar el tráfico de red. (En Internet Explorer: presione F12, seleccione la pestaña Red y haga clic en Iniciar captura.) Ahora pruebe lo siguiente:

• Agregue un nuevo elemento Todo.
• Haga clic en la etiqueta y edite el título del elemento Todo.
• Active una casilla para marcar el elemento hecho. Observe que el cuadro de texto está deshabilitado, por lo que el título ya no se puede editar.
• Haga clic en la "x" a la derecha de la etiqueta. El elemento desaparece y se elimina de la base de datos.
• Elija otro elemento y borre su título. Obtendrá un error de validación que indica que el título es necesario. Después de una breve pausa, se restaura el título anterior.
• Escriba un título ridículamente largo. Obtendrá un error de validación diferente que indica que el título es demasiado largo.
• Haga clic en el botón "Add Todo List". Aparece una nueva lista a la izquierda de la lista anterior.
• Juegue con el título TodoList, desencadenando sus validaciones obligatorias y de longitud.
• Haga clic en el cuadro de texto de título para borrar el mensaje de error.
• Haga clic en la "x" en el círculo de la esquina superior derecha para eliminar TodoList y sus tareas pendientes.
• Haga clic en el vínculo "About" en la esquina superior derecha para ver un registro de estas actividades.

La lógica de validación se realiza en el lado cliente de Breeze. Los atributos de validación de las clases de modelo de servidor se propagan al cliente y se ejecutan automáticamente antes de que el cliente se ponga en contacto con el servidor.

Revise el tráfico de red. Observe que no había llamadas al servidor cuando Breeze ha detectado un error. Cada cambio válido ha dado lugar a una solicitud POST a "/api/Todo/SaveChanges". Breeze agrupa los cambios y los envía juntos como una única solicitud al método SaveChanges del controlador de Web API. Es diferente de la plantilla de SPA de KnockoutJS, que realiza solicitudes PUT, POST y DELETE para cada elemento individualmente.

Además, observe que no hay tráfico de red al cambiar entre las páginas TodoList y About. Esto se debe a que la consulta se ha restringido a la caché local de Breeze.

Vista del interior

Esta aplicación tiene un lado cliente y un lado servidor. La pila del lado cliente consta de un poco de HTML y una combinación de módulos JavaScript de aplicación (en la carpeta "app"), además de bibliotecas de JavaScript de terceros (en la carpeta "Scripts").

La arquitectura de la interfaz de usuario separa los widgets HTML de las vistas del código de presentación auxiliar en los controladores. El sistema de enlace de datos de Angular coordina las vistas y los controladores para que cada uno pueda realizar su trabajo sin tener un estrecho conocimiento del otro.

El controlador pide al contexto de datos que adquiera y guarde las entidades del modelo. El contexto de datos delega la mayor parte del trabajo en Breeze, que construye objetos de modelo de seguimiento automático a partir de los resultados de la consulta JSON.

La pila del lado servidor consta de código de desarrollador y tres bibliotecas principales de .NET: Web API, Entity Framework y Breeze.NET.

La arquitectura básica es la misma que la plantilla de SPA de KnockoutJS. Sin embargo, la implementación es mucho más sencilla: se han eliminado los objetos de transferencia de datos (DTO), y la mayoría de los detalles de Entity Framework se han delegado a Breeze.NET.

Pasos siguientes

Le sugerimos que explore el código, guiado por la amplia explicación de las pilas de cliente y servidor en el sitio web de Breeze.

Puede intentar jugar con la consulta del lado cliente de Breeze; agregue algunos filtros y ordenaciones. Puede agregar más propiedades de modelo y entidades a fin de tener una mejor sensación para el desarrollo de SPA de un extremo a otro. Cuando esté seguro del diseño, puede quitar las características Todo y reemplazarlas por las suyas propias.

Disfrute programando.