配置Express和Angular

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

我的文件路径是：

应用
- JS
  - app.js
- 的index.html
node_modules（这里存在的角度，表达等）
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

我花了很多时间可笑量试图找出什么地方出了错，所以任何帮助都将不胜感激！

来源

2015-03-13 Kevin Zeng

打开的浏览器控制台，来看看错误消息 – 2015-03-13 08:33:39

https://jsfiddle.net/tjhack/mgf4ohq5/1/刚刚尝试过这一点，它的工作原理。像以前的评论检查控制台一样，你可能在服务器端有错误 – tjhack 2015-03-13 08:39:10

你确定你的路径是正确的吗？好像你的控制器没有加载。我尝试在这个plunker：http://plnkr.co/edit/GIP5zAIPYDtB4LOJSBGK?p=preview和它的工作... – Carnivorus 2015-03-13 08:47:05

有在你的代码一些错误，

第一，主要的一个，你是指导每个请求索引页，所以没办法得到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"]; 
    }]);

来源

2015-03-13 08:47:51 mido

感谢您的回复！我应用了您所做的更改，但页面仍然以{{item}}形式打印出来，就像我在上面的puush链接中那样。 – 2015-03-13 08:59:43

你的控制台说什么？同样，文件是在正确的位置，现在你的html必须在'project_root/app /'文件夹和'app_js'在'project_root/js /'文件夹中。 – mido 2015-03-13 09:03:06

没什么。我没有得到任何错误，并从'DEBUG = express：* nodemon index.js'运行它没有给出任何错误。 GET成功了/app/js/app.js。编辑：我将文件移动到正确的目录，现在它的工作。非常感谢！ – 2015-03-13 09:08:16

删除['ngRoute']，因为你不使用它。如果你想使用，请在头角route.js

来源

2015-03-13 08:32:53 SetupX

感谢您的回复！我尝试了mido22的解决方案，其中包括取出'ngRoute'，但这并没有解决问题。你有什么建议吗？ – 2015-03-13 09:00:29

配置Express和Angular

回答

相关问题