如何：将 node.js mongodb 结果传递给 angularjs？答案

【问题标题】：How To: Pass node.js mongodb result to angularjs?如何：将 node.js mongodb 结果传递给 angularjs？
【发布时间】：2025-12-10 21:25:01
【问题描述】：

所以我有一个 MongoDB，我使用 Node.js 进行查询。

使用此功能没有发送数据，我不知道出了什么问题

var findIco = function(db, callback) {
   var cursor =db.collection('footIco').find();
   cursor.each(function(err, doc) {
     // console.log(err);
      if (doc != null) {
        console.log(doc); <------ DISPLAY THE DATA IN THE CONSOLE
      } else {
         callback();
      }
   });
}; 
app.get('/icons', function(req, res){
  //calling the function
  MongoClient.connect(url, function(err, db) {
    if(err) {
      console.log(err);
      return res.status(500).send(err);
   }

    findIco(db, function(icons) {
         res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
  console.log(icons);<--------------- IS UNDEFINED
        res.json(icons);
        db.close();
        return;
    });
  });
});
app.listen(8080);

我做错了什么？

【问题讨论】：

标签： javascript angularjs node.js mongodb express

【解决方案1】：

您需要使用某种形式的 Web 服务器来创建一个 API，该 API 将在某个资源收到请求时返回此数据。您可以使用 Angular 应用程序中的 $http 服务向您的 API 发出请求。最受欢迎的 Node Web 框架选择是 Express，它封装了 Node Core HTTP Module 并提供了强大的 API。

其他流行的 Node.js Web 框架

Koa
Hapi.js

这些只是几个 Node.js Web 框架，我还排除了任何基于 MVC 的框架，例如 Meteor 和 Sails.js，因为 Angular 已经提供了这部分。

要在 Express 中快速启动和运行，您可以使用 express-generator 搭建一个基本的 Express API。然后在你的 Node.js 服务器中为你的函数添加一个路由。

findIco

var findIco = function(db, callback) { 
  db.collection('footIco').find().toArray(function(err, docs) {
    if (err) return callback(err, null);

    return callback(null, docs);
  }); 
}

Node.js API

app.get('/icons', function getIcons(req, res){
  //calling the function
  MongoClient.connect(url, function(err, db) {
    if(err) {
      console.log(err);
      return res.status(500).json(err);
   }

    findIco(db, function(err, icons) {
      if (err) 
        res.status(500).json(err);
      else {
        if (!icons)
          res.status(204).send();
        else
          res.json(icons);
      }
      db.close();
      return;
    });
  });
});

Angular $http 调用footIconCtrl

app.controller('footIconCtrl', ['$scope', '$http', function($scope, $http){
  $scope.icons = [];

  $http({
    method: 'GET',
    url: 'http://<serverAddress>:<serverPort>/icons'
  })
    .then(function(icons) {
      $scope.icons = icons.data;
    })
    .catch(function(errRes) {
      // Handle errRess
    });
});

【讨论】：

我如何定义 $http？
你没有定义它，它在核心 Angular 模块中提供。从控制器访问它的方式是将其注入到控制器上的依赖项中，如下所示：app.controller('footIconCtrl', ['$scope', '$http', function($scope, $http) {});
我收到此错误 XMLHttpRequest cannot load 127.0.0.1:8080/icons。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost' 不允许访问。
您的 Angular 应用需要由您的 express 应用提供服务，或者它们需要位于同一个域中，即它们都需要来自 localhost。
看到这个post，问题和答案代码示例应该可以帮助你解决这个问题。

【解决方案2】：

在您的 Angular 代码中，您将拥有一个类似 getDocument.controller.js 的文件，其中包含一个对您的服务进行 http 调用的函数。像这样的东西：

var getDocs = function(){
    var apis = http://localhost:9000/api/getDocs;
    httpRequest.get(apis).
    then(function(docs){
        // Your code to handle the response
    });
};

现在在您的服务器端代码中，您可以将响应发送为

CollectionName.find({}, function (err, docs) {
    if (err) return next(err);
    if (!docs) return res.send(401);
    res.json(docs);
});

【讨论】：