Ordenación con AngularJS y ngTable – Parte 9

Standard

En este vídeo adpatamos nuestra tabla para que nos permita ordenar los registros por cada una de las columnas definidas en nuestra tabla.

Para poder ordenar los registros de nuestra tabla vamos a tener que adaptar tanto nuestra parte front-end como nuestra parte back-end. En la parte front-end vamos a tener que actualizar la vista donde tenemos definida la tabla de los clientes (public/modules/customers/views/list-customers.client.view.html), y donde definimos las columnas agregaremos la propiedad sortable. Así, la tabla nos quedaría definida de esta forma:

Una vez definida la tabla, ng-table nos va a permitir ordenar los registros haciendo clic sobre la cabecera de cada una de las columnas. Cuando hacemos clic sobre la cabecera, ng-table va a hacer una petición al API y le va a enviar los parámetros de ordenación. Estos parámetros va a tener que interpretarlos nuestro API para hacer la ordenación de los registros en la base de datos. Finalmente, así es cómo quedaría definido nuestro método list del controlador app/controllers/customers.server.controller.js:

Con estos cambios ya tendríamos adaptada nuestra aplicación para poder ordenar en el lado del servidor los registros de nuestra tabla.

Puedes descargarte y ejecutar la aplicación a través de las siguientes instrucciones:

 
Github

Paginación con AngularJS y ngTable – Parte 8

Standard

En este vídeo adaptamos nuestro cliente AngularJS para mostrar los datos en forma de tabla, de tal modo que se puedan hacer llamadas a nuestro API en el servidor para que los datos los recibamos y los representemos de forma paginada.

Para adaptar nuestra aplicación tan sólo tenemos que modificar dos ficheros. El primer fichero que tenemos que modificar es el controlador customers.client.controller.js. Vamos a inyectar la dependencia ngTableParams, y vamos a crear un objeto de este tipo:

Al objeto ngTableParams le pasamos los dos párametros que hemos definido previamente y el objeto ngTableParams lo insertamos en el $scope de nuestro controlador.

Y el segundo y último fichero que tenemos que modificar es la vista list-customers.client.view.html. En el tag table tenemos que pasar como parámetro el objeto ngTableParams que hemos insertado en el $scope de nuestro controlador:

Y por último, en ng-repeat vamos a cambiar la variable customers por $data:

Con estos cambios ya tendríamos adaptado nuestro cliente para que pudiera mostrar y obtener información de forma paginada.

Puedes descargarte y ejecutar la aplicación a través de las siguientes instrucciones:

Github

Paginación con MongoDB – Parte 7

Standard

En este vídeo vemos cómo adaptar nuestro API de forma que nos permita paginar, filtrar y ordenador los registros de nuestra base de datos.

Tal y como estaba funcionando hasta ahora nuestra aplicación, cuando obteníamos el listado de clientes, el servidor nos devolvía todos los registros de clientes existentes en nuestra colección. Con la adaptación que vamos a hacer a nuestra API, vamos a poder obtener un número determinado de registros, vamos a poder hacer búsquedas y vamos a poder ordenarlos.

Como vemos en el vídeo, para realizar estas operaciones vamos a utilizar un plugin existente para Mongoose llamado mongoose-middleware, que nos facilita las tareas de paginar, filtrar y ordenar. Además, el código resultante es muy claro y fácil de entender.

Tras instalar el plugin, vamos a tener que inicializarlo agregando la siguiente línea en el fichero server.js:

 

A continuación modificaremos el método list del controlador app/controllers/customers.server.controller.js para dejarlo de la siguiente forma:

A partir de ahora podemos hacer el siguiente tipo de llamadas a nuestro API:

  • Obtener sólo dos registros: http://locahost:3000/customers?count=2
  • Obtener sólo dos registros de la segunda página: http://locahost:3000/customers?count=2&page=2
  • Obtener aquellos clientes cuyo nombre contenta la palabra siete: http://locahost:3000/customers?filter[name]=siete

En próximos vídeos veremos cómo integrar el módulo ng-table con la nueva API que hemos definido.

 

AngularJS y ng-table – Parte 6

Standard

Cuando creamos nuevos módulos mediante el generador MEAN.JS, la vista que se encarga de mostrar el listado de nuestras entidades lo hace en forma de lista. Sin embargo, en según qué casos, resulta más funcional representar la información en forma de tabla. Lo que vamos a ver en este vídeo es cómo instalar el plugin ng-table y cómo utilizarlo para representar nuestras entidades en forma de tabla.

 

Al final del vídeo vamos a ver que, en realidad, no obtenemos ninguna ventaja especial por el hecho haber utilizado el plugin ng-table en lugar de haber utilizado HTML estándar para representar nuestra tabla; sin embargo, en próximos vídeos veremos cómo ng-table nos permite paginar la información en el lado del servidor, filtrar la información y ordenarla. Si esta funcionalidad quisiéramos implementar sin la utilización de un plugin como ng-table, veríamos que sería bastante más costoso que utilizando un plugin.

Existen varias alternativas a ng-table, como pueden ser Smart Table o ng-grid, y pueden ser tan válidas como ng-table.

Finalmente, en el vídeo se comenta que para poder implementar la paginación y el filtrado en el lado del servidor, previamente vamos a tener que adaptar nuestro back-end para que permita paginar y filtrar. En el siguiente vídeo veremos cómo adaptar nuestro API para que nos permita realizar estas operaciones.

Puedes descargarte y ejecutar la siguiente aplicación a través de las siguientes instrucciones:

 

Gestión de un módulo MEAN.JS – Parte 5

Standard

Cuando creamos un nuevo módulo a partir del generador mean.js, el generador nos crea una entidad que sólo tiene la propiedad name. En este vídeo vamos a ver cómo agregar nuevas propiedades a nuestra entidad y cómo gestionar estas nuevas propiedades de forma que cuando trabajemos con nuestra entidad, todas estas nuevas propiedades se almacenen y se recuperen de la base de datos.

 

Gestión del back-end

Por la parte del back-end, simplemente vamos a tener que modificar el fichero app/models/customer.server.model.js, que es el fichero en el que definimos el esquema de nuestra entidad. El esquema quedaría definido de la siguiente forma:

Gestión del front-end

Por la parte del front-end, sólo vamos a tener que modificar el controlador de nuestro módulo customers, y sus vistas. Dentro del controlador sólo tenemos que modificar el método create, que quedaría definido de la siguiente forma:

Y en las vistas iríamos definiendo las nuevas propiedades que hemos creado anteriormente. Así, por ejemplo, la vista create-customer.client.view.html quedaría definida de la siguiente manera:

En siguientes capítulos mostraremos cómo mejorar la visualización de la información mediante la utilización de tablas para representar el listado de nuestras entidades.

Stack MEAN – Funcionamiento Interno – Parte 4

Standard

En este vídeo vamos a explicar el funcionamiento interno de una aplicación web basada en el stack MEAN (Mongoose, ExpressJS, AngularJS, NodeJS).

 

El fichero en el configuramos el framework web es config/express.js. En este fichero, por una parte definimos el directorio donde vamos a alojar nuestros ficheros estáticos:

y por otra parte definimos las rutas de nuestra aplicación:

En el fichero app/core.server.routes.js se define la ruta principal de nuestra aplicación, que va a ser una página html, y básicamente va a ser la única página html de nuestra aplicación (a parte de la página de error interno 500 y la de recurso no encontrado 404). Sólo vamos a necesitar una única página html porque estamos desarrollando una aplicación SPA (Single Page Application), las cuales se ejecutan sobre una única página web. app/core.server.routes.js está definido de la siguiente forma:

que indica que cuando alguien acceda a la ruta principal de nuestra aplicación /, entonces se ejecute la acción index del controlador core. El controlador app/controllers/core.server.controller.js está definido de la siguiente forma:

que indica que se envíe al navegador la página index (app/views/index.server.view.html), que es la página principal de nuestra aplicación. Dentro de esta página es donde se ejecuta nuestra aplicación AngularJS.

Posteriormente, por cada módulo nuevo que generemos a través del generador y mediante la instrucción yo meanjs:crud-module module-name el generador nos va a generar dentro del directorio app/routes un nuevo fichero de rutas. Así, cuando en su día generamos el módulo customers, el generador nos creó el siguiente fichero:

donde se definen las rutas para nuestro servicio web REST para customers.

De esta forma, cuando un usuario esté trabajando con nuestra aplicación web, a la hora de acceder a los datos de nuestro back-end, AngularJS va a hacer peticiones a las rutas definidas en nuestros módulos. Para hacer estas peticiones, AngularJS va a utilizar un módulo que incorpora por defecto llamaado $resource, que es una factoría que nos permite interactuar con servicios web REST.

 

Creación de un módulo con MEAN.JS – Parte 3

Standard

En este vídeo vemos cómo crear un módulo con el generador MEAN.JS. La creación del módulo nos va a generar tanto la parte del back-end como la del front-end.

La aplicación que vamos a desarrollar se compone de cuatro módulos: customers, products, sales y dashboard. En este vídeo vamos a ver cómo crear con el generador la estructura inicial del módulo customers, y en vídeos posteriores iremos viendo paso a paso cómo desarrollar cada una de las funcionalidades del módulo.

Demo Application

Estructura de una aplicación MEAN.JS – Parte 2

Standard

En este vídeo vamos a comentar por encima la estructura de una aplicación MEAN desarrollada con el generador MEAN.JS.

En el directorio raíz de nuestro proyecto, el fichero principal es server.js, que es el fichero en el que se establece la conexión con la base de datos MongoDB, desde donde se lanza la configuración del framework express, desde donde se lanza la configuración de la seguridad y desde donde se arranca el servidor para que escuche en un puerto determinado.

En el directorio app, tenemos el código relativo a nuestro back-end. El código del back-end está configurado por tipo de fichero, de esta forma, vamos a tener todos nuestros controladores dentro del directorio controllers, la definición de nuestras entidades van a estar dentro del directorio models, y de la misma forma vamos a tener nuestros ficheros en los directorios routes, tests y views.

Finalmente, dentro del directorio public/modules vamos a tener cada uno de los módulos que generemos (por ejemplo, clientes, productos, pedidos, etc) y cada uno de estos módulos va a contener su propio directorio controllers, services, tests, views, etc.

En definitiva, utilizando el generador MEAN.JS obtenemos de forma muy rápida una estructura con la que empezar a trabajar en nuestros proyectos y con todas las tecnologías que intervienen en nuestro proyecto de forma correctamente integradas entre sí.

En siguientes capítulos veremos cómo ir desarrollando paso a paso nuestra aplicación de DEMO:

Demo Application

Desarrollo de una aplicación con MEAN.JS – Parte 1

Standard

Este es el primero de una serie de vídeos en los que vamos a explicar paso a paso cómo desarrollar una aplicación web desde cero basada en el stack MEAN (MongoDB, Express, AngularJS y NodeJS).

Como comenté en el artículo anterior, la aplicación que vamos a desarrollar es la gestión de un proceso de ventas, donde vamos a tener un maestro de clientes, un maestro de productos, un módulo para generar pedidos de ventas y un panel de control donde poder consultar y comparar en tiempo real las ventas realizadas en el mes actual y en el mes anterior.

Para desarrollar nuestra aplicación vamos a utilizar Yeoman y el generador mean.js. Con este generador vamos a conseguir tener la estructura de nuestra aplicación correctamente configurada y lista para empezar a programar en cuestión de segundos.

Tal y como podemos leer en la sección Getting Started de la documentación de mean.js, los pasos a realizar son los siguientes:

  1. Instalar Yeoman: npm install -g yo
  2. Instalar el generador mean.js: npm install -g generator-meanjs
  3. Generar nuestra aplicación: yo meanjs
  4. Ejecutar nuestra aplicación: grunt

Antes de ejecutar la aplicación recuerda haber arrancado una instancia de MongoDB.

En siguientes vídeos iremos viendo cómo desarrollar los distintos módulos de nuestra aplicación.

 

Aplicación Demo MEANJS

Standard

Hace un tiempo comencé a desarrollar manualmente la siguiente aplicación con el stack MEAN.

Cuando comencé a desarrollarla no existían los generadores que hoy día existen para Yeoman, ni los frameworks proporcionaban las funcionalidades que hoy día proporcionan. Como hemos visto en artículos anteriores, es conveniente saber escoger aquellas herramientas que mejor se adapten a las características que necesitan nuestros proyectos. Sin duda alguna, si actualmente tuviera que comenzar este mismo proyecto, lo haría ayudándome de otras herramientas en lugar de desarrollarlo manualmente.

En próximos artículos explicaré cómo desarrollar esta misma aplicación con mean.js.

Demo ApplicationGitHub