Express e AngularJS - la pagina Web si blocca quando si tenta di aprire la pagina iniziale

Question

Spiegherò il problema nel modo più dettagliato possibile.

Sto tentando di utilizzare AngularJS con Express e sono in difficoltà. Desidero visualizzare file HTML (non utilizzando un motore di template). Questi file HTML avranno direttive AngularJS.
Tuttavia, non sono in grado di visualizzare un semplice file HTML stesso!

La struttura di directory è la seguente:

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

Il contenuto di public/js/app.js è:

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

Il contenuto di public/js/controllers/js è:

function IndexCtrl() { 
} 

Il contenuto del tag body in views/index.html è:

<div ng-view></div> 

Questo è tutto. L'aspettativa è che AngularJS sostituiranno la vista di cui sopra con test.html - views/partials/test.html i cui contenuti sono:

This is the test page! 

racchiuso all'interno dei tag di paragrafo. Questo è tutto!

Infine, i contenuti di ROOT/app.js file è:

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

Ora, quando faccio $node app.js nella cartella principale, il server avvia senza alcun errore. Tuttavia, se vado a localhost:3000 nel browser, l'URL cambia in localhost:3000/#/ e la pagina si blocca/si blocca. Non riesco nemmeno a controllare il log della console in Chrome!
Questo è il problema che sto affrontando. Qualche idea su cosa sto facendo male?

Answer 1

Finalmente capito - dopo molti intensi momenti di tirare i capelli !!
Il motivo per cui la pagina si blocca è perché (passo per passo spiegato): lancia

1. utente localhost: 3000
2. Questo richiede al server espresso per '/'
3. espresso renders index.html
4. AngularJS renderizza il modello 'partials/test.html'.
5. Qui, sto prendendo una ipotesi selvaggia - AngularJS ha fatto una richiesta HTTP per la pagina 'partials/test.html'.

6. Tuttavia, è possibile notare che app.js o piuttosto non ha un gestore per questa richiesta GET. Cioè, manca il seguente codice:

   app.get ('parziali /: nome', la funzione (richiesta, risposta) {
   nome var = request.params.name;
   response.render ('parziali /' + nome);
   });

all'interno del app.js della directory ROOT. Una volta aggiunto questo codice, la pagina viene visualizzata come previsto.

Answer 2

Provare a seguire lo schema di progettazione in this working fiddle. Codice mostrato di seguito. È possibile sostituire l'opzione modello con templateUrl e dovrebbe comunque funzionare correttamente.

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

app.config(['$routeProvider', function($routeProvider){ 
    $routeProvider.when('/', {template: '<p>Index page</p>', controller: 'IndexCtrl'}); 
    $routeProvider.otherwise({redirect:'/'}); 
}]); 

app.controller('IndexCtrl', function(){ 

});