7

我将尽可能详细地解释这个问题。

我正在尝试将 AngularJS 与 Express 一起使用，但遇到了麻烦。我希望显示 HTML 文件（不使用模板引擎）。这些 HTML 文件将具有 AngularJS 指令。
但是，我无法显示一个简单的 HTML 文件本身！

目录结构如下： 

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

的内容public/js/app.js是： 

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

的内容public/js/controllers/js是： 

function IndexCtrl() {  
}

其中body标签的内容views/index.html是： 

<div ng-view></div>

就是这样。期望 AngularJS 将用 test.html 替换上面的视图 -views/partials/test.html其内容是： 

This is the test page!

包含在段落标签中。就是这样！

最后，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);  
});

现在，当我$node app.js在根文件夹中进行操作时，服务器启动时没有任何错误。但是，如果我localhost:3000在浏览器中访问，URL 会更改为localhost:3000/#/并且页面会卡住/冻结。我什至无法检查 Chrome 中的控制台日志！
这是我面临的问题。关于我做错了什么的任何线索？

4

2 回答 2

8

终于弄明白了——经过许多激烈的拉头发！
页面冻结的原因是因为（一步一步解释）：

  1. 用户启动 localhost:3000
  2. 这向快速服务器请求“/”
  3. Express 呈现 index.html
  4. AngularJS 将呈现模板“partials/test.html”。
  5. 在这里，我进行了大胆的猜测——AngularJS 已经对页面“partials/test.html”发出了 HTTP 请求。

  6. 但是，您可以看到 express 或者 app.js 没有此 GET 请求的处理程序。也就是说，缺少以下代码：

    app.get('partials/:name', function(request, response) {
    var name = request.params.name;
    response.render('partials/' + name);
    });

在app.jsROOT 目录中。添加此代码后，页面将按预期呈现。

于 2013-02-25T10:24:53.317 回答
-1

尝试遵循这个工作小提琴中的设计模式。代码如下所示。您可以用 templateUrl 替换模板选项，它应该仍然可以正常工作。

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

});
于 2013-02-24T20:42:51.493 回答