Question

我试图创建一个简单的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

我花了很多时间试图弄清楚出了什么问题，所以任何帮助都会非常感激！

Answer 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，你必须单独包含它，现在，我只是改变了你的{{ 1}}它对我有用

js/app.js

Answer 2

删除[＆＃39; ngRoute＆＃39;]因为您没有使用它。如果您想使用，请在头部包含angular-route.js

配置Express和Angular

2 个答案: