Cómo implementar un servidor usando Node.js para mi aplicación web Angular 2

De la forma que desee: simplemente cree puntos finales REST manualmente o utilizando un middleware Node.js como Express.js. Comience sentándose y definiendo QUÉ van a hacer sus puntos finales para cada operación CRUD: qué lógica del lado del servidor necesita y el diseño de un modelo de datos para su aplicación. Piense en cómo se utilizarán los datos en el front-end, cómo se actualizarán desde el front-end y cualquier necesidad de seguridad que tengan esos datos, o algunos de esos datos. Diseñe objetos JSON para las diversas solicitudes que también se realizarán desde el cliente, de modo que tenga un esquema para enviar los datos al servidor.

Una vez que haya hecho todo eso, cree una aplicación Node.JS. La mayoría de los tutoriales en línea tienden a mezclar NodeJS y Angular 2 en una estructura de proyecto. Recomiendo separarlos en directorios totalmente diferentes (es decir, no coloque su aplicación Node en su directorio Angular2). Esto agregará una ligera complicación a la prueba / ejecución de su código Angular 2 en la máquina de desarrollo: realizará solicitudes CORS porque la URL que aloja la aplicación Angular2 será diferente de la que aloja la aplicación NodeJS. Sin embargo, creo que vale la pena, en el entorno de desarrollo, mantener una separación clara de su código de front-end y su código de back-end. Creo que también me ayuda a pensar en ellos como dos componentes separados que se comunican a través de REST, y me ayuda a desarrollar más código modular en el lado del servidor (ya que estoy diseñando mi aplicación en el servidor para que pueda intercambiarse fácilmente con cualquier otra tecnología si es necesario sin afectar el front-end). Sin embargo, esto no es un requisito, y puede colocar la aplicación NodeJS en la misma URL que la aplicación Angular2.

Ahora, por ejemplos. Mi archivo server.js para crear el servidor express. Observe los encabezados de control de acceso (utilizados para manejar el problema de origen cruzado que mencioné anteriormente):

var express = require (‘express’);
var ruta = require (‘ruta’);
var bodyParser = require (‘body-parser’);
var index = require (‘./ routes / index’);
var todos = require (‘./ routes / todos’);
aplicación var = express ();
// Ver motor
app.set (‘views’, path.join (__ dirname, ‘views’));
app.set (‘ver motor’, ‘ejs’);
app.engine (‘html’, require (‘ejs’). renderFile);
//app.use(express.static(path.join(__dirname, ‘cliente’)));
// Soluciona problemas de origen cruzado
app.use (function (req, res, next) {
res.setHeader (‘Access-Control-Allow-Origin’, ‘*’);
res.setHeader (‘Access-Control-Allow-Headers’, ‘Origin, X-Requested-With, Content-Type, Accept’);
res.setHeader (‘Access-Control-Allow-Methods’, ‘POST, GET, PUT, PATCH, DELETE, OPTIONS’);
siguiente();
});
app.use (bodyParser.json ());
app.use (bodyParser.urlencoded ({extended: false}));
app.use (‘/’, index);
app.use (‘/ api / v1’, todos);
app.listen (3000, function () {
console.log (“servidor iniciado en el puerto 3000”);
});

Ahora, mi enrutador para la URL del índice:

var express = require (‘express’);
enrutador var = express.Router ();
router.get (‘/’, function (req, res, next) {
res.render (‘index.html’);
});
module.exports = enrutador;

y la url de todos:

var express = require (‘express’);
enrutador var = express.Router ();
var mongojs = require (‘mongojs’);
var db = mongojs (‘mongodb: // url / meanodos’, [‘todos’]);
// obtener todos
router.get (‘/ todo’, function (req, res, next) {
db.todos.find (function (err, todos) {
si (err) {
res.send (err);
} más {
res.json (todos);
}
});
});
// Obtener Single Todo
router.get (‘/ todo /: id’, function (req, res, next) {
db.todos.findOne ({
_id: mongojs.ObjectId (req.params.id)
}, función (err, todo) {
si (err) {
res.send (err);
} más {
res.json (todo);
}
});
});
// Guardar todo
router.post (‘/ todo’, function (req, res, next) {
var todo = req.body;
if (! todo.text ||! (todo.isCompleted + ”)) {
res.status (400);
res.json ({
“error”: “datos no válidos”
});
} más {
db.save (todo, función (err, resultado) {
si (err) {
res.send (err);
} más {
res.json (resultado);
}
});
}
});
// Actualizar Todo
router.put (‘/ todo /: id’, function (req, res, next) {
var todo = req.body;
var updObj = todo;
if (! updObj) {
res.status (400);
res.json ({
“error”: “datos no válidos”
});
} más {
if (updObj._id && (typeof (updObj._id) === ‘cadena’)) {
updObj._id = req.params.id; // el campo id no se puede cambiar el error sigue ocurriendo sin esto
}
db.todos.update ({_ id: updObj._id}, updObj, {upsert: false}, función (err, resultado) {
si (err) {
console.log (“error:” + err);
res.send (“Eror:” + err);
} más {
res.json (resultado);
}
});
}
});
// Eliminar todo
router.delete (‘/ todo /: id’, function (req, res, next) {
db.todos.remove ({
_id: mongojs.ObjectId (req.params.id),
}, ”, función (err, resultado) {
si (err) {
res.send (err);
} más {
res.json (resultado);
}
});
});
module.exports = enrutador;

Recuerde que JavaScript (Angular 2 en este caso) en el front-end no sabe, o CUIDADO, que su servidor está implementado en Node. Podría haberlo creado fácilmente en Java o en la API web ASP.NET con C #, PHP. Al cliente no le importa. Es solo DESCANSO.

Básicamente, necesita desarrollar un middleware usando webpack-hot-middleware y webpack. El middleware webpack lo ayudará a recargar en caliente la aplicación durante el proceso de desarrollo. glenjamin / webpack-hot-middleware

Puede desarrollar su servidor de nodo utilizando express en paquetes npm y http.

More Interesting

¿Cuáles son las ventajas de usar Extensible Markup Language (XML)?

¿Qué pasó con Omnisio después de su adquisición por parte de Google?

¿Existe una aplicación móvil o web para el seguimiento del tiempo de trabajo que también haga un seguimiento del tiempo restante o del trabajo excesivo del día anterior?

Desarrollo web: ¿Qué herramientas utiliza para probar la velocidad de la aplicación de su sitio web en su entorno local?

Para aplicaciones web a gran escala, ¿son los marcos web y WordPress / Drupal las dos únicas opciones eficientes?

¿Qué problemas técnicos se deben tener en cuenta para proyectos de desarrollo web a gran escala?

¿Qué es una aplicación web?

¿Es un mal movimiento no incluir algún tipo de registro de correo electrónico / creación de cuenta al crear una aplicación web y solo confiar en el registro / inicio de sesión social?

¿Qué idiomas debo saber para crear aplicaciones web?

Si construyo mi propia aplicación web compleja (Django) copiando y ajustando pequeños fragmentos de código tomados de 100 aplicaciones simples diferentes escritas por otras personas, ¿puedo considerarme un programador? ¿Por qué? Por qué no?

¿Cuánto tiempo tomaría desplazarse hasta el final de tumblr?

Cómo desarrollar un sitio web fácilmente sin ninguna dificultad

¿Cuál es la mejor herramienta gratuita de collage interactivo de fotos?

¿Existe una empresa de desarrollo web que desarrolle ideas desde el concepto hasta la realidad?

¿Cuál es el mejor marco de JavaScript?