Tutorial: Ejemplo de aplicación web con Angular JS y una API REST con Node

Share Button

Angular JS tutorialSin duda este va a ser el año del despegue de AngularJS y hay que ponerse las pilas. Por ello he creado este tutorial para empezar con algo sencillo pero que toca bastantes aspectos de Angular en la parte Frontend de una Single Page Application, añadiendo un API con Node y Mongo para la parte Backend y completando así el Stack tecnológico de moda, MEAN.

En resumen, en este tutorial vamos a ver:

  • Crear una Single Page Application para crear y eliminar “ToDos” (o Tareas)
  • Guardar las tareas en una base de datos (MongoDB/Mongoose)
  • Usar ExpressJS como framework de Node
  • Crear una API RESTful con Node
  • Usar AngularJS para el frontend y llamar al API REST

Vamos a ello!

La estructura de archivos va a ser muy sencilla, no vamos a modularizar ni añadir tareas con Grunt para enfocarnos en los conceptos de Angular. Estos son los ficheros que tendremos

- public
----- index.html
----- main.js
server.js
package.json
  • main.js contendrá toda la lógica del frontend, es donde tendremos los controladores de Angular JS y llamaremos via AJAX al API para pedir contenido, borrarlo, etc..
  • index.html será nuestro único fichero html y por tanto nuestra única página, toda la funcionalidad será en ella.
  • server.js es nuestro fichero Node donde estará la configuración del servidor y las rutas a nuestro API.
  • package.json es el fichero donde están los datos de la aplicación y las dependencias utlizadas, como toda aplicación Node.

Empezaremos por package.json para indicar que dependencias vamos a necesitar, que simplemente serán Express y Mongoose:

{
	"name": "angular-todo",
	"version": "0.0.1",
	"description": "Simple Angular TODO app based in MEAN stack",
	"main": "server.js",
	"author": "Carlos Azaustre",
	"dependencies": {
		"express": "latest",
		"mongoose": "latest"
	}

Después de esto, en una terminal ejecutamos “npm install” y se nos instalarán las dependencias para poder empezar a utilizarlas.

Ahora pasaremos al archivo server.js que será el fichero donde esté la configuración del servidor, así como la conexión a la base de datos y las rutas de nuestro API.
En los comentarios del código he explicado a grandes rasgos que hace cada línea.

Como todo fichero de servidor de Node, primero añadimos las librerías que necesitamos (express y mongoose).

//server.js

var express 	= require('express');
var app 		= express();
var mongoose 	= require('mongoose');

// Conexión con la base de datos
mongoose.connect('mongodb://localhost:27017/angular-todo');

// Configuración
app.configure(function() {
	// Localización de los ficheros estáticos
	app.use(express.static(__dirname + '/public'));
	// Muestra un log de todos los request en la consola		
	app.use(express.logger('dev'));	
	// Permite cambiar el HTML con el método POST					
	app.use(express.bodyParser());
	// Simula DELETE y PUT						
	app.use(express.methodOverride());					
});

// Escucha en el puerto 8080 y corre el server
app.listen(8080, function() {
	console.log('App listening on port 8080');
});

El siguiente paso es construir el modelo de la base de datos que modele las tareas o “ToDos”. Esto lo hacemos con Mongoose y nuestro modelo será muy sencillo ya que solo cuenta con un atributo “Text” que define la tarea. Este código lo insertamos en server.js antes de la línea donde se inicia el servidor con app.listen

// Definición de modelos
var Todo = mongoose.model('Todo', {
	text: String
});

Tras esto nos queda construir las rutas que llamarán a nuestro API y que utilizaremos desde el frontend. En esta tabla se muestran las 3 llamadas que vamos a implementar y que definirán nuestra API:

HTTP URL Descripción
GET /api/todos Devuelve todas las tareas de la BD
POST /api/todos Crea una tarea
DELETE /api/todos/:todo Borra una tarea

Y antes de seguir con el código, veamos un diagrama visual del flujo que va a seguir aplicación con las tecnologías que empleamos en cada parte:

esquemaAngularNode

 

Desde el frontend, con Angular hacemos llamadas AJAX a nuestra API en el servidor Node. Este consulta a la base de datos (Mongo) dependiendo de la llamada realizada. La BD devuelve el objeto como respuesta a Node y este lo sirve como JSON a Angular que lo muestra en el frontend sin necesidad de recargar la página, creando así una Single Page Application.

Veamos las rutas. Estas irán también en el archivo server.js, justo antes de cuando se inicia el servidor y escucha en el puerto con app.listen

// Rutas de nuestro API
// GET de todos los TODOs
app.get('/api/todos', function(req, res) {				
	Todo.find(function(err, todos) {
		if(err) {
			res.send(err);
		}
		res.json(todos);
	});
});

// POST que crea un TODO y devuelve todos tras la creación
app.post('/api/todos', function(req, res) {				
	Todo.create({
		text: req.body.text,
		done: false
	}, function(err, todo){
		if(err) {
			res.send(err);
		}

		Todo.find(function(err, todos) {
			if(err){
				res.send(err);
			}
			res.json(todos);
		});
	});
});

// DELETE un TODO específico y devuelve todos tras borrarlo.
app.delete('/api/todos/:todo', function(req, res) {		
	Todo.remove({
		_id: req.params.todo
	}, function(err, todo) {
		if(err){
			res.send(err);
		}

		Todo.find(function(err, todos) {
			if(err){
				res.send(err);
			}
			res.json(todos);
		});

	})
});

// Carga una vista HTML simple donde irá nuestra Single App Page
// Angular Manejará el Frontend
app.get('*', function(req, res) {						
	res.sendfile('./public/index.html');				
});

Gracias a Mongoose podemos buscar(find), borrar (remove) y crear(create) de una manera muy sencilla. La última ruta no corresponde al API, si no que será la encargada de mostrar el html donde ejecutaremos toda la lógica del Frontend.

Todo esto que hemos hecho corresponde al Backend de la aplicación. Ahora empezaremos con lo que de verdad importa, el desarrollo frontend con Angular.

Tendremos toda la lógica en el fichero main.js, Primero crearemos un modulo que será el que defina toda nuestra aplicación

var angularTodo = angular.module('angularTodo', []);

y seguidamente la función mainController que será el controlador de la aplicación

function mainController($scope, $http) {
	$scope.formData = {};

	// Cuando se cargue la página, pide del API todos los TODOs
	$http.get('/api/todos')
		.success(function(data) {
			$scope.todos = data;
			console.log(data)
		})
		.error(function(data) {
			console.log('Error: ' + data);
		});

	// Cuando se añade un nuevo TODO, manda el texto a la API
	$scope.createTodo = function(){
		$http.post('/api/todos', $scope.formData)
			.success(function(data) {
				$scope.formData = {};
				$scope.todos = data;
				console.log(data);
			})
			.error(function(data) {
				console.log('Error:' + data);
			});
	};

	// Borra un TODO despues de checkearlo como acabado
	$scope.deleteTodo = function(id) {
		$http.delete('/api/todos/' + id)
			.success(function(data) {
				$scope.todos = data;
				console.log(data);
			})
			.error(function(data) {
				console.log('Error:' + data);
			});
	};
}

Pasemos a explicar algunos conceptos de esta parte.

En el objeto $scope se almacenan todas las variables dentro del ámbito del controlador. En el HTML, todo lo que se encuentre dentro de la directiva ng-controller=”mainController” es controlable desde el objeto $scope.

Y el objeto $http es el que hace toda la magia, ya que nos permite hacer llamadas AJAX a nuestro API con pocas líneas de código.

Con estos dos objetos creamos las 3 funciones que hacen las 3 peticiones que acepta nuestra API, el GET de todas las tareas almacenadas, el POST de creación de una nueva tarea y el DELETE de una tarea.

Y por último nos queda el HTML en el que maquetaremos los resultados que nos trae el API.
Necesitamos indicar que parte de la página corresponde a la aplicación Angular, eso lo hacemos con la directiva ng-app. En nuestro caso lo hemos puesto en el tag <html> ya que todo el HTML es la aplicación

<html lang="en" ng-app="angularTodo">...</html>

Una aplicación Angular puede tener varios controladores, en este ejemplo solo tenemos uno, el mainController, y debemos decir en el HTML que parte es la corresponde a esta función, eso lo hacemos con la directiva ng-controller. En nuestro caso la hemos puesto en el body porque no hay más. Si tuviesemos más controladores, se pueden poner en otros section, article o div y tener varios en la página.

<body ng-controller="mainController">...</body>

Para mostrar la lista de tareas que devuelve el GET, utilizaremos la directiva ng-repeat que nos permite crear una iteración al estilo de un for


<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo._id)">
{{ todo.text }}
</label>
</div>

Con esto creamos un input de tipo checkbox por cada objeto que nos devuelve la llamada al API. Y con la directiva ng-click creamos un evento que escucha cuando marquemos el checkbox para llamar a la función deleteTodo() a la cual se le pasa como parámetro el id de la tarea para que llame al DELETE del API.

Por último, tenemos un formulario con un input de tipo texto donde escribimos tareas nuevas y las mandamos por POST al API. Aquí usamos una nueva directiva, ng-model, que es la que controla el Modelo en este caso la tarea y su texto, y de nuevo ng-click en el botón de submit para llamar a la función createTodo() del controlador que hace el POST al API y a la Base de datos.


<form>
<div class="form-group">
<input type="text" class="form-control input-lg text-center"
placeholder="Inserta una tarea nueva"
ng-model="formData.text">
</div>
<button class="btn btn-primary btn-lg" ng-click="createTodo()">Añadir</button>
</form>

Con esto estaría todo. Solo nos queda incluir las librerías de jQuery y Angular como scripts al final de la página y y también una hoja de estilos para que no sea tan fea la aplicación. Hemos usado un CDN para ello y así no tenemos que preocuparnos en bajarnos la libreria y añadirla al proyecto, para centrarnos en entender los conceptos

El código HTML completo sería así:


<!doctype html>
<html lang="en" ng-app="angularTodo">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular TODO app</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body ng-controller="mainController">
<div class="container">
<!--Cabecera-->
<div class="jumbotron text-center">
<h1>Angular TODO List <span class="label label-info">{{ todos.length }}</span></h1>
</div>

<!--Lista de Todos-->
<div id="todo-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo._id)">
{{ todo.text }}
</label>
</div>
</div>
</div>

<!--Formulario para insertar nuevos Todo-->
<div id="todo-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg text-center"
placeholder="Inserta una tarea nueva"
ng-model="formData.text">
</div>
<button class="btn btn-primary btn-lg" ng-click="createTodo()">Añadir</button>
</form>
</div>
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="main.js"></script>
</body>
</html>

Y ya tenemos nuestra aplicación de ToDos. Solo tenemos que correr el servidor en un terminal con node server.js e ir a un navegador a la URL http://localhost:8080 y tendremos algo como esto

AngularTodoList

En mi cuenta de GitHub he creado un repositorio con el código fuente de esta aplicación. Te animo a que hagas Fork y lo amplies a tu gusto :)

Share Button
The following two tabs change content below.

cazaustre

Front End Developer at Chefly
Desarrollador Front-End y Diseñador Gráfico Freelance. Apasionado de la tecnología HTML5 y el mundo JavaScript. Geek, adicto a las series y a las camisetas.
  • Pingback: Empezando con AngularJS

  • total13

    Hola! Gracias por tu artículo, va muy bien para ir asentando conceptos, pero me queda una duda… ¿para que necesitas jquery en este ejemplo? De hecho por lo que voy entendiendo, (estoy haciendo mis primeros pinitos en angular) es que en muchos caso directamente jquery no es necesario, ya que no necesitas manipular el DOM para nada, (ya lo hace angular internamente, imagino).

    Saludos!

    • http://carlosazaustre.es/ Carlos Azaustre

      Tienes razón @disqus_OGIAf8fA3w:disqus, jQuery en este ejemplo no se utiliza para nada, por lo que podemos no incluirla y la aplicación seguiría funcionando correctamente.
      Gracias por comentar!

  • Victor Manuel R G

    Hola Carlos :

    Muy bueno el tutoria, la verdad estoy incursionando en esto de AngularJS y Mongo DB, trate de ejecutar la app, en Windows, pero veo los siguientes errores en la consola de JS, y la mejor manera de seguir aprendiendo, es preguntando !! –> de antemando gracias, por la ayuda….

    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/api/todos

    Error:

    404 Not Found

    Not Found
    The requested URL /api/todos was not found on this server.

    main.js:15

    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/api/todos

    Error:

    404 Not Found

    Not Found
    The requested URL /api/todos was not found on this server.

    main.js:27

    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/api/todos

    Error:

    404 Not Found

    Not Found
    The requested URL /api/todos was not found on this server.

    main.js:27

    • http://carlosazaustre.es/ Carlos Azaustre

      Hola @victormanuelrg:disqus!
      Muchas gracias por pasarte por aquí y comentar.
      Mongoose es una librería de Node que actúa como driver de MongoDB y también permite escribir los modelos y los esquemas de la base de datos de una forma más sencilla.
      Para instalar mongoose solo has de escribir “npm install mongoose” y se te descargarán las dependencias, y despues importarla en server.js con “require(‘mongoose’).
      Por supuesto, puedes usar otros drivers, MongoDB tiene uno propio. Yo por mi parte me siento más cómodo con Mongoose.
      El servidor de bases de datos corre en localhost:27017 y /angular-todo es nuestra base de datos.

      Sobre los errores que te ocurren, prueba a mirar un par de cosas que he visto en tu comentario y no se si lo tendrás así en tu código:

      - Al preguntarme sobre Mongoose has escrito esto:
      mongoose.connect(‘mongodb:http://localhost:27017/angular-todo‘);
      Date cuenta que despues de mongodb has escrito http y eso puede hacer que no funcione, la cadena correcta es:
      mongoose.connect(‘mongodb://localhost:27017/angular-todo’);

      - Y las llamadas al API has puesto http://localhost/api/todos y el servidor de Node que hemos programado corre en el puerto 8080, por lo que lo más correcto es llamar a http://localhost:8080/api/todos

      Espero haberte ayudado, si sigue fallando, coméntalo por aquí y entre todos intentaremos ayudarte :) un saludo!

    • Victor Manuel R G

      Hola Carlos :
      Muchas gracias por la explicacion, ya voy entendiendo mas, solo una pregunta; ¿En donde llamas a server.js y package.json ?

      Muchas gracias,

      • http://carlosazaustre.es/ Carlos Azaustre

        Server.js se llama cuando ejecutas en el terminal “node server.js”. Con eso el servidor se inicia y empieza a escuchar eventos.

        Package.json solo se usa para especificar las dependencias que utilizamos (como Mongoose), y más configuraciones y se le llama cuando se ejecuta “npm install” funciona como una especie de manifiest.xml que suele haber en otros lenguajes.
        Un saludo!!

  • Pingback: Tutorial: Aplicación web con AngularJS y Routing

  • Jesus Javega

    Hola de nuevo Carlos:

    La verdad que este post me viene como anillo al dedo, resulta que en clase tratamos para aprender “las nuevas tecnologías” con el caso del todoMVC, lo ideal en mi caso sería tener este caso echo en el primer mes,

    ¿cuanto tiempo te llevo hacerlo?

    Cuento con el echo de que no tenemos los mismos conocimientos. Tu eres un PRO.

    Saludos y gracias por responder.

    • http://carlosazaustre.es/ Carlos Azaustre

      Jajaja, de PRO nada. Todos tenemos la capacidad de hacer lo mismo, solo es practicar. Estos casos los hice siguiendo otros tutoriales (en inglés), mezclando unas cosas de unos y otras de otros. Yo creo que en 1 mes eres capaz de hacerlo :)

  • axel salmeron

    saludos, te adjunto un problema que me genero la consola al intentar conectar, hasta ahora soy un novato tanto en modelo-vista-controlador, como en MEAN en general, he desarrollado aplicaciones y páginas web simulando MVC pero completamente “a pie”, pero me veo en la necesidad de crear una app que no dependa de un servidor todo el tiempo. Excelente artículo me ha ayudado mucho a entender MEAN

    • KikeCV

      Tienes que instalar mongodb.

      1. http://www.mongodb.org/downloads

      2. Si usas windows aquí guia -> http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/

      3. En el terminal corre de nuevo node server.js y http://localhost:8080/ en el navegador. Debería funcionarte.

      • http://carlosazaustre.es/ Carlos Azaustre

        Gracias por aclararlo @kikecv:disqus, se me olvidó explicar como instalar Mongo :)

      • axel salmeron

        perfecto, gracias

      • http://solucionesdbr.es/ David Benito Ramírez

        Hola he hecho el tutorial y me ha dado el mismo error.

        A parte de lo descrito. He tenido que crear una subcarpeta en el proyecto “/data” y dentro de la carpeta BIN de la instalación de MongoDB he tenido que ejecutar desde un prompt:

        - mongod –dbpath c:angulardata

        Imagino que he rellenado esta carpeta “data” con la instancia de bbdd de mongoDB, no lo sé exactamente.

        Con esto ultimo ya he podido ejecutar ‘node server.js’ sin problemas.

        Espero que ayude si alguien se ha quedado atascado como yo. Por lo demás, el tuto genial! :)

  • Jorge Zozaya

    Maravilla!

  • Albert

    Genial!

    Te tengo que felicitar, porque me he vuelto asiduo a tus artículos a raíz de encontrar este.

    Me has servido de motivación para adentrarme en MEAN. Y este ha sido el primer paso. Ahora, voy a intentar que esta pequeña aplicación web crezca. Tengo ideas para añadirle un login utilizando la librería passport, y muchas cosas más!

    Gracias!

    • http://carlosazaustre.es/ Carlos Azaustre

      Hola @disqus_ckw12yISRU:disqus! Genial! me alegra saber que te ha servido de motivación. Te animo a que la amplíes :)

  • Javier Montesinos

    Hola Carlos

    Sencillo y práctico tutorial para comenzar a conocer MEAN. Con tu artículo sobre Vagrant y este he podido comenzar a probar cosas con Mongo, Angular, Node… sin tener que instalar nada en mi Mac. Picar en Sublime en el propio Mac y correr en el box asignado al proyecto, dejando mi sistema operativo “limpio”

    Vagrant me ha parecido una herramienta muy útil, a diario los desarrollamos los hacemos con OracleLinux, Java, Tomcat, Spring … investigaré la posibilidad de crear un box con esta configuración.

    Veo que todo lo relacionado con Node, Angular… está tomando mucha fuerza, investigaré para ver lo que nos puede ofrecer.

    Muchas gracias, muy útil tus recursos.

    • http://carlosazaustre.es/ Carlos Azaustre

      @javiermontesinos:disqus muchas gracias por comentar. Me alegra saber que te es útil y te ánimo a investigar con todo lo relacionado con JavaScript. Como bien dices, está pegando fuerte y creo que es una tecnología muy a tener en cuenta :)
      Saludos!

  • Guest

    Excelente trabajo amigo. Twiteado y recomendado!

    • http://carlosazaustre.es/ Carlos Azaustre

      Muchas gracias!

  • Bitomule

    Muy buen tutorial, sencillo y fácil de seguir. Ahora tengo más ganas de aprender más sobre Angular y Node y todo lo que se pueda hacer juntándolos. ¿Alguna recomendación de cursos o tutoriales? (Prefiero video pero también libros)

    • http://carlosazaustre.es/ Carlos Azaustre

      Hace un tiempo hice un post donde recopilaba los mejores sitios para aprender AngularJS (en inglés) por si quieres echarles un ojo:
      http://carlosazaustre.es/blog/empezando-con-angular-js/

      Saludos!

      • Bitomule

        Muchas gracias!

        Y alguna recomendación para Node.js?

  • Miguel Ángel

    Hola Carlos,

    He seguido tu tutorial y me arroja el siguiente error:

    TypeError: Object # has no method ‘sendFile’
    at /var/www/sites/nodetest/server.js:79:9
    at callbacks
    (/var/www/sites/nodetest/node_modules/express/lib/router/index.js:164:37)

    at param
    (/var/www/sites/nodetest/node_modules/express/lib/router/index.js:138:11)

    at pass
    (/var/www/sites/nodetest/node_modules/express/lib/router/index.js:145:5)
    at Router._dispatch
    (/var/www/sites/nodetest/node_modules/express/lib/router/index.js:173:5)
    at Object.router
    (/var/www/sites/nodetest/node_modules/express/lib/router/index.js:33:10)
    at next
    (/var/www/sites/nodetest/node_modules/express/node_modules/connect/lib/proto.js:193:15)

    at Object.methodOverride [as handle]
    (/var/www/sites/nodetest/node_modules/express/node_modules/connect/lib/middleware/methodOverride.js:48:5)

    at next
    (/var/www/sites/nodetest/node_modules/express/node_modules/connect/lib/proto.js:193:15)

    at multipart
    (/var/www/sites/nodetest/node_modules/express/node_modules/connect/lib/middleware/multipart.js:97:37)
    Como soy totalmente nuevo en esto me pierdo un pco con los errores. Imagina que se queja de la función sendFile que hay dentro del server.js

    Me falta alguna cosa? librería o algo? he comprobado con npm que estén las dependencias de mongoose expressjs.

    Gracias.

    • http://carlosazaustre.es/ Carlos Azaustre

      Hola Miguel Ángel.
      No se muy bien que puede pasarte. Prueba a hacer de nuevo npm install o descargarte el respositorio: https://github.com/carlosazaustre/angular-todo
      Prueba también a ver que versión de Node tienes instalada con el comando “node -v”, quizá las versiones anteriores a las 0.10 no tengan ese método.
      Saludos! y gracias por comentar!

      • Miguel Ángel

        Hola Carlos,

        Acabo de descubrir que la función ‘sendFile’ que hay en el ejemplo debe ir en minúscula ‘sendfile’, con eso ya funciona. Luego otro error que hay al principio de todo es que el fichero ‘main’ está puesto como ‘main.html’ y tiene que ser ‘main.js’ como pones luego en el texto.

        Por lo demás, todo perfecto.

        Muchas gracias por el tutorial, es un buen punto de partida para los que nos iniciamos con MEAN.

        Saludos,

        Miguel Ángel.

        • http://carlosazaustre.es/ Carlos Azaustre

          Perfecto! Mil gracias Miguel Angel por el feedback. Voy a quitarle las erratas :)
          Saludos!

  • Alejandro Paciotti

    Carlos: es genial tu tutorial, tu blog, todo. Excelente. Muchísimas gracias.!

  • http://blasfernandez.es Blas Fernández Segura

    Hola Carlos, genial tu tutorial. La verdad es que me ha ayudado bastante para poder iniciarme en este mundo de Mongo, Node y Angular, del que estaba muy muy desconectado.

    He seguido paso a paso el tutorial y ahora quisiera hacer un simulacro de ponerlo en producción. Según encontré para ello simplemente debo correr en el terminal $>NODE_ENV=production node server.js

    Pero resulta que las rutas cuando lo ejecuto me dan error 404. Lo estoy corriendo sobre un MAMP, como debo configurarlo para simular que realmente está en producción?

    Gracias

  • Juan Manuel López Pazos

    Hola Carlos. Eres un artista.

    Me ha sido de gran utilidad para una web que estoy empezando con Angular, Node, Mongodb, etc para mi proyecto de fin de carrera. Tenía que hacer un sistema de gestión de usuarios.

    En cuanto me lo curre un poco más no tengo ningún inconveniente en añadirlo para tener otro ejemplo.

    Un saludo y gracias de nuevo.

  • juanvc123

    Extremadamente buena la explicación, que buen ejemplo del uso MEAN!

  • Rolo P

    Hola Carlos:

    Note que en el extracto que haces del archivo package.json te ha faltado una “}”, se que es una corrección menor la que hago, pero a veces algo así para principiantes como yo pueden ser un dolor de cabeza.
    Lo solucione facil, fui al github y revise el archivo.

    Saludos y muy buen blog! me es super util para hacer mis primeras armas en Angular y Js (vengo de winform webform duro de .net)

    Rolo.

  • Francisco García López

    Hola Carlos:
    Gracias por este tutorial. Estoy justo ahora empezando a utilizar stack MEAN pero tengo una dificultad para probar este ejemplo. Cuando ejecuto ‘npm start’ me indica que ‘app’ no tiene el método ‘configure’:

    He declarado ‘app’ con ‘var app = express()’ tal como viene en el código. Utilizo Windows 8 y la versión de Nodejs es 0.10.23.

    Observo además que en la guia de ExpressJS (http://expressjs.com/api.html) no existe tal método. ¿Qué estoy haciendo mal? Quizá haya desaparecido este método y ahora debe hacerse de otro modo pero ¿cómo?.

    ¿Qué versión de Express exacta utilizas? Quizá modificar la dependencia sea lo más fácil…

    Muchas gracias

    • Juan Manuel Wagner

      Me pasa lo mismo, en Express 4.x ya no existe este método.

      Me imagino que debes indicar en el “package.json” la versión a 3.x

      http://blog.tompawlak.org/new-features-node-express-4

      Yo tengo problema con la biblioteca “connect” que esta tratando de usar métodos también que ya no existen en la nueva versión, pero este creo que lo usa alguna de las dependencias ya instaladas.

      Pero ahí va caminando :)

      • Juan Manuel Wagner

        Listo, el problema del connect era porque otra App ya usaba el mismo puerto.
        Novato :)

  • http://csharpman.com Alberto León

    Os dejo este enlace para que podáis migrar el tutorial al último ExpressJS http://scotch.io/bar-talk/expressjs-4-0-new-features-and-upgrading-from-3-0

  • Leandro Zubrezki

    Hola Carlos!, te felicito por todo el blog, muy buenos artículos. Te hago una consulta ya que no encontré en ningún lugar algo que este explicado bien, por ahi busco mal. Supongamos que publicamos la app en un server con dominio.com, qué pasa ahora si alguien desde afuera hace un GET a dominio.com/api/todos? recibe el JSON igual que nosotros?, cuál es la mejor manera de solo permitir que nuestra app consuma los datos?
    Gracias y abrazo desde Argentina!

    • Jonathan Samines

      Por defecto, la mayoría de servidores web bloquean las peticiones Cross Domain, por lo que hacer una petición de este tipo, la rechazaría. Sin embargo aún sería posible hacer la petición utilizando alguna técnica del tipo JSONP. Puedes buscar más información sobre CORS para este tema.

      • http://carlosazaustre.es/ Carlos Azaustre

        Para el tema CORS, en lo relativo a la autenticación de usuarios via Angular – Node, os recomiendo este proyecto-ejemplo. https://github.com/pablodenadai/cors-restful-api

        • Jonathan Samines

          Genial, muchas gracias por el enlace :D

    • Lauro Lisis

      Pues también depende del backend, en mi caso utilizó php y en ese caso se puede usar facilment un $_SERVER['http_referer'] para ver de donde viene la solicitud y si es distinta de nuestro dominio se bloquea y punto, también vale si antes autentificamos mediante sesiones.

  • Fausto
  • jogerq

    Saludos,

    Interesante tutorial, sólo debes actualizarlo a la versión 4 de express o colocar en el packages.json la vesión 3 del express para que funcione y no de error en las versiones latest.

  • elvi wilson

    Hola carlos Ejecute el node server.js y me salia un error, agregue esta linea de código var app = express.createServer(); y la borre esta var app = express(); hize bien en hacer eso, pero allí recién me cargo

  • Raul

    Hola gran ejemplo, apenas hace poco descubrí angularjs , he visto varios ejemplos y todos van asociados con api rest, mi pregunta es angularjs tambien se puede usar con aplicaciones “normales” como podría ser un ERP programado en symfony 2?

    • Lauro Lisis

      Claro que se puede recuerda que angular es solo javascript, en ese ejemplo se usó nodejs como backend para vale cualquier otro como puedes usar java, php, aspnet, etc. En mi caso lo utilizaré con php utilizando Laravel para ahorrarme aun más trabajo, sobre todo para el acceso a BD de Mysql que es el utilizo.

  • Guest

    Hola buenas estoy estos días adentrándome en NodeJS y tengo un error que seguramente tenga fácil solución. Al cargar el ‘server.js’ me salta el siguiente error:

  • aitzol

    muy bueno el tutorial. Lo he actualizado a express 4.0 y funciona, aunque me ha costado ponerlo en marcha debido a unos problemas de autenticacion en la base de datos, pero hay una cosa que no acabo de entender, y es que nó se en que parte del código mongoose define la collection ‘todos’ de la base datos mongoDB ¿?

    • aitzol

      perfecto. Me he leido los manuales de Mongoose y he solucionado mis dudas. Gracias por el tutorial.

  • Jaime García

    Hola! gran tutorial, pero no estaría nada mal actualizarlo con la última versión de express. Ha cambiado un poco :) UN saludo.