Express und AngularJS - Webseite friert beim Versuch, Homepage zu öffnen

Question

Ich werde das Problem so detailliert wie möglich erklären.

Ich versuche AngularJS mit Express zu verwenden und stehe in Schwierigkeiten. Ich möchte HTML-Dateien anzeigen (ohne eine Template-Engine). Diese HTML-Dateien haben AngularJS-Anweisungen.
Ich kann jedoch keine einfache HTML-Datei selbst anzeigen!

Die Verzeichnisstruktur ist wie folgt:

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

Der Inhalt public/js/app.js ist:

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

Der Inhalt public/js/controllers/js ist:

function IndexCtrl() { 
} 

Der Inhalt des Body-Tag in views/index.html ist:

<div ng-view></div> 

Das ist es. Die Erwartung ist, dass AngularJS die oben Ansicht mit test.html ersetzen - views/partials/test.html deren Inhalt:

This is the test page! 

innerhalb der Absatz-Tags eingeschlossen. Das ist es!

Schließlich wird der Inhalt der ROOT/app.js Datei ist:

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); 
}); 

Nun, wenn ich $node app.js im Stammordner tun, startet der Server ohne Fehler. Wenn ich jedoch im Browser auf localhost:3000 gehe, ändert sich die URL zu localhost:3000/#/ und die Seite wird blockiert/eingefroren. Ich kann nicht einmal das Konsolenprotokoll in Chrome überprüfen!
Dies ist das Problem, mit dem ich konfrontiert bin. Irgendwelche Hinweise darauf, was ich falsch mache?

Answer 1

Endlich herausgefunden - nach vielen intensiven Augenblicken des Haarziehens !!
Der Grund, warum die Seite friert, weil (Schritt für Schritt erklärt):

1. Benutzer starten localhost: 3000
2. Dieser ausdrücklichen Server für '/'
3. Express rendert index.html
fordert
4. AngularJS wird die Vorlage 'partials/test.html' darstellen.
5. Hier nehme ich eine wilde Vermutung - AngularJS hat eine HTTP-Anfrage für die Seite 'Partials/test.html' gemacht.

6. Sie können jedoch sehen, dass Express oder eher app.js keinen Handler für diese GET-Anfrage hat. Das heißt, der folgende Code fehlt:

   App.get ('Partials /: Name', Funktion (Anfrage, Antwort)) {
   var name = request.params.name;
   response.render ('Partials /' + Name);
   });

innerhalb app.js des ROOT-Verzeichnisses. Sobald ich diesen Code hinzugefügt habe, rendert die Seite wie erwartet.

Answer 2

Versuchen nach dem Design-Muster in this working fiddle. Code unten gezeigt. Sie können die Template-Option durch templateUrl ersetzen und es sollte immer noch gut funktionieren.