Aplicación CRUD con Angular 4. Parte 1: Arquitectura.

En este post les mostraré como crear una aplicación CRUD Angular 4 y Angular 4 Material. Adicionalmente, explicaré como versionar este proyecto en GitHub. No profundizaré en los conceptos de Angular4, más bien adoptaré un enfoque práctico para la construcción de la aplicación CRUD con Angular 4.

Con Angular 4 podemos crear Single Page Applications (SPA):

Las SPA’s gestionan toda la interactividad con el usuario desde el lado cliente, cargando recursos del servidor (vistas, datos… etc.) vía AJAX

Estas son algunas características de la estructura Angular 4:

• Framework para construir SPA’s
  
• El código se escribe en TypeScript que transpila a JavaScript
  
• Angular consiste de un conjunto de librerías multipropósito, varias son opcionales
  
• El desarrollador crea vistas
  (HTML Templates) con atributos propios de Angular
  
• El desarrollador escribe Componentes (clases TypeScript) para gestionar el contenido de la vista
  
• La lógica de la aplicación a nivel cliente se escribe con clases denominadas Services.
  
• Todos los componentes, y services se crean dentro de módulos
  
• Se lanza la aplicación ejecutando el Root Module.
  

En el siguiente esquema se puede observar gráficamente la Arquitectura de Angular 4:

Tomado de: https://angular.io/guide/architecture

Como mencionamos anteriormente, Angular 4 se compone de módulos que internamente pueden tener un conjunto de componentes, servicios, valores y funciones.

Descripción de la aplicación a crear

La Aplicación que vamos a desarrollar será un sistema de gestión para un restaurante escolar.

En el siguiente Storyboard se observa el comportamiento y la funcionalidad general de la aplicación:

En la vista inicial, dispondremos un index muy simple con un menú para gestionar Customer y Orders. El usuario puede gestionar Customers de la siguiente manera:

Como se puede observar, desde la vista de Customers, podremos interactura con el listado de clientes disponibles, agregar nuevos customers y borrar alguno de los existentes.

El sistema permitirá registrar clientes y las ordenes que estos realicen. La aplicación estará compuesta de los siguientes componentes:

• school-restaurant: Aplicación Angular4 con toda la presentación e interacción del lado cliente.
  
• SchoolRestaurantBackEnd: Sistema back-end donde se gestionará la lógica de negocio de la aplicación y los datos de la misma.
  

En el siguiente diagrama de clases se ilustra los conceptos y componentes principales de la aplicación Angular 4 (school-restaurant):

En resumen, dentro de app, tendremos los módulos de orders y customers. En el module customers, tendremos nuestro Customer model y dos componentes, uno para listar y otro para agregar customers.

En la parte 2 crearemos la aplicación Angular 4 y le incorporaremos los conceptos y componentes vistos en este Post.