Arquitectura del Frontend de los MarketPlace

Este frontend ha sido desarrollado en AngularJS 1.4.9. Ver Conceptos básicos AngularJS
El frontend es una aplicación hecha con AngularJS, y se compone por tantos módulos (module en Angular) como conceptos maneja el marketplace. En nuestro ejemplo tenemos 4 módulos: BookModule, ReviewModule, EditorialModule y AuthorModule.

Estructura interna de módulos

Cada uno de los módulos mencionados consta de cinco elementos importantes.

• Model:
  • Define la estructura de los datos a desplegar, al igual que la manera de desplegarlos.
  • Define la URI a la cual se realizarán las peticiones RESTful.
  • Define los estados del modelo y las vistas asociadas a cada estado.
• Controller: Define el comportamiento que tendrá la vista. Hace uso de Service para enlazar el comportamiento de la vista con las operaciones CRUD.
• Template: Define la vista para el módulo, los estilos visuales, la estructura de los elementos visuales y conecta dichos elementos con el comportamiento definido en el controlador.

Por ejemplo, la vista funcional del módulo BookModule tiene la siguiente estructura:

Para entender la secuencia de interacciones, los pasos que se ejecutan cuando se desea consultar un libro son:

1. El usuario hace clic en guardar un libro.
2. El template llama la función del controller que tiene asociado para manejar ese evento.
3. El controller invoca a Restangular para realizar la petición HTTP REST.
4. El servicio hace la petición HTTP REST a la URI de definida en el enviando los datos del libro nuevo en el cuerpo del mensaje.

Como ilustra la imagen, el template hace uso del controller para definir el comportamiento de la vista. Así mismo, el controlador hace uso del modelo para establecer la estructura de los datos (y compartir dicha estructura con la vista), y de Restangular para realizar las peticiones RESTful.