Express y AngularJS: la página web se bloquea al intentar abrir la página de inicio

Voy a explicar el tema con el mayor detalle posible.

Estoy tratando de usar AngularJS con Express y estoy teniendo problemas. Deseo mostrar archivos HTML (no utilizando un motor de plantillas). Estos archivos HTML tendrán directivas AngularJS.
Sin embargo, no puedo mostrar un simple archivo HTML en sí mismo.

La estructura del directorio es la siguiente:

Root ---->public -------->js ------------>app.js ------------>controllers.js ---->views -------->index.html -------->partials ------------>test.html ---->app.js 

El contenido de public/js/app.js es:

 angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', {templateUrl: 'partials/test.html', controller: IndexCtrl}); $routeProvider.otherwise({redirectTo: '/'}); }]); 

El contenido de public/js/controllers/js es:

 function IndexCtrl() { } 

El contenido de la etiqueta del cuerpo en views/index.html es:

 

Eso es. La expectativa es que AngularJS sustituirá la vista anterior con test.html – views/partials/test.html cuyos contenidos son:

 This is the test page! 

encerrado dentro de las tags de párrafo. ¡Eso es!

Finalmente, el contenido del archivo ROOT/app.js es:

 var express = require('express'); var app = module.exports = express(); // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); app.engine('html', require('ejs').renderFile); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.static(__dirname + '/public')); app.use(app.router); }); app.configure('development', function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.configure('production', function(){ app.use(express.errorHandler()); }); // routes app.get('/', function(request, response) { response.render('index.html'); }); // Start server app.listen(3000, function(){ console.log("Express server listening on port %d in %s mode", this.address().port, app.settings.env); }); 

Ahora, cuando hago $node app.js en la carpeta raíz, el servidor se inicia sin ningún error. Sin embargo, si voy a localhost:3000 en el navegador, la URL cambia a localhost:3000/#/ y la página se atasca / se bloquea. ¡Ni siquiera puedo comprobar el registro de la consola en Chrome!
Este es el problema que estoy enfrentando. ¿Alguna pista sobre lo que estoy haciendo mal?

¡Finalmente lo descubrí – después de muchos momentos intensos de jalar el cabello!
La razón por la que la página se bloquea es porque (se explica paso a paso):

  1. El usuario lanza localhost: 3000
  2. Esto solicita el servidor express para ‘/’
  3. Express procesa index.html
  4. AngularJS representará la plantilla ‘partials / test.html’.
  5. Aquí, tomo una suposición alocada: AngularJS ha realizado una solicitud HTTP para la página ‘partials / test.html’.
  6. Sin embargo, puede ver que express o, más bien, app.js no tiene un controlador para esta solicitud GET. Es decir, falta el siguiente código:

    app.get (‘parciales /: nombre’, función (solicitud, respuesta) {
    nombre var = request.params.name;
    response.render (‘partials /’ + nombre);
    });

Dentro de app.js del directorio ROOT. Una vez que agrego este código, la página se renderiza como se espera.

Intenta seguir el patrón de diseño en este violín de trabajo . Código mostrado abajo. Puede reemplazar la opción de plantilla con templateUrl y aún debería funcionar bien.

 var app = angular.module('app', []); app.config(['$routeProvider', function($routeProvider){ $routeProvider.when('/', {template: '

Index page

', controller: 'IndexCtrl'}); $routeProvider.otherwise({redirect:'/'}); }]); app.controller('IndexCtrl', function(){ });