Servicio rest con nodejs, express 4 y mysql
Servicio rest con nodejs, express 4 y mysql

En este tutorial vamos a ver cómo crear un sencillo proyecto con nodejs utilizando express 4 unido a angularjs, es decir, una aplicación con nodejs y angularjs utilizando express en su versión 4.

Veremos cómo crear el proyecto y modificar el motor de plantillas para utilizar ejs, si tienes dudas, aquí tienes un vídeo tutorial donde explicamos brevemente ejs.

Añadiremos angular, angular-route y bootstrap haciendo uso de bower.

Crearemos la configuración básica con angularjs para poder trabajar con la directiva ng-view, es decir, haremos la configuración de nuestras rutas con el objeto $routeProvider

de angularjs.

Finalmente, para este tutorial, nuestra misión será ejecutar un formulario de login desde angularjs y recibirlo con nodejs a través del objeto req.body de nodejs, para ello crearemos un servicio con angularjs haciendo uso del objeto $http el cuál nos sirve para ejecutar peticiones get, post, put y delete, ideales para trabajar con nodejs.

Crear un proyecto con NodeJS y Express

Para crear nuestro proyecto con nodejs y express ejecute el siguiente comando desde la terminal.


Cómo ya hemos dicho, vamos a instalar ejs, para ello ejecuta el siguiente comando.


Ahora ya tenemos instalado nodejs con express y ejs, ahora vamos.

Instalar AngularJS con Bower

Para instalar angularjs con bower colócate en el directorio public del proyecto y ejecuta las siguientes líneas en la terminal.


Simplemente instalamos angular, angular-route para utilizar las rutas de angularjs y bootstrap para la maquetación.

Los comandos anteriores debes ejecutarlos uno por uno, una vez hecho, se habrá creado una carpeta llamada bower_components dentro de public, la cuál contiene todo lo necesario.

Configurar la aplicación en Express

Ahora abre el archivo app.js de la raíz del proyecto, el cuál contiene todo lo necesario para que nodejs corra junto con express y reemplaza el código por el siguiente.


Lo único que hemos modificado han sido las siguientes líneas.


De esta forma hemos cambiado el motor de plantillas jade por ejs.

Ahora cambia la extensión a los archivos alojados en el directorio views por .html y vamos paso a paso, abre el archivo error.html y reemplaza el código por el siguiente.


Haz lo mismo con el archivo index.html.


Aquí cargamos los archivos que vamos a necesitar en nuestro proyecto, una vez hecho, cargamos la app con la directiva ng-app y decimos que todas nuestras vistas se rendericen a través de la directiva ng-view, el objeto $routeProvider será el encargado de ofrecer esa configuración, para ello tenemos que crear un archivo app.js dentro del directorio public/javascripts y añadir el siguiente código.


Si tienes dudas sobre algo en lo que respecta a AngularJS tienes más de 40 entradas en el blog y un curso completo de angularjs donde aprenderás todo lo que necesitas para empezar a crear aplicaciones de este tipo.

Si nos fijamos, hemos creado la configuración de las rutas con el objeto $routeProvider, a continuación creamos los controladores home, login y profile con la coletilla Ctrl, es un standard del desarrollo en angularjs.

Creamos un servicio llamado loginService al cuál le pasamos el objeto $http para poder hacer la petición post y así enviar nuestro formulario de login.

Ahora abre el archivo routes/index.js y añade el siguiente código.


Lo único que hemos añadido es la ruta post contra login, y simplemente devolvemos con res.send los datos llegados vía post a través de req.body.

Ahora crea una carpeta nueva en public llamada templates y crea tres archivos, home.html, login.html y profile.html, abre el primero y añade el siguiente código.


Ahora abre el archivo login.html y haz lo mismo.


Finalmente haz lo mismo con el archivo profile.html.


Ahora sólo debes ejecutar tu aplicación con el siguiente comando y abrir la url http://localhost:3000 en tu navegador.


Si todo ha ido bien, tu aplicación debe funcionar de forma completa, tanto las rutas como el formulario de login, que te debe devolver un alert con un json en formato string donde podrás ver toda la información de la petición post que hemos hecho.

Eso es todo por este tutorial, espero que te haya gustado y cualquier duda no dudes en comentar, saludos.