使用 AngularJS 连接 MongoDB答案

【问题标题】：Connecting MongoDB with AngularJS使用 AngularJS 连接 MongoDB
【发布时间】：2018-04-11 22:59:14
【问题描述】：

我正在做一个项目，我正在尝试将 mongodb 与 Angular 应用程序连接起来。

基本上我正在获取集合并通过 express 运行它以通过数组映射它，然后使用该数组创建一个动态页面。我已经通过每个系统得到了它，但我不知道如何将它连接到阵列。任何帮助表示赞赏。

完整代码可以在github上找到here。

客户端/index.html

<!DOCTYPE html>

<html lang="en" dir="ltr"  ng-app="inlineClient">
 <head>
    <meta charset="utf-8">
    <title>InLine Client</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">  
  </head>
  <body>

    <div ng-controller="eventsController as eventsCtrl">
      <div ng-repeat="event in eventsCtrl.venues">
        <h1>{{event.name}}</h1>
        <h2>{{event.time}}</h2>
        <p>{{event.description}}</p>
        <!--<event></event>-->
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

客户端/app.js

(function () {
  var app = angular.module('inlineClient', []);

  app.controller('eventsController', ['$http', function($http) {
    var venues = [];

    $http.get('/events').then(successCallback);
    function successCallback(response){
      console.log('Got events successfully');
      console.log(response);
      venues.push(response);
    }
    console.log(venues);

    // $http.get('/events').success(function(data) {
    //   console.log('Got events successfully');
    //   console.log(data);
    //   events.venues = data;
    // });

  }]);

  app.directive('events', function() {
    return {
      restirct: 'E',
      templateUrl: './event.html'
    };
  });

//   var venues = [
//     {
//     name: 'Breakfast',
//     time: '9:00 AM',
//     description: 'Come on down to enjoy some good eats!'
//     },
//     {
//       name: 'Lunch',
//       time: '12:00 PM',
//       description: 'Come on down to enjoy some good eats!'
//     },
//     {
//       name: 'Contest Programming',
//       time: '2:00 AM',
//       description: 'Compete in some algorithm programming for some sweet prizes'
//     },
// ];

})();

服务器/app.js

"use strict";

let express = require('express');
let app = express();

let mongoUtil = require('./mongoUtil');
mongoUtil.connect();

app.use('/client', express.static(__dirname + "/../client"));

app.get("/events", (request, response) => {
  let events = mongoUtil.events();
  events.find().toArray((err, docs) => {
    //console.log((docs));
    let eventArr = docs.map(obj => ({ name: obj.name, time: obj.time, description: obj.description }));
    console.log(eventArr);
    response.json(eventArr);
  });
});

app.listen(8000, function() {
  console.log("listening on 8000");
});

【问题讨论】：

您的浏览器控制台中有任何内容吗？

标签： javascript html angularjs mongodb ecmascript-6

【解决方案1】：

您使用的是ControllerAs 语法，因此您必须参考控制器的this 变量

在控制器中取var self = this;

(function () {
  var app = angular.module('inlineClient', []);

  app.controller('eventsController', ['$http', function($http) {
    var self = this;
    self.venues = [];

    $http.get('/events').then(function(response) {
      console.log('Got events successfully');
      console.log(response);
      self.venues.push(response);
      console.log(self.venues);
    })
    .catch(function(error){
       console.log(error);
     })

  }]);

  app.directive('events', function() {
    return {
      restirct: 'E',
      templateUrl: './event.html'
    };
  });


})();

内部响应变化，

self.venues.push(response);

【讨论】：

@Khalid Talakshi，你有什么问题吗？
没试过。我会在几个小时内回复你
试过了，没用，可能是我的html有问题？
能不能把console.log(response);的值加起来
你能在 html 中添加 {{eventsCtrl.venues | json }} 并检查它呈现的内容吗？

【解决方案2】：

我认为您的代码需要有服务器端代码。除了 server/app.js 之外，我没有找到任何后端，也许您需要观看 [https://www.youtube.com/playlist?list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d]，它涵盖了开发 Web 所需的所有细节。

【讨论】：

OP 确实有一个后端......此外，虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。