Express và AngularJS - trang web bị đóng băng khi cố gắng mở trang chủ

Question

Tôi sẽ giải thích vấn đề càng chi tiết càng tốt.

Tôi đang cố gắng sử dụng AngularJS với Express và đang gặp sự cố. Tôi muốn hiển thị các tệp HTML (không sử dụng công cụ tạo khuôn mẫu). Các tệp HTML này sẽ có chỉ thị AngularJS.
Tuy nhiên, tôi không thể hiển thị một tệp HTML đơn giản!

Cấu trúc thư mục như sau:

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

Nội dung public/js/app.js là:

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

Nội dung public/js/controllers/js là:

function IndexCtrl() { 
} 

Nội dung của thẻ nội dung trong views/index.html là:

<div ng-view></div> 

Vậy đó. Hi vọng là AngularJS sẽ thay thế quan điểm trên với test.html - views/partials/test.html có nội dung là:

This is the test page! 

kèm trong các thẻ đoạn. Đó là nó!

Cuối cùng, nội dung của tập tin là ROOT/app.js:

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

Bây giờ, khi tôi làm $node app.js trong thư mục gốc, máy chủ bắt đầu mà không cần bất kỳ lỗi. Tuy nhiên, nếu tôi truy cập localhost:3000 trong trình duyệt, URL sẽ thay đổi thành localhost:3000/#/ và trang bị kẹt/đóng băng. Tôi thậm chí không thể kiểm tra nhật ký bảng điều khiển trong Chrome!
Đây là vấn đề mà tôi đang gặp phải. Bất kỳ đầu mối về những gì tôi đang làm sai?

Answer 1

Cuối cùng đã tìm ra - sau nhiều thời điểm kéo tóc căng thẳng !!
Lý do tại sao trang bị đóng băng là do (giải thích từng bước):

1. dùng khởi chạy localhost: 3000
2. này yêu cầu máy chủ rõ ràng về việc '/'
3. tốc ám index.html
4. AngularJS sẽ hiển thị mẫu 'partials/test.html'.
5. Ở đây, tôi đang dự đoán tự nhiên - AngularJS đã thực hiện yêu cầu HTTP cho trang 'partials/test.html'.

6. Tuy nhiên, bạn có thể thấy rằng app.js thể hiện hoặc đúng hơn không có trình xử lý cho yêu cầu GET này. Tức là, mã sau bị thiếu:

   ứng dụng.nhận được ('partials /: name', chức năng (yêu cầu, phản hồi) {
   var name = request.params.name;
   response.render ('partials /' + name);
   });

bên trong app.js của thư mục ROOT. Khi tôi thêm mã này, trang sẽ hiển thị như mong đợi.

Answer 2

Thử theo mẫu thiết kế trong this working fiddle. Mã được hiển thị bên dưới. Bạn có thể thay thế tùy chọn mẫu bằng templateUrl và nó vẫn hoạt động tốt.

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(){ 

});