配置 Express 和 Angular答案

【问题标题】：Configuring Express and Angular配置 Express 和 Angular
【发布时间】：2015-03-13 17:10:37
【问题描述】：

我正在尝试制作一个简单的 Angular/Express 待办事项列表应用程序，但遇到了很多麻烦。它仍在工作中，但是当我在 localhost:3000 上运行以下代码时，我最终在网页上打印了 {{ thing }}。

我的文件路径是：

应用程序
- js
  - app.js
- index.html
node_modules（这里有 angular、express 等）
index.js
package.json

这是我的 index.html 代码：

<!DOCTYPE html>
<html lang="en" ng-app='testApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular-Express Test App</title>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script type='text/javascript' src='js/app.js'></script>
</head>
<body ng-controller='TestCtrl'>
    <table>
        <thead>
            <tr>
                <td>Item</td>
                <td>Remove</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='item in items'>
                <td>{{ item }}</td>
                <td><a href="#"></a>Done?</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

这是我的 index.js 代码：

var express = require('express');
var app = express();
var http = require('http').Server(app);
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.set('port', process.env.OPENSHIFT_NODEJS_PORT || 3000); //yes I plan to deploy to OpenShift
app.set('ipaddr', process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1");


app.get('*', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});

http.listen(3000, function () {
    'use strict';
    console.log('Express server listening on  IP: ' + app.get('ipaddr') + ' and port ' + app.get('port'));
});

还有 app.js：

angular.module('testApp', ['ngRoute'])
    .controller('TestCtrl', [$scope, function ($scope) {
        'use strict';
        $scope.items = ["foo", "bar"];
    }]);

这是我看到的屏幕截图，虽然其中确实没有太多我没有提到的内容...：http://puu.sh/gyhjT/684fa116f7.png

我花了很多时间试图找出问题所在，所以任何帮助都将不胜感激！

【问题讨论】：

打开浏览器控制台查看错误信息
jsfiddle.net/tjhack/mgf4ohq5/1 刚刚尝试过这个并且它有效。像以前的评论检查控制台一样，您可能在服务器端出现错误
你确定你的路径是正确的吗？好像你的控制器没有加载。我在这个 plunker 中尝试过：plnkr.co/edit/GIP5zAIPYDtB4LOJSBGK?p=preview 它可以工作......
Mido22 的解决方案对我有用。但是，在此之前，我在控制台中没有收到任何错误消息，即使在调试模式下通过 nodemon 也是如此，所以这很奇怪。

标签： javascript angularjs node.js express

【解决方案1】：

您的代码中几乎没有错误，

首先，主要的是，您将每个请求都指向索引页面，因此无法获得js/app.js

所以改变：

app.get('*', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});

到：

app.get('/', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});


app.get('/js/:file', function(req, res){
    res.sendFile(__dirname + '/app/js/'+req.params.file, res);
});

接下来是，ngRoute 和 $scope 错误，ngRoute 不是 angular.min.js 的一部分，你必须单独包含它，现在，我刚刚更改了你的 js/app.js，它对我有用

angular.module('testApp', [])
    .controller('TestCtrl', ['$scope', function ($scope) {
        'use strict';
        $scope.items = ["foo", "bar"];
    }]);

【讨论】：

感谢您的回复！我应用了您所做的更改，但页面仍然打印为 {{ item }}，就像我在上面的推送链接中一样。
你的控制台在说什么？另外，文件位置是否正确，现在您的 html 必须在 project_root/app/ 文件夹中，app.js 在 project_root/js/ 文件夹中。
什么都没有。我没有收到任何错误，并且使用DEBUG=express:* nodemon index.js 运行它没有给出任何错误。 /app/js/app.js 的 GET 成功。编辑：我将文件移动到正确的目录，现在它正在工作。非常感谢！
稍微改变了逻辑，现在检查

【解决方案2】：

删除 ['ngRoute'] 因为你不使用它。如果要使用，请在head中包含angular-route.js

【讨论】：

感谢您的回复！我尝试了 mido22 的解决方案，其中包括取出“ngRoute”，但这并没有解决问题。你有什么建议吗？