使用expressionangularJs和mongoDB但ngResourceangular度不加载
这里是我的MongoDB后端代码
var mongo = require("mongodb"); var DbHost = "127.0.0.1"; var DbPort = mongo.Connection.DEFAULT_PORT; module.exports.list = list; var db = new mongo.Db("ferrari-db",new mongo.Server(DbHost,DbPort,{}),{safe:true}); var collectionName = "carsList"; function list(req,res,callback){ db.open(function(error){ db.collection(collectionName,function(error,collection){ console.log("have the collection"); collection.find().toArray(function(error,data){ if (error) callback(false); else{ callback(true); console.log(data); res.json(data); } }); }); }); } 这是我的Node.jsexpression代码
var express = require('express'); var http = require('http'); var path = require('path'); var cars = require('./server/api/cars.js') var app = express(); var client_dir = path.join(__dirname, '/client') // all environments app.set('port', process.env.PORT || 3000); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(app.router); app.use(express.static(client_dir)); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } app.get('/', function(req,res){ res.sendfile(path.join(client_dir,'index.html')) }); app.get('/api/cars',cars.list); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
这是我的angularJs app.js代码
var CarApp = angular.module('CarApp',['ngResource']) CarApp.config(function($routeProvider){ $routeProvider .when('/',{controller:ListCtrl,templateUrl:'partials/list.html'}) .otherwise({redirectTo:'/'}) }) ; CarApp.factory('Cars',function($resource){ return $resource('/api/cars/:id',{id:'@id'},{update:{method:'PUT'}}) }); function ListCtrl ($scope,Cars){ $scope.cars = Cars.query(); }
这里是index.html文件
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>Ferrari</title> <link type="text/css" rel= "stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <script src="vendor/bootstrap/js/bootstrap.js"></script> <script src="vendor/angular.min.js"></script> <script src="vendor/angular-resource.min.js"></script> <script src="js/app.js"></script> <body> <h1>Hello</h1> <div ng-app="CarApp" class="container"> <div ng-view> </div> </div> </body> </html>
这里是我的list.html文件
<table class= "table table-bordered table-hover"> <thead> <th>Type</th> <th>Mileage</th> <th>Year</th> <th>Price</th> </thead> <tr ng-repeat="car in cars"> <td>{{ car.title }}</td> <td>{{ car.mileage }}</td> <td>{{ car.year }}</td> <td>{{ car.price }}</td> </tr> </table>
list.html模板正在加载。 我得到错误加载资源失败：服务器响应状态为500（内部服务器错误） ？ 另外我得到错误错误：发送后无法设置标题。 我可以在列表方法中注销控制台中的数据。 任何帮助将是非常可观的？
你的问题在cars.list函数中。
Express路线的结构是以下function myRoute(req, res, next) {...} 。
next函数（或者你所说的callback函数）只有在中间件之后有另一个函数时才有用。
也许errorHandler中间件后来被调用（ app.get('/api/cars', cars.list); ），我不确定。
问题可能是你调用callback(true)来启动下一个中间件（并且发送一个响应，包含头文件等），然后尝试用res.json(...)发送另一个响应。
您需要删除callback(true) 。
所以我认为你应该像这样重写你的函数：
function list(req, res, next) { db.open(function (error) { db.collection(collectionName, function (error, collection) { console.log('Have the collection'); collection.find().toArray(function(error,data){ if (error) { // Hopefully we pass the error to the error handler return next(error); } else { // If everything goes fine we send the data. console.log(data); return res.json(data); } }); }); }); }