Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
The Breeze/Angular MVC Template fue escrito por Ward Bell
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ínalo con BreezeJS, otra biblioteca de código abierto para el modelado de datos y la administración de datos, y tienes los ingredientes esenciales para una excelente aplicación cliente HTML/JavaScript.
La plantilla Breeze/Angular SPA es una variación de la plantilla SPA de KnockoutJS incluida en la actualización de ASP.NET y Web Tools 2012.2. Si tiene Visual Studio, tendrá un ejemplo de SPA en funcionamiento en menos de 60 segundos.
En el exterior, la aplicación tiene un aspecto muy similar a la plantilla de SPA KnockoutJS. Pero es bastante diferente bajo la capucha. La plantilla KnockoutJS usa Knockout para el enlace de datos y AJAX sin procesar para el acceso a datos. La plantilla 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 las que se incluyen:
- Paginación. Observe la creación del controlador Todo.
- Consultas remotas y consultas de caché local.
- Guardar 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, entre las que se incluyen:
- 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.
- Guardar varios cambios como una sola transacción.
- Las reglas de validación se propagan automáticamente desde el servidor al cliente de JavaScript.
Comencemos.
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 se empaqueta 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 ASP.NET aplicación web MVC 4. Asigne 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 depurar o presione F5 para ejecutarla con la depuración.
Cuando se ejecuta la aplicación por primera vez, muestra una pantalla de inicio de sesión. Haga clic en el vínculo "Registrarse" y una nueva página se desliza en 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 te los presenta en una nota amarilla.
Ahora estás en la tierra de SPA. Todo lo que ves y experiencia al manipular Todos se representa y administra en el cliente con la 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 la tarea completada. Observe que el cuadro de texto está deshabilitado, por lo que el título ya no se puede editar.
- Haga clic en "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. Recibirá un error de validación indicando que el título es obligatorio. Después de una breve pausa, se restaura el título anterior.
- Escribe un título ridículamente largo. Recibirá un error de validación diferente en el que se indica que el título es demasiado largo.
- Haga clic en el botón "Agregar lista de tareas pendientes". Aparece una nueva lista a la izquierda de la lista anterior.
- Interactúa con el título TodoList, activando sus validaciones de obligatoriedad y longitud.
- Haga clic en el cuadro de texto título para borrar el mensaje de error.
- Haga clic en la "x" en el círculo de la esquina superior derecha para eliminar el TodoList y sus Todos.
- Haga clic en el vínculo "Acerca de" 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 pone en contacto con el servidor.
Revise el tráfico de red. Observe que no había llamadas al servidor cuando Breeze detectó un error. Cada cambio válido dio 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 del controlador de SaveChanges API web. Es diferente de la plantilla KnockoutJS SPA, que realiza solicitudes PUT, POST y DELETE para cada elemento por separado.
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.
Echar un vistazo al interior
Esta aplicación tiene un lado cliente y un lado servidor. La pila del lado cliente consta de un pequeño HTML y una combinación de módulos javaScript de aplicación (en la carpeta "aplicación") 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 que los respalda 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 conocimiento íntimo 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: API web, Entity Framework y Breeze.NET.
La arquitectura básica es la misma que la plantilla spa de KnockoutJS. Sin embargo, la implementación es mucho más sencilla: se eliminaron los DTO y la mayoría de los detalles de Entity Framework se han delegado para Breeze.NET.
Pasos siguientes
Le sugerimos que explore el código, guiado por la extensa discusión de las arquitecturas de cliente y servidor en el sitio web de Breeze.
Puede intentar experimentar con las consultas del cliente de Breeze; agregue algunos filtros y ordenamientos. Puede agregar más propiedades de modelo y más entidades para obtener una mejor comprensión del desarrollo completo de SPA. Cuando esté seguro del diseño, puede quitar las características de Todo y reemplazarlas por las tuyas propias.
Disfrute programando.