node.js - example - node js express mongodb rest api

¿Cómo usar rutas AngularJS con Express(Node.js) cuando se solicita una nueva página?

Question

Estoy usando Express, que carga AngularJS desde un directorio estático. Normalmente, solicitaré http://localhost/ , en el cual Express me sirve mi index.html y todos los archivos Angular correctos, etc. En mi aplicación Angular, tengo estas rutas de configuración, que reemplazan el contenido en una ng-view :

$routeProvider.when(''/'', {
    templateUrl: ''/partials/main.html'',
    controller: MainCtrl,
});

$routeProvider.when(''/project/:projectId'', {
    templateUrl: ''/partials/project.html'',
    controller: ProjectCtrl,
});

$locationProvider.html5Mode(true);

En mi página principal, tengo un enlace a <a href="/project/{{project.id}}"> , que cargará correctamente la plantilla y me dirigirá a http://localhost/project/3 o cualquier ID Lo he especificado El problema es cuando intento dirigir mi navegador a http://localhost/project/3 o actualizar la página, la solicitud va al servidor Express / Node, que devuelve Cannot GET /project/3 .

¿Cómo configuro mis rutas Express para acomodar esto? Supongo que requerirá el uso de $location en Angular (aunque preferiría evitar las "feas" búsquedas y #hashes que usan), pero no tengo ni idea de cómo configurar las rutas Express para gestionarlas. esta.

Gracias.

Answer 1

Crearía un controlador catch-all que se ejecuta después de las rutas regulares que envía los datos necesarios.

app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(app.router);
app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + ''/public/index.html'');
});

app.router es el middleware que ejecuta todas sus rutas Express (como app.get y app.post ); normalmente, Express coloca esto al final de la cadena de middleware automáticamente, pero también puede agregarlo a la cadena explícitamente, como hicimos aquí.

Entonces, si el URL no es manejado por app.router , el último middleware enviará la vista de HTML angular al cliente. Esto sucederá con cualquier URL que no sea manejada por el otro middleware, por lo que su aplicación Angular deberá manejar correctamente las rutas no válidas.

Answer 2

Creo que debería haber aclarado que no estaba interesado en utilizar un motor de plantillas, pero al tener Angular todos los parciales de HTML, el nodo funciona completamente como servidor estático aquí (pero no será para JSON). API. Brian Ford muestra cómo hacerlo usando Jade aquí: http://briantford.com/blog/angular-express.html

Mi aplicación es de una sola página, así que creé una ruta Express para cada posible patrón de URL, y cada uno de ellos hace lo mismo.

fs.readFile(__dirname + ''/public/index.html'', ''utf8'', function(err, content) {
    res.send(content);
});

Asumía que tendría que pasar algunas variables de solicitud a Angular, pero parece que Angular se encarga de ello automáticamente.

Answer 3

con Express 4, es probable que desee capturar todas las solicitudes y redireccionar a angularjs index.html page. app.use(app.router); ya no existe y res.sendfile está en desuso, use res.sendFile con una F mayúscula.

app.post(''/projects/'', projectController.createProject);
app.get(''/projects/:id'', projectController.getProject);
app.get(''*'', function (req, res) {
    res.sendFile(''/public/index.html'');
});

app.get(''*'', function (req, res){...} todas tus rutas API antes de la ruta para cada ruta app.get(''*'', function (req, res){...} )