configurationExpress和Angular
我试图做一个简单的Angular / Express todo-list应用程序,而我遇到了一些麻烦。 它仍然在工作中,但是当我在localhost:3000上运行下面的代码时,我最终在网页上打印了{{thing}}。
我的文件path是:
- 应用
- JS
- app.js
- 的index.html
- JS
- node_modules(这里是angular度,expression等)
- 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
我花了一个荒谬的时间,试图找出哪里出了问题,所以任何帮助都将不胜感激!
你的代码中有几个错误,
首先,主要的一个,你是指导每个请求索引页面,所以没有办法得到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
不是ngRoute
的一部分,你必须单独包含它,现在,我只是改变了你的js/app.js
,它适用于我
angular.module('testApp', []) .controller('TestCtrl', ['$scope', function ($scope) { 'use strict'; $scope.items = ["foo", "bar"]; }]);
删除['ngRoute'],因为你不使用它。 如果你想使用,请在头部包含angular-route.js